In this tutorial, you will learn how to create a slider with WooCommerce product categories using Toolset plugins.
To follow the tutorial, you will need to get a training site. It’s free and takes a minute to set up. Our training sites run on discover-wp.com.
Creating a slider with product categories using Toolset
Step 1: Creating a View
In the WordPress admin of your training site
- Go to Toolset-> Dashboard
- Locate the Views column
- Click Create View in the Products row
A general purpose View has been created. Feel free to change its name.
Now, we need to turn this View into a View that displayes results in a slider.
- Click Screen Opions
- In the first dropdown select Display the results as a slider
Note that the Pagination and Sliders Settings, Custom Search Settings and Filter Editor options have been checked. In your Edit View screen you will see additional sections, which will help you to create a slider.
- Scroll down your Edit View screen to the Content selection section, select Taxonomy and Product Categories
Step 2: Setting the number of items per slide cycle
We want to display four categories in one slide cycle.
- Scroll down to the “Pagination and Sliders Settings” section.
- Choose “Pagination enabled with automatic AJAX transition“
- Set “Number of items per page” to 4.
Step 3: Designing a single slide entry
- Scroll down to the “Loop Output Editor“ section.
- Press Loop Wizard.
- Next, choose Unformatted.
- Click Next
- Click Add a field and choose Taxonomy with a link.
- Check the “Use a Content Template to group the fields in this loop” option.
- Scroll down to the “Templates for this View” section. Here, you determine what will be displayed in a single slide entry.
- Position your cursor befor the taxonomy title shortcode. Press the “Fields and Views” button and select “Product Category Image”. A dialog pop-up opens. Select “WordPress thumbnail size” as the image size. As your image output format select “Output image tag only”. Insert the shortcode.
- Save your View.
Step 4: Adding a slider to a page
Let us see how our slider looks so far.
- Add a new page and give it a name. Our slider is called “Product categories in a slider”
- Insert your Views slider into it.
- Publish the page. Your output should look something like the figure shown below.
The slider rotates, displaying a few category images with clickable titles in each transition. However, it still needs some styling so that it looks more realistic.
Step 5: Styling the slider
We want to place the titles on the corresponding images and make them look presentable. To achieve this, we will add a few lines of CSS.
Open your View with the slider again and scroll down to the Templates for this View section.
Wrap your shortcodes into a div with the slider-entry class:
Open the CSS editor below and add the following CSS.
Visit your page with the slider again. Now, it should like the image below.
Step 6: Adding navigation controls
Our slider rotates automatically. Every 5 s a new blog of categories is displayed. Let us add navigation controls to allow a visitor to manually cycle through the slides.
To add navigation controls, move to the “Filter” section of your View. Click the “Pagination control” button.
In the pop-up that opens, locate the “Pagination Controls” section and select the “Navigation controls using dots” checkbox. Insert the pagination controls.
In your Filter section, open the CSS editor and paste the following code to it:
Your Filter section should look like this:
Save your View and visit the page with your slider again. Now you should be able to manually cycle through the slides using the clickable dots.
Beyond the basics
In this tutorial, you’ve learned how to design a slider with product categories. You can use the same technique to build your custom sliders, for example sliders with products belonging to a specific category or displaying only featured products. The posibilities are endless.
To create your own custom WooCommerce sites, you need to buy the complete Toolset package. With one account, you can create as many client sites as you need.
Other parts in this series
You’ve been following one part of our tutorial on customizing WooCommerce sites.
There’s a lot more in the other parts of the tutorial. Together, the different tutorial parts will teach you how to build fully-custom, advanced, WooCommerce sites.
A fully-styled reference site
Planning to build custom WooCommerce sites yourself? Check out our Toolset WooCommerce reference site. It’s a fully featured, fully designed reference site, that you can use as the basis of your client projects.