Skip to Main Content

How to create WooCommerce product grids on WordPress

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Have you ever wanted to create a sortable and filterable grid that contains all or part of your WooCommerce products?

If you operate a WooCommerce store, you know that WooCommerce already comes with a dedicated archive page that helps you showcase individual products.How to create wordpress woocommerce products grid 1

But, depending on what you're selling, this isn't always the most effective way to showcase your products.

In some cases, displaying WooCommerce products in a grid is more efficient.

And if that sounds like the situation you're in, you're fine because I'm going to show you how to create a grid of your WooCommerce products.

But if you have never installed WordPress, discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

What can you do with a grid of WooCommerce products?

While not a complete list, here are a few situations where a product grid can give visitors a better experience than your regular archive page:

Discover How to install an online store on WordPress with the WooCommerce plugin

  • Wholesale stores - if you wholesale a lot of products, giving your customers an easy way to sort or filter a grid may be more user-friendly than having them browse individual product pages.
  • Product catalogs - similarly, if you just want to display an easy-to-browse product catalog, an AJAX sort / filter grid will save customers time (and page reloads).
  • Order Forms - if you want to create an order form based on WooCommerce products, a grid provides a very easy way to do it. It is also a good approach to display a restaurant menu and accept online orders.

How to create a grid of WooCommerce products

We will use the plugin WooCommerce Product TableThe plugin is singularly focused on the creation of product grid. And thanks to its interface parameters and shortcode, you can customize just about every aspect of how your grid works.

Also read our guide on: How to increase the time spent on your WordPress blog

Here are some of the most useful features, in my opinion:

  • Easily add or delete columns You can even add columns containing custom fields or custom taxonomies, and WooCommerce Product Table fully integrates with Advanced Custom Fields.
  • 4 filter widgets included. These allow you to provide readers with a seamless experience by offering filtering options in your sidebar.
  • Product variation / attribute support. Choose from 3 different ways to display product variations in your grid.
  • Multi-selection boxes. It facilitates the creation of order forms by allowing customers to select multiple products before adding them to their shopping cart.
  • Instant Search, Sort and Filter . Customers can manipulate your grid data without reloading the page.
  • Add to the basket . Similarly, customers can add products to their baskets without reloading the page.
  • Lazy Load support. Useful for improving the performance of large grids ( although this affects the ability to offer instant sorting or filtering )

Here is how to use this plugin ...

1 Step: Configure the Default Grid Feature

After installing and activating the plugin, the first thing to do is to configure the default functionality for your grids. Check out our step by step guide on how to install a WordPress plugin.

This essentially defines the default behavior of the shortcode. But you can also change this behavior for individual grids by adding parameters to the shortcode.

To access the plugin settings, go to WooCommerce → Settings. Then click on the tab Products and choose the option Product tables :

add product columns woocommerce wordpress.png

Configuring the appearance of your grids

First of all, you can choose the style of your grid in the section Design Table. You can do it with:

  • Default - as you can imagine, this option uses the plugin's default settings without any further intervention on your part. He will try to use the current theme of your blog as much as possible.
  • custom : when selected, it expands a list of styling options that lets you customize font colors and sizes without the need for Custom CSS.

customize the product table css.png

Once you have set up your style, you must configure the shortcode defaults. Again, you can edit them for individual shortcodes through the parameters of the latter. But setting up will save you time and make things a little easier later.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

configuring the product table settings.png

Most of the settings are self-explanatory, and you can see that WooCommerce Product Table does a good job of providing tooltips or documentation links to help you learn more about each setting.

Discover How to add a WooCommerce store on Facebook

Once you have set the shortcodes defaults, you can scroll further to configure more advanced layout and feature settings.

advanced configuration of product tables.png

Again, the plugin does a great job; the one to provide additional information for any of the parameters which might be a bit difficult to understand. 

How to control the stock of your WooCommerce online store ? Discover it by clicking on this link.

One thing to pay attention to is the limitation of the progressive charge. If you decide to use progressive loading to speed up your online store, you are going to limit the search and sort functionality of the plugin.

See also our selection of 12 best WooCommerce plugins to enhance your online store

Once the configuration is complete, make sure to save your changes.

2 Step: Add WooCommerce Grid Widgets (Optional)

As I mentioned, WooCommerce Product Table also offers four widgets to help you add filter options to your sidebar ( as you can for classic WooCommerce shops ).

To access it, go to Appearance → Widgets as usual and slide on the desired widgets:

widget table woocommerce.png

Step 3: Add a shortcode where you want to display your product grid

You are at the finish line! Now all you need to do is add the shortcode [product_table] wherever you want your grid to appear.

See also How to find the link to the WordPress login page

By default, the shortcode will work according to the settings you chose in step 1. But if you want to customize the functionality for specific shortcodes, you can do so using the many shortcode parameters availables.

For example, to only use the grid on products of a specific category, you could add a parameter like this:

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

[product_table category="hats"]

You can even be creative and use the AND / OR conditions here.

For example:

  • [product_table category= "hats + in star« ] only displays products that belong to the time to the hats categories et in stars.
  • Product_table category= "hats . At star "] displays products that are or,  hats ou the star category.

This attention to small details is what makes the grid of WooCommerce products so great. 

See also our 6 WordPress plugins to breathe new life into your articles

And that's about all there is to it with a product grid on WooCommerce!

WooCommerce Product Table plugin pricing

WooCommerce Product Table is exclusively a premium plugin. While there are a few free options listed in the WordPress.org directory, I haven't found any that are as flexible or well documented, so I think WooCommerce Product Table is worth the price, which is ...

For 1 website - 75 $

For 5 sites website - 135 $

For 20 websites - 275 $

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. HBook

HBook is a WordPress extension that will allow you to easily create an online booking solution on your website.

Hbook

It is perfectly suited for anyone who has a business in the hotel sector (hotels, holiday apartments, camping, etc.).

Discover also our 5 WordPress plugins to share the content of your blog

Thanks to the WordPress HBook plugin, you will be able to add availability calendars, price lists and reservation forms to your website, just in seconds.

Download | Demo | Web hosting 

2. WooCommerce Tabs Pro: Extra Tabs for Product Page

This WordPress plugin offers you unlimited additional tabs on the product page.Extra tabs-product-page-wordpress-plugin-to-page-builder

Its main features are: the possibility of change the title of the tabs, a editor to edit custom content, the ppossibility of pinning tabs or not, the choice of icons for tabs, easy removal tabs, the pcustomization of the position of tabs on the public interface, et more ...

Download | Demo | Web hosting

This WooCommerce plugin allows your affiliates to earn credit points if their subscribers buy your products from your existing online store.

Woocommerce multilevel referral plugin

Its features include: configuration of a personalized credit and redemption limit, complete administration reports for registered users, management of global or product-specific parameters, support of shortcodes, and much more.

See also How to add a drop-down contact form to your global header

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

It is a multi-level WooCommerce affiliate system, something that is outside of the typical affiliate transactional system.

Download | Demo | Web hosting

Other recommended resources

We also invite you to consult the resources below to go further in the grip and control of your website and blog.

Conclusion

Here ! That's it for this tutorial. I hope you'll be able to create WooCommerce product grids on WordPress. Feel free to share the tip with your friends on your social networks.

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

But, in the meantime, tell us about your Comments and suggestions in the dedicated section.

...

This article features 2 comments

  1. Hello,

    Thank you very much for this tutorial, very clear and precise, but can you update the prices for the "WooComerce Product Table" plugin because the developer has modified its prices which are much higher than advertised on your article.
    Price of the plugin:
    Personal = 1 Site: 89 € / year or 269 € update for life
    Business = 5 Sites: 159 € / year or 479 € update for life
    Agency = 20 Sites: 319 € / year or 959 € update for life

    Good week

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
11 shares
Share8
tweet1
Save2