Cross sell columns

Hi @dannyfoo,

This is how the default layout looks like – https://share.bsf.io/6quEPpvx. And when I add the code above, the Cross-Sells section looks like this – https://share.bsf.io/L1uWQle6. It works. It shows only three columns because I added only three Cross-Sells products.

I added the code to the child theme’s functions.php file. How did you add your code to your site?

Kind regards,
Herman ??

Hey @bsfherman thank you for the response.

I added the code using the Code Snippets plugin. What’s very odd is on a fresh install on my local, snippet seems to be working fine. But on my staging site, it’s like the below CSS rule keeps forcing the cross-sell to be 2 columns:

.woocommerce .cart-collaterals .cross-sells ul.products li, .woocommerce-page .cart-collaterals .cross-sells ul.products li {
  width: calc(50% - 10px);
}

This is found in the /themes/astra/assets/css/minified/compatibility/woocommerce/woocommerce-layout.min.css

If I disable that property when inspecting in Firefox, cross sells will show 4 columns instead of 2 columns.

It’s a weird predicament.

Hi @dannyfoo,

What is happening if, on your staging site, you add the code on a child theme instead of using that Code Snippets plugin?

And also, what was the version of the Astra theme when you installed it on your staging site for the first time?

Looking forward to hearing from you.

Kind regards,
Herman ??

Hey @bsfherman I tried adding to the child theme functions directly, and it still didn’t work ???♂?

Not sure what was the first version installed. Except I’m on v3.7.7 now.

This is a very odd one. For the time being, I’ll keep an eye on this and look into it more thoroughly at a later time.

Hi @dannyfoo,

If you think you need further assistance where we need to take a look closer at your site, please consider reaching out to us thru our Support Portal.

Kind regards,
Herman ??