The WooCommerce plugin allows you to add images for your product categories. With Toolset plugins, you can display these images in a slider along with the category names as clickable links.

Expected outcome of this tutorial
Expected outcome of this tutorial

Step 1: Creating a page for the product categories slider

Switching to the Layouts Editor
Switching to the Layouts Editor
On your training site:

  1. Add a new page and give it a name (e.g., Page with a slider)
  2. Click Save draft.
  3. 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
Adding a cell for the product categories slider

  1. Draw a 10-column cell.
  2. On the screen that opens, locate the View cell and insert it.

Step 2: Creating a View for sliders

Creating a View for sliders
Creating a View for sliders
In the Create new View cell dialog:

  1. Make sure the Create new View radio box is selected.
  2. For View purpose: choose Display the results as a slider.
  3. Click Create.

Step 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
Setting up product categories as your View’s base

  1. Give your View a name (e.g., “Product categories—slider”)
  2. In the Content Selection section, choose Taxonomy and then Product categories.

Setting number of items displayed per page
Setting number of items displayed per page

  1. Scroll down to the Pagination and Sliders Settings section
  2. Make sure that the Pagination enabled with automatic AJAX transition option is selected.
  3. Set number of items displayed per page to 4.

Step 4: Designing the output

Designing the slider output using the Loop Wizard
Designing the slider output using the Loop Wizard

  1. Scroll down to the Loop Output Editor section.
  2. Press Loop Wizard.
  3. Choose Unformatted.
  4. Click Next.

Displaying the product category as a link
Displaying the product category as a link

  1. Click Add a field and choose Taxonomy with a link.
  2. 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
In a Content Template you determine what will be displayed in a single slide entry

  1. Scroll down to the Templates for this View section.
  2. Wrap the in h2 HTML tags.

Setting up the product image
Setting up the product image
Now, you can add the category image to the slider.

  1. Position your cursor before the taxonomy title shortcode.
  2. Press the Fields and Views button and select Product Category Image.
  3. 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.
  4. Click Insert shortcode.

You should see the following shortcodes:

Shortcodes making a single product entry
[wpv-woo-productcategory-images size='shop_catalog' output='img_tag']
<h2>[wpv-taxonomy-link]</h2>

  1. Click Save and Close this view and return to the layout.
  2. 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.

Step 5: Styling the slider

Adding HTML to your product categories 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.

  1. Click on the Views: Product categories slider cell
  2. Scroll down to the Templates for this View section.
  3. Wrap your shortcodes into a div with the slider-entry class, as shown in the screenshot.
  4. Open the CSS editor below and add the following CSS.

Product categories slider thus far
Product categories slider thus far
Preview your slider again. Now, it should like the screenshot on the left.

Step 6: Adding navigation controls

To add navigation controls:

  1. Open your View cell for editing.
  2. Scroll down to the Filter section of your View.
  3. Click the Pagination control button.
  4. In the pop-up that opens, locate the Pagination Controls section.
  5. Select the Navigation controls using dots checkbox. Insert the pagination controls.
  6. 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.
  7. Open the CSS editor and copy and paste the following CSS
  8. Save your changes and preview your Layout.

Your sliders with categories should look like this:

Expected outcome of this tutorial
Expected outcome of this tutorial

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.