Ellibot WooCommerce Slider Documentation

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

Padding

https://www.w3schools.com/css/css_padding.asp