9.1 Creating a page for the product categories slider Switching to the Layouts Editor
Add a new page and give it a name (e.g., Page with a slider) Click Save draft. Click the Content Layout Editor button to begin designing the body of your page body with Layouts. Adding a cell for the product categories slider Draw a 10-column cell. On the screen that opens, locate the View cell and insert it. 9.2 Creating a View for sliders Creating a View for sliders
In the Create new View cell dialog:
Make sure the Create new View radio box is selected. For View purpose: choose Display the results as a slider. Click Create. 9.3 Setting up a View for product categories
The Edit View screen opens. Here, you set up your View that will display your product categories as a slider.
Setting up product categories as your View’s base Give your View a name (e.g., “ Product categories—slider”) In the Content Selection section, choose Taxonomy and then Product categories. Setting number of items displayed per page Scroll down to the Pagination and Sliders Settings section Make sure that the Pagination enabled with automatic AJAX transition option is selected. Set number of items displayed per page to 4. 9.4 Designing the output Designing the slider output using the Loop Wizard Scroll down to the Loop Output Editor section. Press Loop Wizard. Choose Unformatted. Click Next. Displaying the product category as a link Click Add a field and choose Taxonomy with a link. Check the following option: Use a Content Template to group the fields in this loop. In a Content Template you determine what will be displayed in a single slide entry Scroll down to the Templates for this View section. Wrap the in h2 HTML tags. Setting up the product image
Now, you can add the category image to the slider.
Position your cursor before the taxonomy title shortcode. Press the Fields and Views button and select Product Category Image. When a dialog pop-up opens: Select WooCommerce shop catalog image size as the image size. As your image output format, select Output image tag only. Insert the shortcode. Click Insert shortcode.
You should see the following shortcodes:
Click Save and Close this view and return to the layout. Preview your layout.
The slider will rotate, displaying a few category images with clickable titles in each transition.
However, it still needs some styling so that it looks like a slider. 9.5 Styling the slider Adding HTML to your product categories slider
To place the titles on the corresponding images and make them look presentable, you can add a few lines of CSS.
Click on the Views: Product categories slider cell Scroll down to the Templates for this View section. Wrap your shortcodes into a div with the slider-entry class, as shown in the screenshot. Open the CSS editor below and add the following CSS. Product categories slider thus far
Preview your slider again. Now, it should like the screenshot on the left.
9.6 Adding navigation controls
To add navigation controls:
Open your View cell for editing. Scroll down to the Filter section of your View. Click the Pagination control button. In the pop-up that opens, locate the Pagination Controls section. Select the Navigation controls using dots checkbox. Insert the pagination controls. Wrap the [wpv-pager-nav-links …] shortcode in the div tags with the transition-control class (refer to the picture) to easily add custom styling. Open the CSS editor and copy and paste the following CSS Save your changes and preview your Layout.
Your sliders with categories should look like this:
Expected outcome of this tutorial 9.7 Summary
In this tutorial, you’ve learned how to design a
slider with product categories. Remember To create slider for WooCommerce products or product categories, use a View cell. Your View for sliders needs to have pagination and AJAX transitions enabled. You can display any product or product category fields in your slider. Questions? Ideas? Suggestions?
If you have any questions on how to build a product slider, add your comments and we’ll get back to you. Toolset clients can also create tickets in our technical support forum, where are support team works 6 days / week, 19 hours / day.