Sauter la navigation
Acheter
Accueil » Cours » Custom WooCommerce Sites » Creating Custom Lists of WooCommerce Products » Creating a Custom List of WooCommerce Products for a Taxonomy

Creating a Custom List of WooCommerce Products for a Taxonomy

Your WooCommerce homepage might include different lists of products. One of them can be a list of a few recent products that belong to a specific taxonomy term. Toolset allows you to create such a list in a completely visual way.

Custom list of product belonging to a specific taxonomy term
Custom list of product belonging to a specific taxonomy term

You will learn how to use the View block to display three recent products for women. « Women » is one of the terms of a custom taxonomy named « Department ». To learn how to categorize products in such way visit the lesson about adding a custom taxonomy to WooCommerce Products.

In our example, we will use the product image as a dynamic background and display the product title with a fancy overlay effect. Feel free to create a design of your choice.

Steps for creating a list of products for a taxonomy

Create a View for displaying products

  1. Edit or create a page and insert the View block.
  2. In the View-creation wizard, stick to the default Grid in the Select View Loop Style section.
  3. In the last step of the wizard, select Products as your post type.
  4. In the View Loop, insert a Container block and set its background to Image.
  5. Make the image dynamic and link to the post’s featured image.
  6. Inside your Container block, insert one more Container block with a solid background set to black.
  7. Insert the Toolset Heading block inside your inner Container and set it to the dynamic title as a link.

We will improve the styling later.

View block displaying product and its block hierarchy

Add taxonomy filters to your View

By default, your View will display all products from your site. You can limit the products to products from a specific taxonomy by setting up filters.

Filtering a View by a specific taxonomy
Filtering a View by a specific taxonomy
  1. Use the Block Navigation button to select the main View block.
  2. In the right-hand sidebar, expand the Content Selection section.
  3. Add a filter and select your taxonomy in the Taxonomy section.
  4. Check one of your taxonomy terms, i.e. « Women ».

Limit the number of products to show

By default, your View will display all products meeting your filter criteria. Let’s see how to limit the number of products to the recent three.

  1. Use the Block Navigation button to select the main View block.
  2. In the right-hand sidebar expand the Limit and offset section. Set the number of items to display to 3.

Adjust the styling

  1. Select the outer Container block of your View Loop.
    • In the Additional Settings section, set the left and right paddings to zero.
    • In the Inner Content section, set up the Min-Height setting to 30px and choose the Vertically Align Bottom option.
  2. Select the inner Container block of your View Loop.
    • Expand the Background section, click on the Custom Color, and in the pop-up that appears use the bottom slider to reduce the opacity.

Add WooCommerce fields to your View

Use blocks from the Toolset WooCommerce section to insert WooCommerce fields into your Views such as the Product Price, Product Rating, and Add to Cart Button.

Toolset WooCommerce Blocks section
Toolset WooCommerce Blocks section

Passer à l'étape suivante

Main Toolset Block Used in this Lesson

View

Créez des listes de publication personnalisées

Dario
Updated
novembre 23, 2020
Envoyez vos commentaires à notre équipe de documentation