[Support request] Woocommerce – equalize product column height

[Lyle]

With GP-P 1.3.1, is there a way to equalize the height of the product columns on the *Shop* page? The unintended “masonry” effect is not the desired look 🙂

Cheers!
Lyle

[David]

Hi Lyle, theres a few tricks:

1. Ensure review stars are always on show, thanks to Tom for adding this in – meant one less snippet, or not show them at all.
2. Force titles and excerpts to fill a fixed number of rows using CSS – one for forcing title to two rows is below, can be applied to the short description also:

.woocommerce ul.products li.product h2 {
    line-height: 2.5ex;
  	height: 5ex; /* 2.5ex for each visible line */
  	overflow: hidden;
}

3. I also hide the add to cart button until the product is hovered over. I dont like a see of add to cart buttons its distracting.

4. Still working on the snippet that hides all the existing meta and strips in my own formatable versions.

Hope this helps

David

[Lyle]

Thanks David! I’ll have a go and see how it works out 🙂

[David]

You may find this useful, it hooks the short description below the price and trims it down to 6 words only. You can then style it with the above 2 Line max. CSS.

/* Adding excerpt to shop page */
add_action( 'woocommerce_after_shop_loop_item', 'diggs_custom_shop_item', 5);
function diggs_custom_shop_item() {
	global $post;
		/* product excerpt  */
	if ( $post->post_excerpt ) {
		echo '<div class="diggs-shop-excerpt">' . apply_filters( 'woocommerce_short_description', wp_trim_words($post->post_excerpt,6,' ') ) . '</div>';
	}
}

I have been trying to hook the price field without much joy, ideally would want to create a flexible container to hold all of the product meta so you end up with a description card that can be styled easily.

[Subhan]

Hi,

i hope that in the newer version of GP Premium, the option to equalize the height of the product columns on the Shop page will be available.

so it will be easy to do that at a single click in customizing layout option.

because many not so familiar with modifying CSS / PHP.

regards,
Subhan

[Tom]

It’s on our list of things to play with 🙂

[Stephane Bergeron]

I would really be good to be able to do it. Genesis does it with a bit of JS which I think has wider browser support.

But a check box in GP and CSS solution (flexbox?) would be fine by me 🙂

[Tom]

We’ll be implementing flexbox for WooCommerce in GPP 1.8 🙂

[Author]

Posts