How to List WooCommerce Brands in a Filterable Product Table Layout
Our colleagues at WooCommerce.com have kindly donated their most popular official extensions so that we can test them with our WooCommerce Product Table plugin. This will pave the way for more integrations between the plugins, so that you can use product table layouts to meet even more diverse requirements. The first plugin we’ve tested is the WooCommerce Brands plugin, which works beautifully with WooCommerce Product Table.
I’m going to tell you why you might want these two plugins, how they work together, and how to set them up.
What is WooCommerce Brands?
WooCommerce Brands is an official extension which adds a product brands taxonomy to any WooCommerce store. It’s quite a simple plugin and simply provides an easy way to store and display the brand of each product. It also has a few extra features such as an A-Z layout listing all your brands, and built-in widgets to display and filter by brand.
What is WooCommerce Product Table?
WooCommerce Product Table is our flagship plugin here at Barn2 Media. It works by listing your WooCommerce products in an interactive table. It comes with extra features such as customizable columns, filters, search box, product variations support and more.
Product table views are a popular way to increase conversion rates. They can boost your sales because it makes the buying process quicker and easier. Customer can quickly view all your products on a single page. They can see all the information they need (including brand, if you’re using the WooCommerce Brands plugin). This lets them add to the cart without having to click elsewhere.
One of WooCommerce Product Table’s biggest selling points is its ability to show extra data directly on the product listing page. It supports all the standard WooCommerce product data such as name, price, add to cart, description, short description, attributes, variations – the list goes on. However, the WooCommerce core doesn’t come with a brands field. That’s why you need the WooCommerce Brands plugin to display product brands in a table.
How to Use WooCommerce Brands with WooCommerce Product Table
- First, set up your overall website, install WooCommerce and add some products.
- Second, install WooCommerce Brands.
- Use the plugin documentation to create brands and assign them to your products. This is really easy – just look for the ‘Brands’ section on the right of the Add/Edit Product screen.
- Next, install WooCommerce Product Table.
- Go to the Product Table plugin settings page (WooCommerce > Settings > Products > Product tables) and choose how you want your product tables to work.
- In the ‘Columns’ section of the settings page, choose which columns you want to appear in the product table. You can see the available columns here – choose whichever you want, such as product image, name, price, add to cart, etc. If you want to include a ‘Brands’ column, make sure you add
tax:product_brandsto the list of columns. For example, adding
image,name,tax:product_brand,price,add-to-cartwill display columns for image, name, product brand, price and add to cart button.
- In the ‘Filters’ section of the settings page, list the filter dropdowns you want to include above the product table. To include a brands filter, make sure you add
tax:product_brandsto the list of filters. For example, adding
categories,tags,tax:product_brandswill add filter dropdowns for categories, tags and product brands.
- Add a [product_table] shortcode onto the page. By default, this will list all your products but there are options to show specific products if you prefer.
- Finally, view your page!
When you view your product table with WooCommerce brands, you will see a list of products your chosen settings. There will be a ‘Brands’ filter dropdown above the table. You’ll also see a ‘Brands’ column in the table. Clicking on a brand in the WooCommerce table will filter the list of products by that brand.
How to list products with a specific brand
You can also list products based on their brand. To do this, add the terms option to your product table shortcode. For example, the following shortcode will list all Nike products:
Replace ‘Nike’ with the slug for the brand you wish to display.
The WooCommerce Brands plugin comes with a Brands layered nav filter widget. This lets customers filter by brand. By default, the widget won’t work if you add a product table to a standard WordPress page using the method I described above.
This may not matter to you because you can add a Brands filter dropdown above the product table, as we saw in the previous section. However, if you do want a brand filter widget in the left or right sidebar, then you’ll need to add product tables to your category archive template. This will automatically show the product table layout on your main shop pages and category pages. Once you’ve done that, add the Brands filter widget via Appearance > Widgets (or the Customizer) and they will work with the product table.
If a customer clicks on a link to a brand, they’ll be taken to a standard product grid that doesn’t use a product table layout. For example, they might click on the Brand Thumbnails widget that comes with the WooCommerce Brands plugin. To use the product table view for the brand archive pages, you will need to modify the archive template in your theme (see above).
Where to get the plugins
As you can see, WooCommerce Brands is the ideal way to list brands in an online store. WooCommerce Product Table provides a fantastic way to display brands, either within a product list view or as a brands filter. You can get the plugins by clicking on the links below: