[Resolved] Change number of Cross Sells columns on WooCommerce cart page

[Debra]

My WooCommerce cart is set to show 2 columns for Cross Sells. I’m not sure if this is something I set somewhere or not (I cannot find a setting option). I want to change this to 1 column. Any suggestions?

[Fernando]

Hi Debra,

Can you go to Appearance > GeneratePress, and enable the WooCommerce module if it’s disabled?

Then, go to Appearance > Customize > Layout > WooCommerce > Single Product, and change the Related/Upsell Columns value to your preference – 1.

Reference: https://docs.generatepress.com/article/woocommerce-overview/#single-product

[Debra]

Hi Fernando,

Thanks for the response. Changing that setting to 1 still formats the cross-sells in the cart with 2 columns. However, it does change the columns on my Single Product display.

If possible, I would like to keep the number of columns on my Single Product pages set to something different than on the cart page.

When I inspect the CSS on the cart page I see: <div class="cross-sells"><ul class="products columns-2">. (This is the same regardless of what number I set in the Appearance > Customize > Layout > WooCommerce > Single Product > Related/Upsell Columns value.)

[Fernando]

I see. Sorry, I misunderstood. The column setting for that section is controlled by WooCommerce.

To alter it, you can try adding this PHP snippet:

add_filter( 'woocommerce_cross_sells_columns', 'change_cross_sells_columns' );
 
function change_cross_sells_columns( $columns ) {
    return 1;
}

Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

This should turn columns-2 to columns-1.

Let us know how it goes.

[Debra]

That changes the CSS to show <div class="cross-sells"><ul class="products columns-1"> However, I was hoping my product would resize to fill that column. Instead, it still displays as if it’s in a 2 column format.

[Fernando]

I see. Try adding this through Appearance > Customize > Additional CSS:

.cross-sells ul.products.columns-1 > li {
    width: 100% !important;
    text-align: center;
}

.cross-sells ul.products.columns-1 > li .inside-wc-product-image {
    width: 100%
}
.cross-sells ul.products.columns-1 > li .star-rating {
    margin-left: auto;
    margin-right: auto;
}

[Debra]

That works perfectly! Is there a tip jar here for outstanding support?

[David]

Hi there,

we do have a tip jar 🙂 It can be found here:

https://generatepress.com/ongoing-development/

[Debra]

Perfect! Thanks, David!

[David]

Thank you ! It is much appreciated 🙂

[Author]

Posts