woocommerce offtopic - How to display products in sidebar in 2 columns?

admin管理员组

文章数量:1130349

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

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

• woocommerce-offtopic
• widgets
• sidebar

Share Improve this question edited Nov 30, 2018 at 9:43 Pavel Janicek asked Nov 27, 2018 at 13:03 Pavel JanicekPavel Janicek 21233 silver badges1414 bronze badges 3

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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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

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

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

• woocommerce-offtopic
• widgets
• sidebar

Share Improve this question edited Nov 30, 2018 at 9:43 Pavel Janicek asked Nov 27, 2018 at 13:03 Pavel JanicekPavel Janicek 21233 silver badges1414 bronze badges 3

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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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

本文标签： woocommerce offtopicHow to display products in sidebar in 2 columns