Disclosure: This post contains affiliate links as explained in my disclosure policy.
Table of Contents
What is a grouped product?
WooCommerce group product is a collection of related products that can be purchased individually. It is a way to organize your simple products.
Imagine you are running an online pizza delivery system. You can create a group of simple products to create what WooCommerce called a grouped product. This way your restaurant could promote sales of certain simple products.
For example, you can group cheese pizza, pasta, and wings together and give it a name such as “Chef’s choice of the month”/ “Chef’s choice”.
How to set up grouped products
1. create a simple product
Creating a simple product is as easy as eating a pizza. I published a post, previously, explaining how to create a simple product in WooCommerce.
2. Now, it’s time to create a group product
Click on, Products => Add New
3. Add simple products to the group
I created the group product and name it “Chef’s Choice”. Group product is a combination of simple products. Therefore, now I need to add simple products that I have created earlier. If you do not how to create a simple product, first, learn it here.
After you have selects “Grouped product” from the Product data dropdown list, click on “Linked Products”. Then, enter the names of the simple products that you want to add to the group.
4. Add an image to the grouped product. Adding a product image has no difference from adding a product image to a simple product. Use the Product Image panel and set a suitable image for the group.
Finally, click on the update button(which is in the top-right corner).
Now go to your site and check how it appears in the front-end. Click on the Shop page.
As you can see, the newly created group called “Chef’s choice”
But wait…….Why do those simple products that belong to the group product still appear on the shop page, individually, outside the group !!!
Well, that is the default behavior of WooCommerce. Remember, the grouped product is a way to organize certain simple products so that it can potentially improve the sales of those products. However, this does not mean that customers cannot buy those products in the group individually.
But there is a workaround if you want your customers to buy those products by accessing the grouped products. You can hide those simple products that appear on the shop page individually.
Changing catalog visibility
Go to Products => All Products.
This will show all the products in your store/restaurant. Remember that we add 3 simple products(cheddar pizza, Alfredo pasta, and pizzaMania Wings) into the grouped product(named “Chef’s choice”). We are going to hide all those simple products. I will show how to do it for cheddar pizza, and you can do the same thing for the other two simple products in the group product.
- Move your mouseover Chedder pizza,and click on Edit (you can also click on the image or product title). You will access the Edit Product view.
- Now, on the Publish panel(in the top-right), click on Edit under the label Catalog visibility.
The default catalog visibility of WooCommerce is Shop and Search results. We are going to change this. Click on Hidden, and then update.
Go to the shop page and see how it appears now. Now, If a customer needs to buy those 3 simple products they must view the chef’s choice grouped product.
When a customer clicks on the Chef’s choice grouped product, he will the screen below.
Adding images to product page
As you can see above, when we set the catalog visibility of those three simple products to “Hidden”, it hides the image even on the product page. This is the default behavior of WooCommerce. But we can change this by adding a PHP code to your functions.php file. Remember DO NOT add your code to the functions.php file of the core theme. You must create a child theme first, create your own functions.php file, and then add the following code. If you do not know how to create a child theme, learn it here<<link>>.
add_action( 'woocommerce_grouped_product_list_before_quantity', 'add_image_thumbnail_grouped_product' );
function add_image_thumbnail_grouped_product( $product ) {
$attachment_url = wp_get_attachment_image_src($product->get_image_id(), 'thumbnail', false)[0];
?>
<td class="label">
<img src="<?php echo $attachment_url; ?>" />
</td>
<?php
}
if you are not a developer, you can hire a freelancer at freelance services such as www.fiverr.com.
Now it should appear as below.
Conclusion
A grouped product is a way to organize simple products to help shop owners/merchant/business owners to increase the sales of their products. WooCommerce gives great control to the shop owners on how they should arrange shop page and product page appears. This will ultimately improve the user experience of your eCommerce site for the customers.
