Skip Navigation

Building a Custom WooCommerce Shop Page

Your WooCommerce Shop page is the product archive. Sometimes you need to show the Shop page in a unique manner. Toolset allows you to design custom layouts of your archive with the fields of your choice.

Custom Shop Page
Custom Shop Page

Make sure you have the Toolset WooCommerce Blocks plugin active. Check Chapter 1 to see the complete list of Toolset plugins for your WooCommerce site.

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 Product Archive

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

Product Archive Design Tips

  • By default, your product archive uses the grid layout. Use the Block Navigation button to select the WordPress ArchiveWordPress Archive Loop block. In the right sidebar, expand the Loop Style section to choose a different layout of your archive.
  • To use the same archive for your product categories, taxonomies, and other product archives, 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.
  • To add filters to your archive, use the Block Navigation button to select the WordPress Archive block and toggle the Search option in the General section.