In this lesson you will learn how to design a custom WooCommerce Shop page. You'll start with a blank design and create the layout and content that you need.
A custom WooCommerce Shop page can include anything that you want. It can be a simple “grid” (like many WooCommerce themes offer), and it can be any other kind of layout that you choose. Choose between a grid, table (great for comparisons), list and even sliders and masonry designs.
Once you’re happy with the layout, add fields. You can display all the standard WooCommerce fields, like the product price, add to cart, etc. Then, add custom fields and taxonomy to your shop-page design.
Before you get started, make sure you have the Toolset WooCommerce Blocks plugin active.
Switching from WooCommerce to Toolset Templates for Archives
First, switch your site to use the Toolset template for product archives.
- Go to Toolset → WooCommerce Blocks.
- In the Product Archive Template File section select the WooCommerce Blocks plugin default product archive template option.
How to Design Your Shop Page
The WooCommerce “shop” page is your site’s archive for the Product custom type. We’ll need to edit or create this archive.
- Go to Toolset → Dashboard and click the Create Archive button in the Products row.
- Choose the layout of the archive (shop page).
- Insert blocks into the WordPress Archive Loop area to design a single item of your archive.
- Use the Toolset Heading and Single Field blocks with dynamic sources to display your product title, excerpt, custom fields, and taxonomies.
- Choose blocks from the Toolset WooCommerce section to display WooCommerce elements such as the Add to Cart Button, Product Price, Product Rating, and more. You will notice that all Toolset WooCommerce blocks allow you to select a custom or native output type.
And that’s it! Of course, you can upgrade your custom Shop Page with many other Toolset features. For example, you might add a custom product search, display items using a different layout instead of a grid, or apply the same archive to other product categories and archives.
How to Choose a Custom Layout for the WooCommerce Shop Page
By default, products on your Shop page are displayed in a grid. You can easily use other layouts like collage and masonry.
Use the following steps to change the layout for the WooCommerce Shop Page:
- Use the Block Navigation button to select the WordPress Archive → WordPress Archive Loop block.
- In the right sidebar, expand the Loop Style section and choose a different layout for your Shop page.
How to Turn the WooCommerce Shop Page Into a Custom Search
To help users easily find products of interest you can add a custom search. It can include filters for product fields and categories but also custom fields, taxonomies, and more.
Check out the detailed lesson to learn all about creating custom searches with Toolset.
Using the Same Archive for Other Product Archives
You can use the same archive you designed for your Shop Page on your product categories, taxonomies, and other product archive.
- Use the Block Navigation button to select the WordPress Archive block.
- In the right sidebar, expand the Loop selection section and check the archives you need.
Related topics
- Enabling Additional WooCommerce Fields in Product Forms
- Adding Toolset Blocks to the WooCommerce My Account Page
- Selecting WooCommerce Blocks Output Type
- Creating a Custom List of WooCommerce Products for a Taxonomy
- Creating a Page with a Custom WooCommerce Product Search
- Creating a Custom List of Related WooCommerce Products
- Creating Custom Templates for WooCommerce Products
- Adding a Custom Taxonomy to WooCommerce Products
- Creating a Custom WooCommerce Product Slider
- Adding Custom Fields to WooComerce products
- Creating Front-end Forms for Adding WooCommerce Products
- Charge users for registering premium accounts
- Charge users for submitting content
- Custom WooCommerce Roles and Admin Capabilities
Send feedback to our documentation team