admin管理员组文章数量:1323335
I'm trying to display the products with the same height at the shop page. I want the product image aligned at the top and the add to cart buttons aligned at the bottom.
What I have right naw:
What I've tried so far:
- Using javascript to set the
<li>
hight equal to it's parent<ul>
hight. The result is the following:
The js code is the following:
//Script to align the products in shop page
$(document).ready(function() {
var max = 0;
max = $("ul.products").height();
$("ul.products li.product").height(max);
});
This works as desired, the only problem is that I can't get the prices and buttons closer to the text.
- Applying a fixed height to the
li
elements. This breaks the responsive.
It must be an easy solution for that! Any help will be highly appreciated.
EDIT: I'm looking for an update-proof solution, so overriding the default WooCommerce templates is not an option.
EDIT 2: I add the source code of the columns as asked in the comments.
<div class="storefront-sorting">
<div class="woocommerce-notices-wrapper">
</div>
<div class="container">
</div>
<ul class="products columns-3">
<li class="product type-product post-223 status-publish first instock product_cat-accessories has-post-thumbnail featured shipping-taxable purchasable product-type-simple">
<a href="http://localhost/testsite/product/whitening-fills/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
<img width="324" height="324" src="/ 300" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="/ 300 324w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-100x100.jpg 100w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-416x416.jpg 416w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-300x300.jpg 300w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-1024x1024.jpg 1024w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-150x150.jpg 150w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-768x768.jpg 768w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1.jpg 1500w" sizes="(max-width: 324px) 100vw, 324px">
<h2 class="woocommerce-loop-product__title">Product 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, iste error exercitationem quis, consectetur aspernatur architecto rem libero sunt repellat, dolorem, enim molestiae itaque. Officiis fuga ex illum distinctio reiciendis!</p>
</a>
<p class="font-weight-bold">39 €</p>
<a href="?add-to-cart=223" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="223" data-product_sku="" aria-label="Add “Elite Home Whitening Kit” to your cart" rel="nofollow">Add to cart</a>
</li>
<li class="product type-product post-64 status-publish instock product_cat-uncategorized has-post-thumbnail featured shipping-taxable purchasable product-type-simple">
<a href="http://localhost/testsite/product/test-product/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
<img width="324" height="324" src="/ 300" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="/ 300 324w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-100x100.jpg 100w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-416x416.jpg 416w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-300x300.jpg 300w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-1024x1024.jpg 1024w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-150x150.jpg 150w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-768x768.jpg 768w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1.jpg 1500w" sizes="(max-width: 324px) 100vw, 324px">
<h2 class="woocommerce-loop-product__title">Product 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</a>
<p class="font-weight-bold">40 €</p>
<a href="?add-to-cart=64" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="64" data-product_sku="" aria-label="Add “Smartphone Kit” to your cart" rel="nofollow">Add to cart</a>
</li>
<li class="product type-product post-279 status-publish last instock product_cat-uncategorized has-post-thumbnail featured shipping-taxable purchasable product-type-simple">
<a href="http://localhost/testsite/product/whitening-trays/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
<img width="324" height="324" src="/ 300" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="/ 300 324w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-100x100.jpg 100w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-416x416.jpg 416w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-300x300.jpg 300w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-1024x1024.jpg 1024w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-150x150.jpg 150w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1-768x768.jpg 768w, http://localhost/testsite/wp-content/uploads/2020/08/thumbnail_Mockup1.jpg 1500w" sizes="(max-width: 324px) 100vw, 324px">
<h2 class="woocommerce-loop-product__title">Product 3</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga error asperiores aperiam ratione quasi cum laborum tenetur consequatur. Maxime quas at sint consequatur minima alias numquam earum facere repellendus modi.</p>
</a>
<p class="font-weight-bold">40 €</p>
<a href="?add-to-cart=279" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="279" data-product_sku="" aria-label="Add “Whitening trays” to your cart" rel="nofollow">Add to cart</a>
</li>
</ul>
<div class="storefront-sorting"></div>
本文标签: woocommerce offtopicHow to make wocommerce shop products same heigt
版权声明:本文标题:woocommerce offtopic - How to make wocommerce shop products same heigt 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742136426a2422391.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论