The default WooCommerce product grid is BAD for your shop

🚫 Don’t use the default product grid on your store because of these issues.

There are 2 major problems with the woocommerce product grid that need to be fixed:

1. Exploring products 🔎 is difficult

Exploring products in the default WooCommerce product grid is difficult because the grid does not highlight important product attributes. Customers need to know these key attributes of your products in order to understand and compare the products. Only then can they find the products that meet their requirements and choose which ones to purchase.

For example:

  • In a book store 📖 customers may want to know the author, date of publication, genre, etc.
  • In a phone shop 📱 they want to know screen size, memory size, processor speed, RAM etc.
  • In a clothes shop 👚 they may want to know size, color, cloth material etc.

But the default WooCommerce product grid does not provide any of this information. Instead it only shows product name, a single image and price. So customers know very little about the product at first glance. They are forced to click on the product and go to the product page to check further details.

The customer has to repeat this cycle for every product in the shop that they find remotely interesting. This would take a long time, several clicks going back and forth between the shop and product pages to find the products they want. 

This is a major problem because it makes shopping slow, frustrating and disorienting for potential customers and the shop ends up losing sales. 

2. Adding products to cart 🛒 is slow and confusing

Once customers have found the products they want to buy, a modern e-commerce shopping experience ensures that purchasing these products is fast and easy.

For this the following facilities are necessary in the product catalog. But the WooCommerce product grid misses all these important facilities. 

Select product quantity to purchase 

Many times customers need to add multiple units of a product to their cart. The default WooCommerce product grid provides no option to enter product quantity. Customer has to click on the add to cart button multiple times and each time wait for the previous add to cart command to complete. 

Customers should be able to select quantity while adding to cart

Remove products from cart

During the shopping process customers will sometimes add products to cart by mistake, or they may add the wrong quantity. The WooCommerce product grid unfortunately provides no option to remove products from cart when this mistake happens. Instead customer has to go to the cart page to remove items from cart or change quantity. This makes the purchase process slow and confusing even when customers are prepared to buy products from the shop. 

Make it easy for customers to remove products from cart

Add variable products to cart directly from catalog

The woocommerce product grid shows the ‘select options’ button for variable products. This button takes customers to the product page where they can make the product purchase. This unnecessarily extends the purchase process for variable products.

Instead the variable product options should be provided in the catalog itself or when the add to cart button is pressed, the options should appear in the popup. Customers should not be forced to go to the product page each time they want to add a variable product to cart. 

Give option to select product variation and add to cart directly from the shop

Bulk add products to cart

Many web shops need the facility to bulk add several products to cart in one go. Customers should not have to wait for add to cart process to gradually complete for each product

Allow customers to bulk add multiple products to cart quickly at the same time

Show product cart count

While shopping, customers will add different products to their cart and typically continue browsing the rest of the product catalog. To help clear any possible confusion, the catalog should tell them how many units of each product they have already placed in their cart.