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

[core365]

Hi, I’m doing a WooCommerce site using Pro and I’m displaying some subcategories on the Home page, but the product images aren’t centred - they’re aligning to the left on their box - and the fourth subcategory image box is shorter than the others and I’d prefer the boxes were all the same height with the image centred within it.

Hope that all makes sense! 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.

I checked your site, it seems that there is only 3 category listed all of the category images are looking similar in the height. To align the image center in the box you can add this custom CSS code under Pro—>theme Option —>CSS.

.memorial-range li.product-category.product img {
    margin: 0 auto;
    display: block;
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[core365]

Hi @prakash_s,

Sorry, I was working on it and changed it to 3 columns to see how it looked! I’ve now changed it back to 4 so you can see the fourth product is shorter than the rest.

Thanks!

[tristup]

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.log( jQuery(el).height() );
        
            if( jQuery(el).height() > max ){
                max = jQuery(el).height();
            }
        });
        console.log( max);
        jQuery(".memorial-range 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.

Thanks

[core365]

Hi @tristup,

That’s spot on, thank you!

Also, is it possible to do the same with the category titles in the green block that’s under the images - so they’re all the same height and the text is centred horizontally and vertically - as the ‘Churchyard Memorials’ goes over onto two lines and it then makes it look a bit messy when next to the others.

Thanks!

[marc_a]

Hi @core365,

My colleague already give you code as a starting point. Regretfully, we can’t provide any more customization on this thread.

Thank you for understanding.

[core365]

Hi @marc_a,

Ok.

Thanks for all your help and time on this.

[friech]

You’re welcome and thank you for understanding,

Cheers!