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.
Display dynamic sources using WordPress core and popular block plugins
Toolset comes with a big collection of blocks to display dynamic sources (custom fields, WordPress fields, and taxonomies). However, you can also display Dynamic Sources using WordPress core blocks and popular block plugins.
Use the following steps to display a Dynamic Source in any supported block:
- Insert or select a block.
- In the right sidebar, expand the Dynamic Sources section.
- Toggle on the option for any of the supported fields in that block.
- Use the dropdowns that appear to select the dynamic source you want this block to display for that field.
Display Dynamic Sources inside all text blocks
Toolset allows you to display Dynamic Sources, like custom fields, inside any text blocks like headings, buttons, and more. This includes WordPress core blocks, Toolset blocks, and popular block plugins.
To display any Dynamic Source inline, insert or select a block with a text input and look for the Inline Fields button. Dropdown menus will appear, allowing you to select a Dynamic Source.
For more information, check out the lesson about displaying Inline Fields.
Related topics
- Using the WooCommerce Subscriptions plugin with Toolset
- 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 WooCommerce 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