How to configure a slider

To create a new slider, go to the tab Product Slider Carousel that you can find in the plugin dashboard and click on the Add New Product Slider Carousel button.

Add a new product slider

Let’s analyze how you can customize your sliders.

Product slider options

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

  • Product Category: choose the categories to show/hide:
  • all categories: this applies to all the categories;
  • select your category: this allows selecting the categories to show in the slider from the option Choose Product Category;
  • exclude categories from the slider: this allows selecting the categories to hide by adding them to the option
  • 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: this applies to all the brands;
  • select your brand: this allows selecting the brands to show in the slider from the option Choose Product Brand.
  • 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.

How to set product slider content

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

  • Slider Template: you can assign one of the configured layouts of YITH -> 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 “Add to cart”: hide/show the “Add to cart” button for each product in the slider.
      • Hide price: hide/show the price of each product in the slider.
      • Hide On Sale product: hide/show discounted products.
      • Hide Out of stock product: hide/show products that are out of stock.
      • Images for row: number of products showed simultaneously.
      • Order by: sorting the display of the products (name, price, publication date, or random).
      • 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 shown 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.

How to add a slider with the premium version plugin

Each created slider can be added in any part of your site, like a WordPress page or inside the code of the theme, with the related shortcode that you can find in Product Slider Carousel.

How to add a slider through the shortcode

 

 

General settings

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

Product slider general settings

  • Enable Responsive: activate/deactivate the responsive behavior of the plugin.
  • Items in Standard Desktop: number of products shown in a browser window between 767 px and 991 px. This option works correctly only if the responsive mode is activated.
  • Items in Tablet: number of products shown in a browser window between 479 px and 766 px. This option works correctly only if the responsive mode is activated.
  • Items in Mobile: number of products shown 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 number of products to show.
  • Enable Rtl support: activate/deactivate the Rtl support for the slider, in this way products will show from right to left.
  • Enable mousewheel event: by enabling this option, the user can use the middle button of the mouse to scroll the slider.

Layout settings

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

Product slider layout 1

Product slider layout 1

Layout 1

Slider Layout 1 on frontend

Layout 2

Slider Layout 2 on frontend

Layout 3

Slider Layout 3 on frontend

Widget

The YITH Woocommerce Product Slider Carousel widget lets you add one of the created sliders of the Product slider carousel custom 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.

How to add product slider widget to the sidebar

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 carousel Gutenbergblock