Skip to content

Adding Equal Height to WooCommerce Products

Important: This is an outdated article that is no longer relevant for the Total theme.

Because of how WooCommerce is designed by default if your titles, descriptions, prices, images don’t match in size across all products the buttons will be positioned at different levels for each product. Luckily in your Total theme there is a way to fix that!

Step 1: Make Sure Images are Cropped to the same Dimensions

Of course if your images are different sizes for each product then your entries won’t all be the same height. So first log into WordPress and browse to Theme Panel > Image Sizes > WooCommerce and make sure to enter a custom cropping height and width for your Product Entry setting.

Step 2: Enable Equal Heights in the Customizer

Now go to Appearance > Customize > WooCommerce > Shop & Archives and enable the Equal Height setting. What this will do is give the main content across all entries the same height – so the title & price will be set to the same height for all items and thus making the button (which is displayed after the title and content) align itself with the buttons for all other entries.

f

Back To Top