Skip Navigation
Acheter
Accueil » Course lessons » Creating a Custom List of Related WooCommerce Products

Creating a Custom List of Related WooCommerce Products

Related products is a list of products with something in common with the currently displayed product. With Toolset, you can create a custom list of related products.

Custom list of related products
Custom list of related products

You can fully control the appearance of your output and the set of fields to display.

You can even add your own filter to select related products. For example, instead of connecting the products by product categories you might want to use a custom taxonomy or a custom field.

To create a custom list of related products, you need to create a View inside your single-product template.

  1. Go to Toolset →  Dashboard and in the Products row, click to open your template for editing.
  2. Insert the View block.
  3. In the wizard, when selecting the content to display, select related products, upsells, or cross-sells.
Selecting Related products, UpSells, or Cross-Sells when creating a custom list of Products

That’s it, all you need to do now is add blocks to the View, with product fields of your choice.

With Toolset, you can also set up a custom taxonomy for WooCommerce products.

Use the following steps to display a list of products that are related by such custom taxonomies:

  1. Go to Toolset →  Dashboard and in the Products row, click to open your template for editing.
  2. Insert the View block.
  3. In the wizard, when selecting the content to display, select Products → All products.
  4. Once the View is created, click to select the main View block.
  5. In the right sidebar, expand the Content Selection section.
  6. Click Add a filter and in the dialog that appears, select to filter by your custom taxonomy (i.e. « Departments ») and set it to the page where this View is shown option.
Setting up a filter to connect products by custom taxonomy

Toolset comes with a big collection of blocks to display dynamic sources (custom fields, WordPress fields, WooCommerce 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.

How to style your custom list of products

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.

To learn more about this topic see the lesson about styling Views.

Main Toolset Block Used in this Lesson

View

Créez des listes de publication personnalisées

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