0

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: products in 3 columns

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

3
  • can u provide a URL? What theme are you using? Commented Nov 27, 2018 at 15:48
  • what theme are using ? and add some code my answer please check Commented Nov 28, 2018 at 11:54
  • also wocommerce css class i hope solve your problem . Commented Nov 28, 2018 at 11:59

1 Answer 1

0

If you’re using a WooTheme then this code may have been utilized in the theme. It will already be pluggable which means you’ll need to redefine the function in your functions.php file (preferably in a child theme) to overwrite the theme default.

/Override theme default specification for product # per row/

function loop_columns() {

            return 2; // 2 products per row

}
add_filter('loop_shop_columns', 'loop_columns', 999);

please check LINK for more information :Change number of products per row

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.