[Support request] Woocommerce – equalize product column height

Home Forums Support Woocommerce – equalize product column height

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #339005
    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

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    GeneratePress 1.3.48
    GP Premium 1.3.1
    #339022
    David
    Staff
    Customer Support

    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

    #339734
    Lyle

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

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #339984
    David
    Staff
    Customer Support

    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.

    #415878
    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

    #415944
    Tom
    Lead Developer
    Lead Developer

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

    #642571
    webfocus

    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 🙂

    #642874
    Tom
    Lead Developer
    Lead Developer

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.