Gutenberg

The plugin is ready to use with the new Gutenberg editor. When you add a new post or page, you will be able to find our YITH shortcodes and widgets. With a simple click they will be added to your page.

product slider gutenberg

How to configure a slider

To create a new slider, go to “Product Slider” and click on the “Add New Product Slider Carousel” button.

Add new slider

Let’s analyze all the options you can use to customize the slider.

product_slider_settings

In the section Product Slider, you can find the following options:

  • Product Category: choose the categories to show/hide:
  • all categories
  • a selection of categories
  • exclude categories by adding them to the 
  • Product Brand: this option is available only if you have installed and activated the premium version of YITH WooCommerce Brands Add-ons and allows you to show the slider by brands as follows:
  •  all brands
  • a selection of your brands
  • Products to show: choose which product type to show:
    • all products of the shop
    • on sale
    • best sellers
    • free
    • last added
    • featured
    • top rated
    • selection of products by name
    • selection of products by tag

slider_content_settings

In the section Content Settings, you can find the following options:

  • Slider Template: you can assign one of the configured layouts of YITH Plugins -> Product Slider Carousel or select WooCommerce Template to assign the color scheme of the theme to the slider.
  • Show title: hide/show the slider title.
  • Hide price: hide/show the price of each product in the slider.
  • Hide “Add to cart”: hide/show the “Add to cart” button for each product in the slider.
  • Images for row: number of products showed simultaneously.
  • Order by: sorting the display of the products (name, price or publication date) for the discounted, free, and featured product type.
  • Order type: sorting the display of the products (name, price or publication date) as ascendant or descendant

 

Slider settings

In the section Slider settings, you can find the following options:

  • Loop slider: activate/deactivate the infinite loop of the products showed in the slider. This means that after the last product, the slider will keep scrolling showing again the first element and so on.
  • Pagination Speed: scrolling speed of the products (in milliseconds).
  • AutoPlay: number of milliseconds after those the slider will start scrolling the product of the shop.
  • Stop on Hover: if the option is activated, the scrolling of the slider will be interrupted on the mouse hover of the users.
  • Show Navigation: hide/show the navigation arrows of the slider.
  • Show Dots Navigation: hide/show the dots navigation in the lower part of the slider.
  • Animation IN: entering animation for all the products of the slider (available only if the slider shows one product at a time).
  • Animation OUT: exiting animation for all the products of the slider (available only if the slider shows one product at a time).
  • Animation Speed: the speed of the animation effects.

General settings

In order to edit the general settings of the plugin, go to YITH Plugins -> Product Slider Carousel.

general settings carousel

  • Enable Responsive: activate/deactivate the responsive behaviour of the plugin.
  • Items in Standard Desktop: amount of products displayed in a browser window between 767 px and 991 px. This option works correctly only if the responsive mode is activated.
  • Items in Tablet: amount of products displayed in a browser window between 479 px and 766 px. This option works correctly only if the responsive mode is activated.
  • Items in Mobile: amount of products displayed in a browser window between 478 px and 0 px. This option works correctly only if the responsive mode is activated.
  • Product to show: maximum amount of products to show.
  • Enable Rtl support: activate/deactivate the Rtl support for the slider, in this way products will be displayed from right to left.
  • Enable mousewheel event: enabling this option the customer can use the middle button of the mouse to scroll slider.

Layout settings

You can customize the color of the 3 available layouts directly from the plugin settings dashboard.

Layout

Layout 1

Layout 1

Layout 2

Layout 2

Layout 3

Layout 3

Widget

The YITH Woocommerce Product Slider Carousel widget lets you add one of the created sliders of the Product slider carouselcustom post type in a sidebar.

To add the widget, click on Appearance -> Widgets and drag the widget in the sidebar you prefer.
Now, configure your widget.

Widget