0

I have an online shop build with WordPress and WooCommerce. I am using the OceanWP Theme and Elementor to build my pages.

I am actually quite good and familiar with css, flexboxes and grids. However, I don't know how to solve the following problem:

On my shop page I have a grid list of products. But due to different lengths of headings and some other features like badges or on sale, the products are not vertically aligned. For example the product button ends on different heights.

My goal is to have the image, title, price, button, etc. aligned vertically at the same height. I think this is not gonna work with flexboxes because with flexboxes I can just grow or shrink thinks and align the complete flexbox either on top or on bottom.

But how can I aligned all elements (image, title, etc) on the same height? Do I do this with a grid?

<link href="https://pagecdn.io/theme/wp-oceanwp/1.8.6/assets/css/woo/woocommerce.css" rel="stylesheet" crossorigin="anonymous"  >
<link href="https://pagecdn.io/plugin/wp-elementor/3.0.15/assets/css/frontend.css" rel="stylesheet" crossorigin="anonymous"  >
<link href="https://pagecdn.io/theme/wp-oceanwp/1.8.6/assets/css/style.css" rel="stylesheet" crossorigin="anonymous"  >


<div class="woocommerce columns-4 ">
   <ul class="products oceanwp-row clr grid">
      <li class="entry has-media has-product-nav col span_1_of_4 owp-content-center owp-thumbs-layout-horizontal owp-btn-normal owp-tabs-layout-horizontal product type-product post-830 status-publish first instock product_cat-jacken product_cat-outdoor has-post-thumbnail post-password-protected taxable shipping-taxable purchasable product-type-simple">
         <div class="product-inner clr">
            <div class="woo-entry-image-swap woo-entry-image clr">
               <a href="https://google.de" class="woocommerce-LoopProduct-link no-lightbox"><img src="https://picsum.photos/300/300" class="woo-entry-image-main" width="300" height="300"></a> 
            </div>
            <!-- .woo-entry-image-swap -->
            <ul class="woo-entry-inner clr">
               <li class="image-wrap">
                  <div class="woo-entry-image-swap woo-entry-image clr">
                     <a href="https://google.de" class="woocommerce-LoopProduct-link no-lightbox"><img src="https://picsum.photos/300/300" class="woo-entry-image-main" width="300" height="300"></a>   
                  </div>
                  <!-- .woo-entry-image-swap -->
               </li>
               <li class="category"><a href="https://google.de" rel="tag">Jacken</a>, <a href="https://google.de" rel="tag">Outdoor</a></li>
               <li class="title">
                  <h2><a href="https://google.de">Geschützt: ISG Jacket Multicam (Kopie) This is a test This is a test</a></h2>
               </li>
               <li class="price-wrap">
                  <span class="price"><span class="woocommerce-Price-amount amount"><bdi>1.188,81&nbsp;<span class="woocommerce-Price-currencySymbol">€</span></bdi></span></span>
               </li>
               <li class="wc-gzd">
                  <p class="wc-gzd-additional-info tax-info">inkl. 19 % MwSt.</p>
                  <p class="wc-gzd-additional-info shipping-costs-info">zzgl. <a href="https://google.de" target="_blank">Versandkosten</a></p>
               </li>
               <li class="rating"></li>
               <li class="btn-wrap clr"><a href="?add-to-cart=830" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="830" data-product_sku="" aria-label="„ISG Jacket Multicam (Kopie)“ zu deinem Warenkorb hinzufügen" rel="nofollow">In den Warenkorb</a></li>
            </ul>
         </div>
         <!-- .product-inner .clr -->
      </li>
      <li class="entry has-media has-product-nav col span_1_of_4 owp-content-center owp-thumbs-layout-horizontal owp-btn-normal owp-tabs-layout-horizontal product type-product post-585 status-publish instock product_cat-ausruestung product_cat-outdoor has-post-thumbnail taxable shipping-taxable purchasable product-type-variable">
         <div class="product-inner clr">
            <div class="woo-entry-image-swap woo-entry-image clr">
               <a href="https://google.de" class="woocommerce-LoopProduct-link no-lightbox"><img src="https://picsum.photos/300/300" class="woo-entry-image-main" width="300" height="300"></a> 
            </div>
            <!-- .woo-entry-image-swap -->
            <ul class="woo-entry-inner clr">
               <li class="image-wrap">
                  <div class="woo-entry-image-swap woo-entry-image clr">
                     <a href="https://google.de" class="woocommerce-LoopProduct-link no-lightbox"><img src="https://picsum.photos/300/300" class="woo-entry-image-main" width="300" height="300"></a>   
                  </div>
                  <!-- .woo-entry-image-swap -->
               </li>
               <li class="category"><a href="https://google.de" rel="tag">Ausrüstung</a>, <a href="https://google.de" rel="tag">Outdoor</a></li>
               <li class="title">
                  <h2><a href="https://google.de">Wilderness .x-navbar-inner  superiörrrrr geil</a></h2>
               </li>
               <li class="price-wrap">
                  <span class="price"><span class="woocommerce-Price-amount amount"><bdi>357,00&nbsp;<span class="woocommerce-Price-currencySymbol">€</span></bdi></span></span>
               </li>
               <li class="wc-gzd">
                  <p class="wc-gzd-additional-info tax-info">inkl. MwSt.</p>
                  <p class="wc-gzd-additional-info shipping-costs-info">zzgl. <a href="https://google.de" target="_blank">Versandkosten</a></p>
                  <p class="wc-gzd-additional-info delivery-time-info"></p>
                  <p class="wc-gzd-additional-info product-units-wrapper product-units"></p>
               </li>
               <li class="rating"></li>
               <li class="btn-wrap clr"><a href="https://google.de" data-quantity="1" class="button product_type_variable add_to_cart_button" data-product_id="585" data-product_sku="" aria-label="Wähle Optionen für „Wilderness .x-navbar-inner  superiörrrrr geil“" rel="nofollow">Ausführung wählen</a></li>
            </ul>
         </div>
         <!-- .product-inner .clr -->
      </li>
      <li class="entry has-media has-product-nav col span_1_of_4 owp-content-center owp-thumbs-layout-horizontal owp-btn-normal owp-tabs-layout-horizontal has-no-thumbnails product type-product post-522 status-publish outofstock product_cat-ausruestung product_cat-outdoor has-post-thumbnail post-password-protected taxable shipping-taxable purchasable product-type-variable">
         <div class="product-inner clr">
            <div class="woo-entry-image clr">
               <a href="https://google.de" class="woocommerce-LoopProduct-link no-lightbox"><img src="https://picsum.photos/300/300" class="woo-entry-image-main" width="300" height="300"></a> 
            </div>
            <!-- .woo-entry-image -->
            <ul class="woo-entry-inner clr">
               <li class="image-wrap">
                  <div class="outofstock-badge">
                     Ausverkauft                
                  </div>
                  <!-- .product-entry-out-of-stock-badge -->
                  <div class="woo-entry-image clr">
                     <a href="https://google.de" class="woocommerce-LoopProduct-link no-lightbox"><img src="https://picsum.photos/300/300" class="woo-entry-image-main" width="300" height="300"></a>   
                  </div>
                  <!-- .woo-entry-image -->
               </li>
               <li class="category"><a href="https://google.de" rel="tag">Ausrüstung</a>, <a href="https://google.de" rel="tag">Outdoor</a></li>
               <li class="title">
                  <h2><a href="https://google.de">Geschützt: Habicht 10×40 W</a></h2>
               </li>
               <li class="price-wrap"></li>
               <li class="wc-gzd">
                  <p class="wc-gzd-additional-info tax-info">inkl. MwSt.</p>
                  <p class="wc-gzd-additional-info shipping-costs-info">zzgl. <a href="https://google.de" target="_blank">Versandkosten</a></p>
                  <p class="wc-gzd-additional-info delivery-time-info"></p>
                  <p class="wc-gzd-additional-info product-units-wrapper product-units"></p>
               </li>
               <li class="rating"></li>
               <li class="btn-wrap clr"><a href="https://google.de" data-quantity="1" class="button product_type_variable" data-product_id="522" data-product_sku="" aria-label="Wähle Optionen für „Habicht 10x40 W“" rel="nofollow">Ausführung wählen</a></li>
            </ul>
         </div>
         <!-- .product-inner .clr -->
      </li>
      <li class="entry has-media has-product-nav col span_1_of_4 owp-content-center owp-thumbs-layout-horizontal owp-btn-normal owp-tabs-layout-horizontal product type-product post-483 status-publish last instock product_cat-hosen product_cat-outdoor has-post-thumbnail post-password-protected taxable shipping-taxable purchasable product-type-variable has-default-attributes">
         <div class="product-inner clr">
            <div class="woo-entry-image-swap woo-entry-image clr">
               <a href="https://google.de" class="woocommerce-LoopProduct-link no-lightbox"><img src="https://picsum.photos/300/300" class="woo-entry-image-main" width="300" height="300"></a> 
            </div>
            <!-- .woo-entry-image-swap -->
            <ul class="woo-entry-inner clr">
               <li class="image-wrap">
                  <div class="woo-entry-image-swap woo-entry-image clr">
                     <a href="https://google.de" class="woocommerce-LoopProduct-link no-lightbox"><img src="https://picsum.photos/300/300" class="woo-entry-image-main" width="300" height="300"></a>   
                  </div>
                  <!-- .woo-entry-image-swap -->
               </li>
               <li class="category"><a href="https://google.de" rel="tag">Hosen</a>, <a href="https://google.de" rel="tag">Outdoor</a></li>
               <li class="title">
                  <h2><a href="https://google.de">Geschützt: MIG 4.0 Trousers</a></h2>
               </li>
               <li class="price-wrap">
                  <span class="price"><span class="woocommerce-Price-amount amount"><bdi>238,00&nbsp;<span class="woocommerce-Price-currencySymbol">€</span></bdi></span></span>
               </li>
               <li class="wc-gzd">
                  <p class="wc-gzd-additional-info tax-info">inkl. MwSt.</p>
                  <p class="wc-gzd-additional-info shipping-costs-info">zzgl. <a href="https://google.de" target="_blank">Versandkosten</a></p>
                  <p class="wc-gzd-additional-info delivery-time-info"></p>
                  <p class="wc-gzd-additional-info product-units-wrapper product-units"></p>
               </li>
               <li class="rating"></li>
               <li class="btn-wrap clr"><a href="https://google.de" data-quantity="1" class="button product_type_variable add_to_cart_button" data-product_id="483" data-product_sku="" aria-label="Wähle Optionen für „MIG 4.0 Trousers“" rel="nofollow">Ausführung wählen</a></li>
            </ul>
         </div>
         <!-- .product-inner .clr -->
      </li>
   </ul>
</div>
Jan
  • 1,180
  • 3
  • 23
  • 60
  • are you saying that you want the same space between your flex elements? – Roohullah Kazmi Jan 31 '21 at 15:24
  • Yes, correctly! If it works there should always be the same height of px in each product row for the title, image, price, etc.... Means, the height always is adjusted buy the longest height of a title, a image, a price etc. – Jan Jan 31 '21 at 15:30

1 Answers1

0

you can do that with flex. the problem here is that you are not fixing the height of the items. once you fix the height of your images you have to add this line in flex parent class

justify content: space-evenly;

but first you have to fix the heights of the flex items specially the images.

you also have to use margin-bottom.

Roohullah Kazmi
  • 337
  • 3
  • 14