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:
|
1 2 3 4 5 6 7 8 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/** * 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.
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!