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
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
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.
- 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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
- Assigning Templates to Posts Conditionally
- How to Display WooCommerce Orders on the Front-end
- Using the WooCommerce Subscriptions plugin with Toolset
- Using 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