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

We will customize the Shop page template using Toolset plugins and no PHP coding. Our new Shop template will display products in a 2 column grid with a different set of product fields. Compare the Before and After screenshots.

Before (default)
Before (default)
After
After

Use the Toolset & WooCommerce training site to follow the tutorial. It’s free.

The training site includes WooCommerce, Toolset plugins and example products.

Our training site uses the Toolset Starter theme. Feel free to use the same technique to create a Shop page for your own WordPress site, which uses any other theme.

Default Shop template

The Shop page (and other product archives) of our training site use a template layout for product listings. This template layout has been created using the Toolset Layouts plugin. When you activate the Toolset Starter theme it allows you to auto-generate default layouts for WooCommerce products, so half of your work is already done.

Toolset hintNote that you can also build such a layout for archive from scratch, for any WordPress site, which uses any other theme. To save time, you can also import this and other default layouts into your site and then further customize them to match the theme of your design.

Please check the Creating layout for archives tutorial for details.

How to customize your product archive

Now we will customize the layout to display a 2 column grid with a different set of product fields.

Opening the default layout template for Shop page
Opening the default layout template for Shop page
In your training site:

  1. Go to Toolset -> Dashboard.
  2. Locate the row for Products.
  3. In the Archive column, click Layout for Products Listings.

The Layout for Products Listings opens for editing. The bottom part indicates that this layout is used for both Product (Shop page) and Category archives. The Archive Loop row includes an archive cell, which displays your custom archive.

Template for Products Listing
Template for Products Listing
Now it displays your products in a 4 column grid. We will customize it to display a 2 column grid with a slightly different set of fields.

  1. Click on archive cell to open it for editing.

Setting up the output as a Bootstrap grid
Setting up the output as a Bootstrap grid

  1. Scroll down to the Loop Output section.
  2. Click Loop Wizard.
  3. Change the number of columns to 2.
  4. Click Next.

List of fields to insert
List of fields to insert

  1. Insert the following fields:
    • Post title with a link
    • Post featured image (edit it to select the shop_catalog size)
    • Post excerpt
    • Product attributes
    • Product price

Refer to the screenshot.

Product fields displayed in a single grid cell
Product fields displayed in a single grid cell

  1. Scroll down to the Content Template.
  2. Wrap 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 2 column grid.
Your Shop page displays your products in a 2 column grid.
Your Shop page displays your products in a 2 column grid. Each grid cell includes the product fields you have chosen.

Styling

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

Our shop page before styling
Our shop page before styling
Shop page after adding styling
Shop page after adding styling

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.

The table summarizes the changes we did.

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.
9 We wrapped the price shortcode in div tags with the product-button class to make the price field stand out. The product-button class comes from the Toolset Starter theme.

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.

Questions? Ideas? Suggestions?

If you have any questions on how to customize the WooCommerce Shop page, 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.