Creating a Custom WooCommerce Product Slider

In this lesson, you will learn how to create a slider with featured products. Each of your slides will include some of your standard WooCommerce fields and also your custom taxonomy.

Steps for creating product sliders

Create a View for displaying products

1. Edit or create a page and insert the View block.
2. In the View-creation wizard, enable Pagination and in the Select View Loop Style section, choose the Unformatted (last) option.
3. In the last step of the wizard, select Products as your post type.

Display product fields and apply custom styling

1. Insert a Container block and set its background to Image.
2. Make the image dynamic and link to the post’s featured image.
3. Use Toolset Heading, Single Field, and WooCommerce blocks to add other dynamic fields to your slider, such as the post title, product categories or your custom taxonomy.

Make your View slide automatically

1. Use the Block Navigation button to select the main View block.
2. In the right sidebar, expand the Pagination section.
3. Select the Pagination enabled with automatic AJAX transition option.
4. In the Items Per Page dropdown, select 1. You can also tweak other options like the transition effect and duration.

Add filters to your slider

By deafult, your slider will display all products from your site. You can limit the products by setting up filters.

1. Use the Block Navigation button to select the main View block.
2. In the right-hand sidebar, expand the Content Selection section.
3. Add one or more filters of your choice.

Hint: If you want to select only featured products (the ones you mark using stars in your WooCommerce backend list), you would need to use the Product Visibility filter set to featured. Please note that « Visibility » is a hidden taxonomy and you would need to enable. To do this, go to the Toolset → Settings page, click the Front-end Content tab and under the Hidden custom fields section click the Select custom fields button.

Change the pagination to dots

1. Click to select the View’s Pagination block.
2. In the right sidebar, change pagination controls from numbers to dots.
3. Additionally, you can expand the Advanced section and center align the pagination controls.