Download Toolset plugins and follow the online tutorial

Don’t have Toolset plugins yet? Our 30-days refunds let you try Toolset for 30 days and see how you like it, risk free.

Log in to your Toolset account and go to Downloads. Get the following Toolset components:

  • Toolset Types
  • Toolset Views
  • Toolset WooCommerce Views

Upload these plugins to your site and activate.

To help you get started, we recommend that you also launch our WooCommerce training site (it’s separate from your Toolset account). There, you will be able to customize a demo WooCommerce site, which has everything installed and ready for training purposes.

Follow the online training and do the same on your real site. Of course, you should apply your own design and use your own custom fields in the site that you’re building.

Customizing the WooCoomerce Shop page with Toolset

The WooCommerce ‘shop’ page is a WordPress ‘archive’ page for Products. To customize this listing we will create a new WordPress Archive template, using the Views plugin.

Our new WordPress Archive will include the product fields we will choose. We will also have full control of the overall design.

<strong>Before</strong> – WooCommerce Shop page displayed by the WooCommerce default template and the Twenty Fifteen theme.
Before – WooCommerce Shop page displayed by the WooCommerce default template and the Twenty Fifteen theme.
<strong>After</strong> – The same page after redesigning it – the products are displayed in a list form and, in addition, different fields were displayed
After – The same page after redesigning it – the products are displayed in a list form and, in addition, different fields were displayed

Step 1: Creating a new WordPress Archive

In the WordPress admin of your training site

  1. Go to Toolset -> Dashboard
  2. Locate the Archive column.
  3. Click Create archive in the Products row.
Creating a custom archive for WooCommerce Products from Toolset Dashboard
Creating a custom archive for WooCommerce Products from Toolset Dashboard

A new WordPress Archive has beed created.

By default it will be used for the Shop page. If you also want to use this design for Product Categories, Product Tags check the relevant options in the Taxonomy Archives section.

By default the new archive will be used for the Shop page only
By default the new archive will be used for the Shop page only

Step 2: Designing the layout and adding basic fields

In your WordPress Archive edit screen scroll down to the Loop Output section. Here, we will determine how our products will display (as a list, grid, table, etc.) and what fields will appear for each of the products.

  1. Click the first button to activate the Loop Wizard.
  2. In the “How do you want the View to display?” pop-up, choose Table.
    The Loop Output section determines how your products will display
    The Loop Output section determines how your products will display
  3. On the next screen, we will choose the fields we want in the output. Use the “Add a field” button to include the following fields:
    • Product image
    • Post title with a link
    • Add to card button – product listing pages

    Once these fields are inserted, make sure the Use a Content Template to group the fields in this View loop option is checked. This makes editing the design for each of the products in the list easier.

    Press Finish.

    Choosing fields to be included in the output
    Choosing fields to be included in the output
  4. Scroll down to the Content Template. You will see your fields inserted as shortcodes. Wrap the product title ([wpv-post-link]) in h2 HTML tags.

    Now your Template should look like this:

    The Content Template that groups all the fields making a single Product row
    The Content Template that groups all the fields making a single Product row
  5. Save your changes.

Step 3: Viewing the new Shop page

To see your results on the front-end scroll up to the Loop section and press the blue arrow icon next to the Products.

A quick way to preview your Shop page
A quick way to preview your Shop page

Your Shop page should look like this:

 Your Shop Page after completing the steps so far
Your Shop Page after completing the steps so far

Step 4: Adding more fields

Now we will add more fields to our output.

Go back to editing your WordPress Archive again. Scroll down to the Templates for this View section.

We will add the fields to our second column. Position your cursor after your product title.

Adding the product categories

Use the Fields and Views button to include product categories. Locate the Taxonomy section and choose Product categories. Insert the shortcode with its default values.

Adding product attributes

Use the Fields and Views button agian. This time locate the Product attributes filed and insert the shortcode.

Save your changes.

You Constent Template should look like this:

Template after adding new fields
Template after adding new fields

Step 5: Checking the results

View your Shop page again. Your output should look like this:

Your Shop page after completing the tutorial
Your Shop page after completing the tutorial

Beyond the basics

In this tutorial, we’ve learned how to design the site’s ‘shop’ page, with the products catalog. We can use the same technique to create different custom designs for other archives, including product categories, products tags, and custom taxonomy pages.

The site that we’ve created features a simple design and uses the default WordPress theme. You can use the Views plugin with any theme and create your own unique and beautiful designs.


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.

YYou can use the same technique to create different archives for other archives, including product categories - see Live example
You can use the same technique to create different archives for other archives, including product categories – see Live example