I would like to put products view to sidebar on each blog page. However, it prints 3 columns by default which does not really look nice:
I tried these approaches:
1) Editing functions.php of my child theme, by adding this code:
add_filter( 'loop_shop_columns', 'wcesoteria_loop_shop_columns', 1, 10 );
/*
* Return a new number of maximum columns for shop archives
* @param int Original value
* @return int New number of columns
*/
function wcesoteria_loop_shop_columns( $number_columns ) {
return 2;
}
Did not help, the sidebar is still printed in 3 columns
2) Inserting shortcode to sidebar inside "text" widget:
[recent_products columns="2"]
Again, result is the same, I see 3 columns
3) Styling through custom CSS in chrome dev view:
.woocommerce.post-type-archive .module-small-shop .container {
display: table;
}
.woocommerce.post-type-archive .module-small-shop .container .shop-with-sidebar {
display: table-footer-group;
}
}
/*2 rows products on mobile*/
ul.products li.product{
width: 48%!important;
float: left!important;
clear: both;
}
ul.products li.product:nth-child(2n) {
clear: none;
float: right;
}
Again, still 3 columns.
Completely clueless how should I proceeed :( Is there any other easy way than to write own plugin? What should I try more to display products in 2 columns in sidebar?
Thanks for help
Edit I am using Divi template, so it may be already plugged regarding the columns. Will investigate the Divi theme if this can be changed