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.
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:
- 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 Table. The 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 :
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.
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]
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.
Once you have set the shortcodes defaults, you can scroll further to configure more advanced layout and feature settings.
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:
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.
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]
You can even be creative and use the AND / OR conditions here.
- [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.
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.
HBook is a WordPress extension that will allow you to easily create an online booking solution on your website.
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.
2. WooCommerce Tabs Pro: Extra Tabs for Product Page
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 ...
3. WooCommerce Multilevel Referral Plugin
This WooCommerce plugin allows your affiliates to earn credit points if their subscribers buy your products from your existing online store.
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.
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.
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.
- 9 WordPress themes to create a website selling organic products
- 6 CDN services to improve the speed of your WordPress blog
- How to create your affiliate program with WP Affiliate PlatForm
- How to manually update your WordPress plugins
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.
But, in the meantime, tell us about your Comments and suggestions in the dedicated section.