WooCommerce product category pages, product image height to be the same and centred please!

[core365]

Hi, I’m doing a WooCommerce site using Pro and when you view the main category pages, the sub category product images aren’t the same height, some are shorter than the others and I’d prefer the boxes were all the same height with the image centred within it and the green buttons to all be in line instead of at different heights.

Hope you can help! I’ll put the URL in a secure note as it’s being built on a temporary link.

Thanks!

[prakash_s]

Hello @core365,

Thanks for writing to us.

It seems that you have set the different sizes of the images. I would suggest you, use the same size of the image so that it aligns properly or you have to set the size of the image by using custom code in the child theme.

In case if you have an idea about coding please have a look at this article or I would suggest you contact a developer who can assist you with your concern. Please note that we don’t provide custom development support it is out of the support scope.

Hope it helps
Thanks for understanding

[core365]

Hi @prakash_s,

It’s fine for me to make sure the images are all the same height, however my client won’t be able to do that when, they’ll be uploading images just as they have them they won’t be able to change the size themselves to suit!

Instead of changing the height of the image, would you be able to let me know how to do it so all the buttons were aligned at the bottom, so they’re not displayed at different heights please.

Thanks

[tristup]

Hi @core365,

I have investigated your website and found that I have already provided a solution a few days back which worked for you. Please find the thread below.

WooCommerce product image height to be the same and centred please!

Hi @core365, To make the height of all 4 products, make sure that the images are in proper aspect ratio and size. In your case the image of the 4th product is not at the same height, I would suggest you add the image in the same size or add the following JavaScript code into the Theme Options > JS to match the height forcefully while loaded. jQuery(document).ready(function($){ var max=0; jQuery(".memorial-range li.product img").each(function(index, el) { console.lo…

But, now I found that the memorial-range class has been removed from the Product listing <ul> tag, and which makes the images uneven again. I have modified the same code and checked it working at your end, please add the following code into the Theme Options > JS.

jQuery(document).ready(function($){	
        var max=0;
        jQuery("ul.products li.product img").each(function(index, el) {
            console.log( jQuery(el).height() );
        
            if( jQuery(el).height() > max ){
                max = jQuery(el).height();
            }
        });
        console.log( max);
        jQuery("ul.products li.product img").css('height', max);
});

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

NOTE: Please remember that whenever you are removing any class or and selector please check if any code is affecting that or not.

Thanks

[core365]

Hi @tristup,

I did try to modify the code you had previously given me, but I couldn’t get it to work, so I thought I’d need to ask again as the thread had been closed and I couldn’t reply back to it!

Many thanks for the code, it’s spot on!

Thanks again for your time and help, it’s much appreciated!

[tristup]

Hi @core365,

Glad that we are able to help you.

Thanks