WooCommerce Tutorial

07Building a custom WooCommerce Shop Page

This tutorial teaches you how to customize the WooCommerce Shop Page to create a custom layout with fields of your choice.

This guide is the seventh step of our WooCommerce tutorial: How to build an e-commerce website in 12 steps.

Sometimes you need to show the WooCommerce Shop page in a unique manner.

Buy Toolset

Custom layout for your wooCommerce shop page

Custom layout

You may want to display your products in a custom layout. For example, instead of the classic product grid, you could use a list that has sortable columns.

Custom fields

You may want to include custom fields in your product catalog.

Custom Fields in Shop page
Product filters for your shop page

Product filters

You may want to add a search to your shop so that your users can filter the product list.

Additional sections

You may need to include some additional sections on your shop page.

Additional sections
Special offer for members

Extra offer for members

You may want to show products differently to people who are members of your site as opposed to visitors.

In all these cases, Toolset allows you to design custom templates for your WooCommerce products catalog without having to write PHP. In the following section, we explain the exact steps to follow to accomplish this design task.

Creating a Custom Shop Template: Steps to Follow

We will customize the shop page template using Toolset plugins and without PHP coding. Our new shop template will display products in a two-column grid with a different set of product fields. Compare the following Before and After screenshots.

Shop page - before
Before (default)
Shop page - after
After

You can use the Toolset & WooCommerce training site to follow the tutorial, which is free for use.

7.1 Switch from WooCommerce to Toolset templates

The appearance of your shop page is determined by the WooCommerce template and the theme you use.

If you want to create a custom template, first you must disable the WooCommerce default template and switch to Toolset templates.

In the WordPress admin:

  1. Go to Toolset -> WooCommerce Views.
    If you cannot see this option, ensure that you have the Toolset WooCommerce Views plugin installed and activated on your site.
  2. In the Product Archive Template File section, select “WooCommerce Views plugin default product archive template.”
Switching from WooCommerce to Toolset templates
Switching from WooCommerce to Toolset templates

7.2: Create new template layout for products

Create a new (blank) archive for products.

In the WordPress admin:

  1. Go to Toolset -> Dashboard.
  2. Scroll down to the Custom post types created by the theme and other plugins section.
  3. Locate the row for Products.
  4. In the Archive column, click Create archive.
Switching from WooCommerce to Toolset templates
Switching from WooCommerce to Toolset templates

7.3 Designing your shop layout

An empty layout opens and you can add cells to it.

We will start by including the Archive cell. We can use this template for any product archives–the shop page, product categories, product tags, product colors, etc.

  1. Add an Archive Cell to your layout.
Creating new template layout for products
Creating new template layout for products

The Create new WordPress Archive cell screen opens.

  1. Scroll down to the Loop Output Editor section.
  2. Click Loop Wizard.
  3. Change the number of columns to 2.
  4. Click Next.
  5. Insert the following fields:
    • Post title with a link
    • Post featured image (edit it by selecting the shop_catalog size)
    • Post excerpt
    • Product attributes
    • Product price
Inserting WooCommerce fields
Inserting WooCommerce fields
  1. Scroll down to the Content Template.
  2. Wrap the product title in h2 HTML tags.
  3. Click Save and Close this view and return to the layout.
  4. Preview your layout.

Your shop page displays your products in a two-column grid. Each grid cell includes the product fields you have chosen.

shop page

7.4 Styling

Your shop page displays the products correctly, but it lacks styling. We will tweak it a bit using additional HTML and CSS classes.

Product entry with new HTML tags and CSS classes
Product entry with new HTML tags and CSS classes
  1. Open your archive cell for editing again.
  2. Scroll down to the Loop Output section.
  3. Add additional HTML and CSS classes to style your layout.
Line Change done
1-2, 4-5, 10-11 We added Bootstrap classes (row, col-sm-5, col-sm-7) to display product information in two columns. The left column is slightly narrower.

7.5 Summary

In this tutorial, you learned how you can customize your Shop page using Toolset plugins. Remember:

  • Use the WordPress Archive cell in your layout for product archives.
  • You can include any of the WooCommerce product fields in your custom archive.

Showcase

Visit the WooCommerce category in Toolset showcase to see different custom designs that Toolset customers have have created.

Make it easy for shoppers to quickly find what they need using a powerful custom search.

Step 8

Build the perfect website today

Toolset allows you to add some of the most important features for your website in less time than ever. That’s because with Toolset you do not need to write PHP – saving you hours of needless coding.

You no longer need to manage dozens of complex plugins for your website. You can use the full Toolset package to build, run and maintain it all.

Whether you are a WordPress newbie or an experienced web developer, we have the plan for you based on your needs and budget.