How To Use Product By Categories List WooCommerce Block In 2023

In this comprehensive guide, we will take you through the process of using the Product By Categories List WooCommerce block in your WordPress e-commerce site. From adding this block to your posts and pages to customizing its various settings and options, we’ve got you covered. We will also provide you with valuable tips, best practices, and answers to frequently asked questions to ensure you make the most of this feature.

ipad showing off Dynamic Shopping

Set up your site for free with our WordPress Theme

No Risk get started building your WooCommerce store for free.

To ensuring that your customers can effortlessly find the products they desire is paramount. One excellent way to enhance this experience is by harnessing the capabilities of the Product Categories List WooCommerce block. This powerful tool allows you to display specific product categories to your site’s visitors, with the flexibility to choose between a dropdown list or an expanded view.

1. Introduction: Enhancing User Experience with the Product By Categories List Block

adding product by categories block to a website

In today’s competitive e-commerce landscape, the ease of navigation and product discovery is critical to satisfying customers and driving sales. The Product Categories List WooCommerce block is a versatile tool that enables you to strategically present specific product categories, enhancing the user experience. Whether you prefer a compact dropdown or an extensive list, this block empowers you to customize category displays to suit your e-commerce objectives.

Let’s delve into the world of the Product Categories List block and unlock its potential for your online store.

2. How to Add the Product By Categories List WooCommerce Block to Your Post or Page

The Product Categories List block is a robust replacement for the traditional Product Category widget. It allows you to feature a list of items from a chosen category on your website and provides extensive control over their presentation. It’s important to note that this block is available when the WooCommerce plugin is installed and activated, granting you access to various WooCommerce blocks, including All Products and Featured Product blocks.

Incorporating the Product By Categories List WooCommerce block into your online store is a straightforward process:

  1. Navigate to the post or page where you intend to add the list.
  2. Click on the “Add Block” button (the plus sign icon) within the Block Editor.
  3. Search for “product categories list” and select the first option that appears.

Alternatively, you can add this block by typing “/product categories list” directly within any Paragraph block and pressing Enter. The block will be automatically added to your page or post.

3. Mastering Product Categories List Block Settings and Options

Once the Product By Categories List block is added, it provides you with a list of your store’s current product categories. If you don’t have any categories yet, you can create them by navigating to “Products” > “Categories” in your WordPress admin dashboard. Here, you can edit or delete categories as needed.

After inserting the Product Categories List block, a toolbar will appear along the top, offering several customization options:

  • Transform Block Type: The first icon allows you to convert this element into a Group or Columns block.
  • Alignment: The second icon enables you to adjust the alignment. The block is left-aligned by default, but you can switch it to center or right alignment.

If you click on the three vertical dots, you’ll access additional settings, including the option to add the block to your Reusable Blocks, insert another block before or after, and duplicate the block.

3.1 Block Settings

On the right side of the screen, you’ll find a range of additional settings, each of which influences the appearance and functionality of the Product By Categories List block:

  • Display Style: This setting allows you to choose between displaying your list as an expanded List or as a Dropdown. The ideal choice depends on how much space you want the list to occupy on the page.
  • Show Product Count: The block, by default, displays the number of products within each category in parentheses. If you prefer not to show this count, you can toggle this setting off.
  • Show Category Images: Category images are disabled by default, but you can enable this setting to make your list more visually appealing and engaging.
  • Show Hierarchy: This setting controls whether sub-categories are displayed for your products. While it’s enabled by default, consider turning it off if you have a large number of categories to prevent the block from appearing overcrowded.
  • Show Empty Categories: This option allows you to display categories even if they don’t contain any products. It’s advisable to disable this setting for a cleaner display.

Towards the end of the settings panel, you’ll find an “Advanced” section where you can add custom CSS to further modify the block’s style, provided you’re comfortable with manual adjustments.

4. Tips and Best Practices for Using the Product By Categories List WooCommerce Block Effectively

While configuring the settings of the Product Categories List WooCommerce block is straightforward, optimizing its use requires careful consideration of design and function. Here are some best practices to ensure you’re utilizing this block effectively:

  • Design Considerations: The choice between List and Dropdown display styles depends on your store’s size and design preferences. For larger stores with numerous categories, the Dropdown style can save space and maintain a clean look.
  • Category Images: To make your list more engaging and visually appealing, consider displaying product category images. You can upload or edit these images by navigating to “Products” > “Categories” in your WordPress dashboard.

Set up your site for free with are WordPress Theme

No Risk to get started building your Woocommerce store for free.

5. Frequently Asked Questions About the Product ByCategories List WooCommerce Block

To provide a comprehensive understanding of the Product Categories List WooCommerce block, we’ve answered some frequently asked questions:

5.1 How Do I Add the Products Categories List Block?

To add the Products Categories List block, follow these steps:

  1. Navigate to the post or page where you wish to include it.
  2. Click on the “Add block” button.
  3. Search for “product categories list” and select the first option.

Alternatively, type “/product categories block” into the editor and press Enter.

Learn: What is Full Site Editing in WordPress? also: Setting up Woocommerce with full site editing for Beginners in 2023

5.2 Where Can I Use the Product Categories List WooCommerce Block?

You can incorporate the Product Categories List WooCommerce block into any part of your WordPress site that’s Block Editor-enabled. This includes pages and posts, as well as widget areas like sidebars and footers.

6. Conclusion: Optimizing Product Category Display for Seamless Shopping

The Product Categories List WooCommerce block is a valuable asset for enhancing the user experience on your e-commerce site. It empowers you to determine which product categories to showcase and how they should be displayed.

In summary, this comprehensive guide has walked you through the features and functionality of the Product Categories List block. Whether you choose to display an expanded list or a space-saving dropdown menu, you have the flexibility to improve user navigation and product discovery across your online store.

If you have any questions or require further assistance in utilizing the Product Categories List WooCommerce block or any other aspect of your online store, please don’t hesitate to contact us at Otterwp. Your satisfaction and success are our top priorities.


Leave a Reply

Your email address will not be published. Required fields are marked *