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:

add_filter( 'woocommerce_output_related_products_args', 'themename_related_products_count' );

function themename_related_products_count( $args ) {
     $args['posts_per_page'] = 3;
     $args['columns'] = 3;

     return $args;
}

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.

/**
* to display related posts in 3 Columns
*/
.woocommerce {
	.related,
	.upsells.products {
		ul.products,
		ul {

			li.product {
			width: 30.75%;	
			}
		}
	}
}

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.