If you’re using WooCommerce as your eCommerce tool to manage a digital store on WordPress, then you’ve made an excellent choice. With WooCommerce you get many options that allow you to scale your online business with ease. One amazing feature is the product grid for WooCommerce.
This capability transforms your shop page to display your products in a grid view from a list. By doing so, you improve user interaction and allow better shop exploration.
How? Let’s find out.
Note: In this article, we are going to explore the all-new WPMozo Product Grid for WooCommerce plugin. A free Gutenberg block plugin for WooCommerce to add product grids on Woo-powered eCommerce stores. It’s live now, check it out today.
What Is Product Grid in WooCommerce?
According to Merriam-Webster, a grid is a network of uniformly spaced horizontal and perpendicular lines as you can see in the following image:
Those horizontal and perpendicular lines make columns and rows, ultimately giving the structure a uniform design we call a grid. When we add products in those lines, or you can say in those columns and rows, we get our product grid. In WooCommerce the product grid view looks like the following:
This particular layout allows you to showcase your products effectively. Customers can learn more about them without feeling overwhelmed or needing to pay more attention as in the case of the list view. If we compare grid vs list view, you can easily understand why most eCommerce platforms, for example Etsy, prefer displaying products in grid layout by default.
Product list view on Amazon.
Product grid view on Etsy.
By looking at the above images of Amazon and Etsy’s shop pages in grid and list view, we can conclude why the latter is an effective choice. It allows the shop to display more products at the same time by keeping everything highly engaging. But that’s not all. With WooCommerce product listing in a grid layout, you can enjoy many other benefits.
Benefits of Adding Products in Grid
Better comparison: WooCommerce products in grid listing provide customers better user experience by allowing them to compare other products.
Hierarchy control: Web designers can easily emphasize essential products by making changes to the grid sizes and placements.
Effective filtering and sorting: Customers can easily explore their needed product by using the sorting feature.
No long scrolls: Infinite scrolls can overwhelm the user, and it is often not suggested due to SEO reasons. Therefore, with pagination, the WooCommerce product grid layout can overcome this situation.
With all these benefits, you can expect higher user sessions eventually leading to an increased number of sales. Now, all that is needed from your side is to apply the grid layout and display products in it. By following the steps mentioned in the below sections, you can do that easily.
How to Create Product Grids in a WooCommerce Website
By default, products in the grid view on a WooCommerce-powered website can be found on the shop page, category pages, and other product archives like the following:
If you need to create or list products in a grid layout on custom pages, you can directly use the Product Collection block by WooCommerce.
However, the default product grid block by WooCommerce has its limits.
You cannot choose products from categories, you cannot exclude specific products, and if you need to apply some advanced customization, for example, using custom text or percentage for sale label, you cannot do that. In many situations, you’ll find yourself missing out on something crucial if you explicitly depend on the native WooCommerce product grid block.
But, as you’re using WordPress, then there’s no limit and it’s true for showing the products in the grid for WordPress.
By using a WooCommerce product grid plugin that’s available for free, you can achieve the needed design. And the plugin I am going to talk about is WPMozo Product Grid for WooCommerce. If you’re asking, “What is the best product grid plugin for WooCommerce?” then, it’s what you’re looking for.
Using this new WooCommerce grid plugin, you can take your WooCommerce shop-building experience to a new level.
Why Use WPMozo Product Grid for WooCommerce
First thing first, this plugin is available for free. Hence, you don’t have to spend anything extra to list products in a grid layout.
Then, it allows you to create a product category grid. Yes, you can select products from different categories and show them in a grid layout. Not only category, but it also allows you to select products based on tags. And even create taxonomies related to better filter out the products.
Furthermore, while allowing you to add products in multiple columns, it also lets you define column and row spacing which is missing in the native WooCommerce product grid block. What’s even more interesting about this product grid plugin is that you can use multiple layouts. Yes, the WPMozo Product Grid for WooCommerce comes with three product grid layouts.
There are multiple features you get with this plugin, which you can use with just a few simple clicks.
Features in a Nutshell
- Plugin available for free
- Multiple product grid layouts: Default, Layout 1, and Layout 2
- Product grid columns up to 6
- Display products based on type: Default, Featured, Sale, Best Selling, and Top-rated
- Quick view option
- Pagination controls
- Ajax Pagination
- Product grid with masonry effect
- Order By and Order controls
- WooCommerce category block: It supports tags and categories (No separate block required.)
- Apply Taxonomies Relation
- Hide/Show Out of Stock Products
- Show/hide elements: Rating, Price, Add to Cart Button, and Sale badge
- Sale badge controls: Custom text, and Percentage layout
- Separate responsive settings
- Design customization controls
Take a moment and analyze, are these features not making this plugin one of the best product grid plugins for WooCommerce? Yes, they certainly do. If you like what it is offering, then let’s try it and create our own product grid for WooCommerce.
Steps to Create Product Grid for WooCommerce (Using a Free Plugin)
In order to create our WooCommerce custom product grid using Gutenberg block editor we need to follow the below steps one by one. Make sure you’re logged in to your WordPress website. 😅
Okay, enough being funny, let’s get to the business: creating a WooCommerce product grid.
Step 1 – Install the WooCommerce Grid Plugin by WPMozo
The plugin is available on the WordPress repository (WordPress.org) for free. You can download it from there as well. But if the site is already live, then from the WordPress Dashboard, go to Plugins → Add New Plugin → search for WPMozo Product Grid for WooCommerce → click Install Now for the following;
After it’s installed, activate it to use its product grid block for Gutenberg and build the shop or custom shop pages having a grid layout.
Step 2 – Use the Grid Block to Build the Shop Page
The WooCommerce block this plugin adds for Gutenberg can be used to create a shop page, category page, or any page with products.
So, you can edit an existing page where you want to display products in a grid layout or create a new one. It’s all dependant on your requirements. To insert the block, follow the same steps as you do with any regular block.
On the page, click the plus icon ‘+’ then search for WPMozo Product Grid and select the following one.
Once the block is inserted on the page, you can see all the products available in your store.
Now, what’s remaining is you customize its content and design.
Step 3 – Customization of the Product Grid
The good thing about this Woo product grid plugin is that it offers separate options for both content and design customization. While using it, you won’t feel the feeling of getting overwhelmed. Simply option dedicated options and apply your customization easily and effectively. Following, we will explore the Content customization first and then design.
Product Grid Content Customization Options (Settings)
The Settings panel of the WPMozo product grid for the WooCommerce block contains the following options.
General Settings
Using the General Settings of this WooCommerce block for products, you can customize the columns of the grid. You can choose to display products in up to 6 columns with custom rows and spacing.
With more products in the store, you ensure spaciousness in the product grid using these options.
Query Settings
The Query Settings of the WPMozo Product Grid block is the place to decide which products you want to display in the product grid.
First, you get the Product View Type option that allows you to select products based on their type that are:
- Default: show all the products
- Featured Products
- Sale Products
- Best Selling Products
- Top Rated Products
For instance, if you select to show products on sale, then the product grid will look like the following:
With this feature, it becomes easier to create custom product listing pages serving a particular purpose and enhancing the user experience of the digital store. After the product type, you get the option to choose a number of products to display, their order, and how to order them, Ascending or Descending.
However, among these useful features, what is essential is the category options to turn all product grids into category grids. Select the category and display products specifically from that.
In addition to the category, you can also select the tags and create Taxonomy Relations, AND | OR, to better cater for the product showcase. By default, the product grid block displays Out of Stock products as well, but it also provides you with the option to hide them.
Simply enable the Hide Out of Stock Products and those products that are not available will be hidden.
Display Settings
In the Display Settings of the WPMozo WooCommerce Gutenberg block, you can choose how to display the products. Here, you control the structure of your product grid layout.
The first option available here is Layout. It offers three layouts: Default, Layout 1, and Layout 2.
The default Woo product grid layout looks like the following:
Layout 1 of the product grid looks like the following.
It showcases the product thumbnail on the top, then the product title, and then the price and button side by side. With Layout 2, you can display products in a grid view as follows.
It lets you display the add to cart button below the thumbnail, then the product title and the price. By optimizing the layout, you can bring variation to the product showcase without any help from custom coding. In addition to the layout, the Display Settings lets you showcase Pagination.
When you enable the Pagination option, you get to choose what type of pagination you’d like to display. There are two types of Pagination Types:
- Pagination: This will add a number pagination to the product grid.
- Load More: Simply a load more pagination for improved UX.
Apart from the Pagination type, you also get to select Pagination Alignment and custom text for the Previous and Next links.
Additional Display Settings
WPMozo Product Grid for WooCommerce plugin offers a robust product grid tool for your WooCommerce store. With additional display settings, you can customize the product showcase even better. You can:
- Enable Ajax pagination
- Equalize product tile’s height
- Apply masonry effect
- Choose to display Out of Stock Label
- Enable Quick View
- Show/hide Title
- Choose Product thumbnail image size
- Show/hide Rating, Price, Add to Cart button, and Sale Badge
For the Sale Badge, you’ve got two options:
- Sale Label
- Sale Percentage
Products with a Sale badge as a Percentage, look like the following:
When you enable the quick view option, the products in the grid view display the Quick View button on hover for layout 1 and default. On Layout 2, it appears on the product featured image just as in the following example.
With all these Display options, you can customize the product grid for better user interaction.
Responsive Settings
Your customers can visit your WooCommerce store from any device, either a mobile phone or a computer. Therefore, this WooCommerce custom product grid block provides you with the option to make the grid responsive for all device types. By accessing the Responsive Settings, you can utilize the Mobile and Tablet functions.
Here, you can choose to apply a custom number of columns and spacing for the specific device type. This is a much-needed option and WPMozo Product Grid for WooCommerce brings it to you at no extra cost.
Product Grid Design Customization Options (Styles)
We have explored the content customization options, aka Settings, of the WooCommerce Gutenberg block for the products grid by WPMozo. Now, it’s time to explore the design options, aka, Styles. In the sidebar of this Gutenberg WooCommerce block, when you switch to the Styles tab, the following options you get:
- Products Style
- Pagination Style
- Active Pagination Style
- Title Style
- Price Style
- Add to Cart Style
- Quick View Button Style
- Quick View Style
Let’s explore these one by one.
Product Style
In the Product Style options, you can adjust the padding of your product grid to provide even content spacing.
You can easily do that by simply sliding the controls.
Pagination Style
In the Pagination Style options, you can customize the default look of your product grid listing’s pagination. It allows you to:
- Set the custom pagination text color
- Set custom pagination background color
- Change typography: Size, Appearance, Letter Spacing, Decoration, Letter Case, and Line Height
- Adjust padding
- Border
After utilizing these, you can achieve the look of your normal product grid pagination like the following:
In addition to this, you can adjust the Active Pagination by accessing the Active Pagination Style option. It provides the same controls but for the active pagination.
The styled Active Pagination would look like the above. If you’ve enabled the Load More pagination type, then you get style options for the same and achieve its look as the following:
Title and Price Style
These particular style options of this WooCommerce product grid block for Gutenberg lets you apply text and typography customizations on the Title and Price text. You can choose color, font size, font weight, letter spacing, decoration, and line height.
After applying the customizations, you can achieve the design for the title and price something similar to the following:
Button Styles (Add to Cart and Quick View)
If you’re showcasing products, it’s definite you want to sell them, and without an Add to Cart button, there’s no better option to motivate the customer to purchase them. However, you cannot just simply display a basic button and expect outstanding results.
The Add to Cart button should be highly optimized and easy to interact with.
Therefore, the WPMozo Products Grid block provides you with customization options to enhance the add to cart button for each product in the grid listing.
Using the Add to Cart Style option, you can:
- Change Text and Background color
- Change Font-weight, text decoration, and lettercase
- Adjust text size, letter spacing, and letter height
- Adjust button padding
- Add borders with color and custom radius
By utilizing the options, you can achieve style for the Add to Cart button something similar to the following:
Likewise, the product grid block also provides style options for the Quick View button. Using them, you can achieve style for the Quick View button something similar to the following:
Quick View Style (Quick View Modal Controls)
The Quick View element appears when the user hovers over the product when Default and Layout 1 are applied. In Layout 2, it’s displayed by default on the product thumbnail if you have enabled it. Now, if you’re styling the Add to Cart button and the Quick View button, you surely want to style the Quick View Popup.
The above is the default view of the Quick View. But, after using the style options, you can make your Quick View modal popup look like the following:
The options available, allow you to:
- Change Quick View color: text and background
- Adjust padding
- Apply custom styling for the Close button: Color, Text, and spacing customizations
In addition to these, you can also choose to keep Inner Elements Style Same As Products. Simply turn the toggle to the left if you need to apply custom styling on the inner elements.
Sale Label and Out of Stock Label Style Options
A sale label is what you can use to add extra attention to the products you’ve added on some discount offers. The Style options available for it lets you:
- Use color: Text and Background
- Customize typography: Font size, weight, spacing, casing, decorations, and height
- Adjust padding and borders
Once you use these options, you can have a sale badge something similar to the one below.
If you have enabled to display Out of Stock products, it’s essential you display the label as well, and when you do so, use the style option to make it look distinct.
By default, it looks like the above, but by using the available options, you can:
- Change color
- Apply text cusomizations
- Adjust padding and border
After using the available options, the out of stock label can be displayed like the following:
And with this, we have explored all the essential features this WooCommerce block provides to display products in the grid view with a much optimized look and elements. Let’s look at some product grid examples created using this block.
Examples of WooCommerce Product Grid
Once done with all the customizations you get with the WPMozo block for Gutenberg for WooCommerce, the WooCommerce grid view can look like the following examples:
Final Thoughts on WPMozo Product Grid for WooCommerce
So, above we explored the Gutenberg plugin for WooCommerce by WPMozo that lets you build product grids in the simplest, yet highly functional and creative way. The block offers the options extensively organized that streamlines smooth working for building a shop page or any other eCommerce page containing products.
With the options it includes from layout to styles, for WooCommerce, it’s one of the best WordPress Gutenberg plugins to build a Gutenberg-based WooCommerce shop.
There’s no learning curve, no need to follow complex processes or integrate any other WooCommerce block plugin to get it to work.
No, you don’t have to do anything like that because the WPMozo Product Grid for WooCommerce is enough. It’s enough to display products in grid view, it’s enough to customize them, and it’s enough to optimize your shop.
With this single plugin for WooCommerce, you can say farewell to many other Gutenberg blocks for WooCommerce, forever.
Now, it’s your time to try it.
0 Comments