Here you will find documentation for the WordPress plugin: Ellibot WooCommerce Slider.
Note: Yoy need the WooCommerce plugin installed for this extension to work.
How to use
- Use shortcodes in content or in templates to show the slider on the website.
- In content, use shortcode: [ellibot_wc_slider] to display all featured products.
- In php-template, use: do_shortcode(“[ellibot_wc_slider]“);
- Set attribute: settings-id=”x” for the settings you want to use for the current slider.
- Remember: max 20 featured products will appear in the slider. Go Pro for more options!
Shortcode attributes for Pro users only
- Set attribute: settings-id=”x” for the settings you want to use for the current slider.
- Set attribute: cat-id=”x” to show all products from product categories id.
Separate each id with a comma, example: 1,2,3. - Set attribute: type=”x” to show all or featured products from the product categories id. Possible values are: all (default) or featured.
- Set attribute: orderby=”x” to get products in specified order. Possible values are: menu_order, rand, date (default), title, comment_count.
- Set attribute: order=”x” to get products in ascending or descending order. Possible values are: asc (default) or desc.
- Set attribute: limit=”x” to limit to a certain number of slides. Default is 10.
- Set attribute: pro-id=”x” to show specific products.
Separate each id with a comma, example: 1,2,3.
Important! Pro-id overrides attributes: cat-id, type and limit. - Example: [ellibot_wc_slider settings-id="1" cat-id="10,16" type="featured" orderby="title" order="asc"] Displays all featured products from categories id 10 and 16, order by title ascending. The slider will use settings width id 1.
Settings
Obvious sections are not documented.
Pro Settings
These settings are for pro users only.
Custom image field name
Use this field if you want to use your own image type. Important! Custom image field name must return the image id. This feature is compatible with Advanced Custom fields plugin.
Custom excerpt field name
Use this field if you want to use your own excerpt text type. This feature is compatible with Advanced Custom fields plugin.
General Settings
These settings can also be made in the free version.
Slider settings name
Name your settings with a good description.
Image size
Specifies which image to be used and displayed in the slider. For large sliders, the value “Full” is recommended. Default value is “Shop Single”.
Time before change of slide (min 2000ms, max 10000ms)
Default value is 6000ms.
Speed to change slide (min 300ms, max 10000ms)
Default value is 1000ms.
Show product name in slider
Default value is Yes.
Show price in slider
Default value is Yes.
Show “Read more” button in slider
Default value is Yes.
Show excerpt text in slider
Default value is Yes.
Allow HTML in excerpt text
Default value is No.
Full window-height slider (overrides Slider container style height)
Default value is No.
Image size
Default value is Shop Single.
The width of the slider text relative to the image in %
Default value is 50%.
Use slide image as a background-image
Default value is No. Tip! Set Slide style -> Slide text -> Background-color: transparent to remove background-color behind text.
Url – Use the same url on all product “Read more” buttons (leave blank for no)
This field may be useful when you want to create a product carousel to sell a single product but with several different slides. Default value is blank.
Show thumbnails from start
Default value is Yes.
Max number of thumbs to show at the same time (restricted by slider size)
Default value is 10.
Show navigation arrows
Default value is Yes.
Show button to show/hide thumbnails
Default value is Yes.
Show navigation dots
Default value is Yes.
Translations
Default value is blank.
Embedded fonts
Use field to embed custom fonts. Example: <link href=”https://fonts.googleapis.com/css?family=Kaushan+Script” rel=”stylesheet” />
Embedded CSS-style
Use field to embed custom CSS. Example: .ellibot_woocommerce_slider_container{opacity:0.5 !important;}
Styles
These settings can also be made in the free version
Colors
https://www.w3schools.com/cssref/css_colors.asp
Width
https://www.w3schools.com/cssref/pr_dim_width.asp
Height
https://www.w3schools.com/cssref/pr_dim_height.asp
Border-size (width)
https://www.w3schools.com/cssref/pr_border-width.asp
Background-size
https://www.w3schools.com/cssref/css3_pr_background-size.asp
Background-position
https://www.w3schools.com/cssref/pr_background-position.asp
Font-family
https://www.w3schools.com/cssref/pr_font_font-family.asp
Font-size
https://www.w3schools.com/cssref/pr_font_font-size.asp
Margin
https://www.w3schools.com/css/css_margin.asp