[Resolved] Equal height of Woocommerce grid on archive/shop page

Home Forums Support [Resolved] Equal height of Woocommerce grid on archive/shop page

Home Forums Support Equal height of Woocommerce grid on archive/shop page

  • This topic has 3 replies, 2 voices, and was last updated 2 months ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2007444
    mkjj

    I would like to have equal heights of all items (in a row) in the Woocommerce grid layout on archive pages of the main shop page:

    https://dfme-achtsamkeit.de/angebote/

    To achive that I could tweak the height of specific elements (e.g. product title), but flexbox would be much better than this old school solution. This question was asked before. According to this post, GP provides a feature for that, but I can’t find it. What am I missing? Thank you very much!

    #2007561
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS:

    @media(min-width: 769px) {
        .woocommerce ul.products {
            display: flex;
            flex-wrap: wrap;
        }
        .woocommerce ul.products li.product,
        .woocommerce ul.products li.product a {
            display: flex;
            flex-direction: column;
            
        }
        .woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
            flex: 1;
        }
    }
    #2007595
    mkjj

    Awesome, David! Almost perfect. I had to change one element so that price and VAT wouldn’t be separated:

      .product p.wc-gzd-additional-info {
      flex: 1;
      }

    Now, the VAT paragraph is extended which looks much better in my opinion.

    Thank you!

    #2007649
    David
    Staff
    Customer Support

    Awesome – glad to be of help!

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