Change No. of Columns for Related Products in WooCommerce

I was working on one of my eCommerce WordPress themes. And as usual, i decided to go ahead and integrate it with WooCommerce. But, i was stuck while changing the no. of columns for the recent products section, which shows up at the bottom of single product.

So, I started with the WooCommerce Documentation, which provided me the following code to add in my themes functions.php file. Although, I create and maintain a separate woocommerce.php file for functions related to WooCommerce, and it also saves the need of checking if WooCommerce is installed, while writing every single function.

So, here is the code:

After adding the code, the related posts did not show up in 3 columns. But, something had happened. After carefully investigating, i saw that the code correctly returns 3 products. The first product has a class first  and the last one has the last  class. Uptil here, there are no issues.

But, the width for each product is still set to 48%. This should have been automatically changed to a lower value. But, it wasn’t happening. So, to make that happen you will have to do it manually. So, I added the following code to my theme’s less file.

That was done. To make it responsive, you will definitely have to do the changes. But, atleast now you know the issue and how to fix it.

One thought on “Change No. of Columns for Related Products in WooCommerce

  1. Hi, I did as it says but something very funny is happening, in my case I need to show 6 columns, when loading the page it shows 6 columns, and after one second it goes back to 4. Do you know if by javascript it’s changing the behavior?

    I added, and that’s the width it’s getting but it shows 4 columns anyway.
    .upsells.related-products ul.products li.col-md-2{
    width: 16.66666667% !important;
    }

    Thanks!

Leave a Reply

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