Skip Navigation
Buy Now
Home » Course lessons » Building a Custom WooCommerce Shop Page

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.

The default WooCommerce Shop page is a standard design that doesn’t allow for much customization. If you want to display your products in a unique way or display different product types in relevant ways, you can’t do it with the default layout.

Toolset allows you to customize the styling and appearance of your Shop pages, create multiple Shop pages to display according to different criteria, or build completely unique Shop pages from scratch.

Here are some ideas to get you started:

Display products based on custom criteria with conditional archives

Create unique Shop pages to display products based on custom criteria with conditional archives

Add custom search options to filter by custom fields and taxonomy

Add custom search options to filter by custom fields and taxonomy

Create Shop pages to shop by entire outfits using post relationships

Display your products in a grid, list, collage, masonry, or fully custom layout

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.

Before you get started, make sure you have the Toolset WooCommerce Blocks plugin active.

  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.

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, masonry, list, or table (great for comparisons).

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.

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.

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.

Assign archives to specific Taxonomy Terms

Assigning an archive to specific taxonomy terms

You can also assign your archive to specific product-related taxonomy terms.

First, you need to select the main taxonomy to whose term(s) you want to assign the archive to. For example, you could select “Product Categories” taxonomy.

Then, click the Select specific terms link that appears next to selected taxonomy’s name. Use the search field that appears to select any number of taxonomy terms.

Use 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.

Control the built-in WooCommerce pagination and sorting

WooCommerce provides its own custom pagination controls and sorting filter on product listing pages. Both of these features are disabled by default but you can turn them on if needed.

When editing a WordPress Archive assigned to a product-related archive, expand the WooCommerce section in the right sidebar and toggle the needed option.

How to style your custom Shop page

Toolset blocks allow you to design and style everything inside the block editor.

Different Toolset blocks will have different styling options. The most common styling options are:

  • Typography – change the appearance of blocks that output text
  • Style Settings – change colors, margins, paddings and borders, drop shadows and more.
  • Advanced – block allignment, hide element, and more.

Besides styling the blocks themselves, there are two Toolset blocks that help you design your Views:

  • Toolset Container – group multiple blocks and apply styling to them: add a background, margins, paddings, and more.
  • Toolset Grid – display elements side-by-side in any type of columns: adjust column width, number of columns, and more.

As the Shop page is an archive page for your products, see the lesson about styling archives to learn more.

Dario
Updated
May 18, 2021
Send feedback to our documentation team