{"id":1688487,"date":"2020-09-15T12:47:48","date_gmt":"2020-09-15T12:47:48","guid":{"rendered":"https:\/\/toolset.com\/?post_type=course-lesson&p=1688487"},"modified":"2020-11-23T06:15:48","modified_gmt":"2020-11-23T06:15:48","slug":"creating-a-custom-list-of-woocommerce-products-for-a-taxonomy","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/de\/course-lesson\/creating-a-custom-list-of-woocommerce-products-for-a-taxonomy\/","title":{"rendered":"Creating a Custom List of WooCommerce Products for a Taxonomy"},"content":{"rendered":"
\n
\"Custom<\/a>
Custom list of product belonging to a specific taxonomy term<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n

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<\/a>.<\/p><\/div>\n\n\n\n

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.<\/p>\n\n\n\n

Steps for creating a list of products for a taxonomy<\/h2>\n\n\n\n

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

    We will improve the styling later.<\/p>\n\n\n

    \n
    \"\"<\/a>
    View block displaying product and its block hierarchy<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n
    <\/div>\n\n\n\n

    Add taxonomy filters to your View<\/strong><\/h3>\n\n\n\n

    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.<\/p>\n\n\n

    \n
    \"Filtering<\/a>
    Filtering a View by a specific taxonomy<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n
    <\/div>\n\n\n\n
    1. Use the Block Navigation<\/strong> button to select the main View <\/strong>block.<\/li>
    2. In the right-hand sidebar, expand the Content Selection<\/strong> section.<\/li>
    3. Add a filter and select your taxonomy in the Taxonomy section.<\/li>
    4. Check one of your taxonomy terms, i.e. “Women”.<\/li><\/ol>\n\n\n\n

      Limit the number of products to show<\/h3>\n\n\n\n

      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.<\/p>\n\n\n\n

      1. Use the Block Navigation<\/strong> button to select the main View <\/strong>block.<\/li>
      2. In the right-hand sidebar expand the Limit and offset<\/strong> section. Set the number of items to display to 3.<\/li><\/ol>\n\n\n\n

        Adjust the styling<\/h3>\n\n\n\n
        1. Select the outer Container<\/strong> block of your View Loop.