Product images not displaying correctly when using shortcode

Hello

You have two blocks of inline CSS code that caused this problem.

.woocommerce ul.products[class*="columns-"] li.product {
    width: 48%;
    float: left;
    clear: both;
    margin: 0 0 2.992em;
}
.woocommerce ul.products[class*="columns-"] li.product {
    width: 48%;
    float: left;
    clear: both;
    margin: 0 0 2.992em;
}

Please remove these two blocks from your custom SSS to fix the problem

Good luck

• This reply was modified 4 years, 5 months ago by Hamid Reza Yazdani.

Hey @yazdaniwp thanks for the reply.

I’ve had a thorough look through the theme editor looking for this line, but I can’t find it.

To be honest I’m not too advanced, so I’m sure there’s an easier way to find it.

For now, I’ve excluded the page from CSS minification, which has resolved the issue, but I’d rather turn it on.

How can I find the file where that code is located so I can remove it?

Thanks for your help, it’s appreciated!

Hi,

You’re welcome,
Unfortunately, I could not find anything. You need to find the following expression in your database or theme’s files and plugins and delete the blocks.

.woocommerce ul.products[class*="columns-"]

Good luck

Hi there,

I’ve just had another look at the link you shared – On my side, all the rows on the page indeed have 4 products:

Link to image: https://d.pr/i/mKwKMY

Can you share a screenshot of what you’re seeing on your side?

As for the code that @yazdaniwp mentioned previously: That comes from the core WooCommerce plugin itself but only applies if the browser width is less than 768px (i.e. on a mobile device) – It doesn’t relate to the shortcode specifically.

@riaanknoetze

Hi

He said:

For now, I’ve excluded the page from CSS minification, which has resolved the issue, but I’d rather turn it on.

Doh! I overlooked that part – thanks @yazdaniwp ??

Seeing as this is a minification issue then, you’ll want to reconsider the order in which CSS files are parsed: Effectively ensuring that the styles from the WooCommerce plugin are added to the minification file *last*.

Hey @yazdaniwp and @riaanknoetze

Thanks for your input on this.

You may have pointed out an important part @riaanknoetze that I can push the woocommerce plugin CSS files to be parsed last. I’ll let you know if it works!

Thanks for your input guys!

Hey guys,

Just letting you know I was looking through the CSS files, using the guide for my performance plugin: https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:cache:lscwp:optimize-issue

I tried excluding some of the woocommerce CSS files, but then I figured for me as it’s only the shop home page that is experiencing the issue, it’s easier to just exclude that one page rather than all the CSS woocommerce files which will affect lots of pages.

Thanks for your help and hopefully this will help someone else!