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.
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.
You can use the Toolset & WooCommerce training site to follow the tutorial, which is free for use.
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:
Create a new (blank) archive for products.
In the WordPress admin:
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.
The Create new WordPress Archive cell screen opens.
Your shop page displays your products in a two-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-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.|
In this tutorial, you learned how you can customize your Shop page using Toolset plugins. Remember:
Visit the WooCommerce category in Toolset showcase to see different custom designs that Toolset customers have have created.
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.