Plugin Contributor
Nick C
(@modernnerd)
Hi, @detoner!
All recent StudioPress themes with WooCommerce support now include a fix for equal-height layouts on product archive pages.
This is something that’s implemented at the theme level so that any styling adjustments can be made to the theme directly, so it likely won’t become part of Genesis Connect.
If you’re interested in applying this to your own Genesis child themes, one way is to use the jQuery Match Height plugin. Here is how that works in Altitude Pro, for example:
add_action( 'wp_enqueue_scripts', 'altitude_products_match_height', 99 );
/**
* Print an inline script to the footer to keep products the same height.
*
* @since 1.1.0
*/
function altitude_products_match_height() {
// If WooCommerce isn't active or not on a WooCommerce page, exit early.
if ( ! class_exists( 'WooCommerce' ) || ( ! is_shop() && ! is_woocommerce() && ! is_cart() ) ) {
return;
}
wp_enqueue_script( 'altitude-match-height', get_stylesheet_directory_uri() . '/js/jquery.matchHeight.min.js', array( 'jquery' ), CHILD_THEME_VERSION, true );
wp_add_inline_script( 'altitude-match-height', "jQuery(document).ready( function() { jQuery( '.product .woocommerce-LoopProduct-link').matchHeight(); });" );
}
You’d need to save the jquery.matchHeight.min.js file to your theme’s js directory and add the above code to your functions.php file, then adjust your product page styles further with CSS if you wish.