Topic: Cross sell 2 columns issue

David

February 29, 2024 at 4:05 am

Hi there,

in your child theme you have this:


.woocommerce .cart-collaterals .cross-sells ul.products, .woocommerce-page .cart-collaterals .cross-sells ul.products {
    float: none;
}

That breaks the columns on that page.

On your other site you have the same CSS but you also have this:


.woocommerce ul.products {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

Which fixes the problem.

Anonymous

February 29, 2024 at 10:42 am

Hi David,

Thanks a lo.

Should I remove this completely?

.woocommerce .cart-collaterals .cross-sells ul.products, .woocommerce-page .cart-collaterals .cross-sells ul.products {
    float: none;
}

Ned

February 29, 2024 at 10:49 am

btw, I have just checked the style and both has this.
https://i.imgur.com/di7Tol1.png

but non has this.

.woocommerce .cart-collaterals .cross-sells ul.products, .woocommerce-page .cart-collaterals .cross-sells ul.products {
    float: none;
}

David
February 29, 2024 at 1:35 pm
Just add this CSS to your site:
```
.woocommerce ul.products {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
```
Its different to the one you have in your screenshot.
Ned
February 29, 2024 at 9:09 pm

got it, thanks
David
March 1, 2024 at 3:41 am

You’re welcome
Anonymous
March 1, 2024 at 3:09 pm

adding this broke product listing in tags, categories etc.
I had to remove the added code.
Ying
March 1, 2024 at 4:10 pm

Can you share the link again?
Ned
March 2, 2024 at 10:33 am

hi,
Sure added.
I am not sure why it has been removed.

Btw, I downloaded child theme’s css files for both websites and compared them via vscode compare plugin.
It looks like they are same.
Ying
March 2, 2024 at 11:30 am

When the topic is marked as resolved, the forum erases all info in the private info field to protect user privacy.

Which section of which page should I be looking at?

What is the expected layout?
Ned
March 2, 2024 at 11:32 am

I see, that makes sense.
When you go to cart page, left and a bit low, there are cross sell products.
They should be shown 2 products in each line.
But there are 1 product in each line.

Ying

March 2, 2024 at 11:58 am

Try this:

.cross-sells ul.products {
    display: flex;
    flex-wrap: wrap;
}

Viewing 16 posts - 1 through 16 (of 19 total)

Cross sell 2 columns issue