How to Use the Product Categories List WooCommerce Block

by | Dec 8, 2021 | Etcetera | 0 comments

Whilst you’re working an online store, it’s essential to verify consumers can temporarily to find what they’re searching for. A method to try this is by way of the use of the Product Classes Listing WooCommerce block to show explicit classes to guests. This block even permits you to make a choice whether or not pieces are introduced in a dropdown listing or an expanded view.

On this publish, we’ll give an explanation for tips on how to use the Product Classes Listing WooCommerce block in WordPress, together with tips on how to upload it in your posts and pages and customise its quite a lot of settings and choices. Then we’ll give you some guidelines and highest practices and resolution a couple of incessantly requested questions.

Let’s get began!

Upload the Product Classes Listing WooCommerce Block to Your Submit or Web page

The Product Classes Listing block can necessarily be used to interchange the previous Product Class widget. It permits you to function a listing of things from a particular class in your website online, and keep an eye on how they’re displayed.

Word that this block is handiest to be had if you have the WooCommerce plugin put in and activated. As soon as it’s, you’ll even have get right of entry to to a plethora of alternative at hand WooCommerce blocks, such because the All Products and Featured Product blocks.

Including the Product Classes Listing WooCommerce block in your on-line retailer is modest. To get began, you’ll navigate to the publish or web page the place you wish to have so as to add the listing.

Subsequent, click on at the Upload Block button (the plus signal icon) inside the Block Editor (1), after which seek for “product classes listing” (2). It will have to be the primary possibility that looks (3):

Adding the Product Categories List block in WordPress.

Alternately, you’ll insert this block by way of typing “/product classes listing” at once inside of any Paragraph block. Whilst you press your Input key, the block will mechanically be added in your web page or publish.

Product Classes Listing WooCommerce Block Settings and Choices

If you insert this block, it is going to display you a listing of the current product categories on your retailer. When you don’t have any, you’ll create them by way of navigating to Merchandise > Classes on your WordPress admin dashboard:

See also  What is a Firewall? Understanding What They Are and Which Type is Right For You

The Product categories screen of WooCommerce.

This may be the place you’ll delete any classes you now not want, or edit current ones if you wish to alter their main points.

After you insert the Product Classes Listing block, a toolbar will seem alongside the highest:

The alignment icon on the Product Categories block toolbar.

The primary icon permits you to grow to be this part right into a Group or Columns block. The second one lets you alternate the alignment. Through default, the block can be left-aligned, however you’ll regulate it to be targeted or at the proper.

When you click on at the 3 vertical dots, you’ll be introduced with a handful of extra settings. This contains the method to add the block to your Reusable Blocks, insert every other block prior to or after this one, and copy the block.

Block Settings

To the precise of the display screen, you’ll discover a host of extra choices:

The Product Category List settings.

Let’s check out what every of those settings includes:

  1. Show taste. That is the place you’ll come to a decision whether or not you wish to have your listing to look as an expanded Listing or as a Dropdown. Your only option is dependent upon how a lot room you wish to have the listing to absorb at the web page.
  2. Display product depend. As you’ll see within the instance above, this block presentations the choice of merchandise incorporated beneath every class in parentheses. When you don’t wish to display that quantity, you’ll toggle off this surroundings.
  3. Display class photographs. Through default, the class photographs are disabled. On the other hand, you’ll flip this surroundings off if you wish to make the listing extra visually interesting.
  4. Display hierarchy. You’ll be able to use this surroundings to turn the sub-categories in your merchandise. It’s became on by way of default, however might not be the most suitable choice if in case you have numerous classes (because the block can begin to glance very crowded).
  5. Display empty classes. This surroundings permits you to show classes although you don’t have any merchandise in them. It’s highest to verify this selection is disabled.
See also  Download a FREE Product Category Page Template for Divi’s Essential Oils Layout Pack

After all, there may be an Complex phase on the finish of the settings panel. You’ll be able to use this to add your own custom CSS, for those who’re comfy making handbook changes to the block’s taste.

Guidelines and Easiest Practices for The usage of the Product Classes Listing WooCommerce Block Successfully

As you’ll see, including and customizing the settings for the Product Classes Listing WooCommerce block is lovely simple. On the other hand, there are some highest practices you could wish to believe to make sure that you employ it successfully.

First, when configuring the settings, it’s essential to believe each design and serve as. You need to ensure that the types listing is visual and out there in your consumers with out being distracting.

For instance, if in case you have a big retailer with many alternative classes, it might not be the most productive concept to make use of the Listing show possibility, particularly if you wish to save room at the web page. As an alternative, believe the use of the Dropdown taste, which will save area and glance slightly cleaner:

The Product Categories list displayed as a dropdown.

When you’ve got a smaller listing and wish to show the entire pieces immediately, we recommend appearing the product class photographs as neatly:

A list of product categories with images.

It will assist in making the listing extra attractive and aesthetically fulfilling. It might probably additionally assist guests simply to find what they’re searching for.

If you wish to replace or upload photographs in your product classes, you’ll achieve this by way of going to Merchandise > Classes on your dashboard, after which clicking at the Edit link beneath the class’s title:

The option to upload product category thumbnail.

You’ll be able to to find the method to add a thumbnail symbol on the backside of the display screen. Whilst you’re performed, take into account to click on on Replace.

Ceaselessly Requested Questions In regards to the Product Classes Listing WooCommerce Block

As you’ll see, the Product Classes Listing WooCommerce block is modest to make use of. On the other hand, to verify we duvet all of the key knowledge, let’s evaluate some incessantly requested questions on it.

See also  How to Use the Active Product Filters WooCommerce Block

How Do I Upload the Merchandise Classes Listing Block?

You’ll be able to upload this block by way of navigating to the publish or web page the place you wish to have to incorporate it, after which clicking at the Upload block button. Subsequent, merely seek for “product classes listing” and make a selection the primary possibility that looks. However, you’ll kind “/product classes block” into the editor, and hit Input.

The place Can I Use the Product Classes Listing WooCommerce Block?

You’ll be able to upload this block anyplace in your WordPress website online that’s Block Editor-enabled. This contains your pages and posts. You’ll be able to additionally upload it in your sidebars, footer, and other widget areas.


The Product Classes Listing WooCommerce block is helping you improve the Consumer Enjoy (UX) in your consumers. It permits you to resolve which classes of goods to turn, in addition to how they’re displayed.

As we mentioned on this article, there are a handful of settings and choices you’ll use to customise the class listing. This contains appearing it as a completely expanded listing whole with thumbnail photographs, or as a dropdown menu. You’ll be able to apply it to any publish or web page of your on-line retailer, in addition to anyplace you’ll insert WordPress widgets (akin to your sidebar or footer spaces).

Do you might have any questions on the use of the Product Classes Listing WooCommerce block? Tell us within the feedback phase under!

Featured Symbol by way of Banpot Chaiyathep/shutterstock

The publish How to Use the Product Categories List WooCommerce Block seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more


Submit a Comment