Woocommerce shop 4 column and image resolution

[mcvanz]

Hi there, I’ve two problem on viewing my shop page.

1. I’ve set 4 columns
   

but, under certain resolution columns became 3+1 as in screenshot

This seems strange, any idea?

2. This is a matter connected: i can’t use thumbnails over 200px for my shop page to have 4 columns but, as you imagine, every thumbnail loses resolution. Usually I set every thumbnail size 600px to have good resolution. Where am I wrong?

Thank you for your support
Roberto

[ruenel]

Hello Roberto,

Thanks for writing in!

1.) The last column may contain error or conflict which is why it is not showing correctly. I have check your shop (see secure note) and I do not see any issue there. It displays a 4 column layout.

2.) You can adjust the image sizes in Appearance > Customize > WooCommerce > Product Images. The shop page is using the catalog size. After changing the image size settings, please install Regenerate Thumbnails plugin. You must regenerate the thumbnails first so that the new image size settings will display in your site.

Hope this helps. Please let us know how it goes.

[mcvanz]

Hi there, I’ve changed image (point 2) dimension to 600px (ratio 1:1) and regenerated thumbnails but all products now have big image and shown on 1 column.
I’ve to try anything else, any idea?

[ruenel]

Hello @mcvanz,

Thanks for updating in!

To resolve the column issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(min-width: 980px){
    .woocommerce .columns-4 li.product {
        width: 22%;
    }
}

Hope this helps. Kindly let us know.

[mcvanz]

It seems the right way to solve it but, again, under “certain resolution” the problem appears.
I don’t know the reason for this behaviour, it should be automatic!

[lely]

Hi @mcvanz,

It happens because theme customization on the template was overwritten. Your shop page is showing the default woocommerce class for columns and not the class we use on our customization. See this: https://screencast-o-matic.com/watch/cqiU2QOk0M
Please try checking the template on your child theme. You can see our customization for that here: \wp-content\themes\x\woocommerce\loop\loop-start.php.

Hope this helps.

[mcvanz]

I’ve seen the video but, sorry, I’ve not understood what I’ve to do.
Please, can I ask you the correct step to solve it?

[friech]

Hi @mcvanz,

Did you already resolve the issue? I don’t see the product rows being 3 columns on any screen size.

On screens 980px and above the row is 4 columns

And on 979px and below the row is 2 columns

It seems Ruenel’s provided CSS code above resolved the issue, if this did not reflect on your end, please clear your browser’s cache and any caching feature you might have.

Cheers!

[mcvanz]

Everything ok NOW! Thank you for your support guys!

[friech]

We are delighted to assist you with this.

Cheers!