Skip Navigation

Building a Custom WooCommerce Shop Page

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.

Custom Shop Page
Custom Shop Page

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.

  1. Go to Toolset Dashboard and click the Create Archive button in the Products row.
  2. Choose the layout of the archive (shop page).
  3. Insert blocks into the WordPress Archive Loop area to design a single item of your archive.
  4. Use the Toolset Heading and Single Field blocks with dynamic sources to display your product title, excerpt, custom fields, and taxonomies.
  5. 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.

Shop page displaying products using a custom collage layout

Use the following steps to change the layout for the WooCommerce Shop Page:

  1. Use the Block Navigation button to select the WordPress Archive → WordPress Archive Loop block.
  2. In the right sidebar, expand the Loop Style section and choose a different layout for your Shop page.

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.

Custom Search for WooCommerce Products created with Toolset
Custom Search for WooCommerce Products created with Toolset

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.

  1. Use the Block Navigation button to select the WordPress Archive block.
  2. In the right sidebar, expand the Loop selection section and check the archives you need.
Using the same archive for your product categories, taxonomies, and other product archives
Using the same archive for your product categories, taxonomies, and other product archives

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:

  1. Insert or select a block.
  2. In the right sidebar, expand the Dynamic Sources section.
  3. Toggle on the option for any of the supported fields in that block.
  4. 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.

January 26, 2021