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.
Use the Toolset & WooCommerce training site to follow the tutorial. It’s free.
The training site includes WooCommerce, Toolset plugins and example products.
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.
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. In your training site:
- Go to Toolset -> Dashboard.
- Locate the row for Products.
- 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. 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.
- Click on archive cell to open it for editing.
- Scroll down to the Loop Output section.
- Click Loop Wizard.
- Change the number of columns to 2.
- Click Next.
- 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.
- Scroll down to the Content Template.
- Wrap product title in h2 HTML tags.
- Click Save and Close this view and return to the layout.
- Preview your layout.
Your Shop page displays your products in a 2 column grid. Each grid cell includes the product fields you have chosen.
Your Shop page displays the products correctly but it lacks styling. We will tweak it a bit using additional HTML 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.
|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.|
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.