Video

Creating a slider with product categories using Toolset

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

Expected outcome of this tutorial
Expected outcome of this tutorial

Step 1: Creating a View

In the WordPress admin of your training site

  1. Go to Toolset-> Dashboard
  2. Locate the Views column
  3. Click Create View in the Products row
Creating a View from Toolset Dashboard
Creating a View from Toolset Dashboard

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.

  1. Click Screen Opions
  2. In the first dropdown select Display the results as a slider
Turning a regular View into a Slider View
Turning a regular View into a Slider View

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.

  1. Scroll down your Edit View screen to the Content selection section, select Taxonomy and Product Categories
    Selecting Taxonomy and Product Categories
    Selecting Taxonomy and Product Categories

Step 2: Setting the number of items per slide cycle

We want to display four categories in one slide cycle.

  1. Scroll down to the “Pagination and Sliders Settings” section.
  2. Choose “Pagination enabled with automatic AJAX transition“
  3. Set “Number of items per page” to 4.
Setting up options for sliders
Setting up options for sliders

Step 3: Designing a single slide entry

  1. Scroll down to the “Loop Output Editor“ section.
  2. Press Loop Wizard.
  3. Next, choose Unformatted.
  4. Click Next
  5. Click Add a field and choose Taxonomy with a link.
  6. Check the “Use a Content Template to group the fields in this loop” option.
Selecting fields to include in a single slide
Selecting fields to include in a single slide
  1. 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.
    • Setting up options for product category images
      Setting up options for product category images
  2. Save your View.

Step 4: Adding a slider to a page

Let us see how our slider looks so far.

  1. Add a new page and give it a name. Our slider is called “Product categories in a slider”
  2. Insert your Views slider into it.
  3. Publish the page. Your output should look something like the figure shown below.
Our slider after completing steps so far
Our slider after completing steps so far

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:

Content Template with shortcodes and the additional div
Content Template with shortcodes and the additional div

Open the CSS editor below and add the following CSS.

.slider-entry {
	/* make the entry container a reference point for positing elements it contains */
position: relative;

	/* we display 4 entries in one transition, make them 25% wide each */
	width: 25%;
  	float: left;
}

/* center the image within its container */
.slider-entry img {
	display: block;
	margin: auto; 
}

/* style the category link*/
.slider-entry a {

	/* put it at the bottom of its container and center it*/
   	position: absolute;
 	bottom: 5px;
 	left: 0;
 	right: 0;
  	text-align: center;

  	background: rgba(0,0,0,0.7);
  	padding: 5px;
  	color: #fbfbfb;
}
.slider-entry a:hover {
	text-decoration: underline;
}

Visit your page with the slider again. Now, it should like the image below.

Our slider after completing steps presented so far
Our slider after completing steps presented so far

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.

Adding navigation controls as clickable dots
Adding navigation controls as clickable dots

In your Filter section, open the CSS editor and paste the following code to it:

/* center the navigation controls horizontally */
.wpv_pagination_dots {
  text-align: center;
}

ul.wpv_pagination_dots li.wpv_pagination_dots_item,
.wpv_pagination_dots li a {
    display: inline-block;
    float: none;
}

.wpv_pagination_dots a {
  border: none;
}

</pre>
<p>

Your Filter section should look like this:

Filter section with the custom CSS
Filter section with the custom CSS

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.

Final outcome of the tutorial: a slider with navigation controls
Final outcome of the tutorial: a slider with navigation controls

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.


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.

Get inspired by fully designed WooCommerce with Toolset
Get inspired by fully designed WooCommerce with Toolset