Equal height product cards
User
<style>
.wc-category-slider .product-card {
text-align: center;
}
.wc-category-slider .product-card img {
max-width: 100%;
height: 200px;
width: 200px;
object-fit: cover;
}
.product-details {
padding: 24px 17px 0 17px;
display: flex
;
gap:16px;
flex-direction: column;
align-items: center;
}
.wc-category-slider .product-card h2.woocommerce-loop-product__title {
font-size: 14px;
font-weight: 600;
color: #0A4C4D;
margin:0;
}
.wc-category-slider .price {
color: #052626;
font-weight: 400;
font-size: 14px;
}
.wc-category-slider .star-rating--inline {
display: inline-block;
min-height: 16px;
vertical-align: middle;
margin: 0;
}
.wc-category-slider .button.pick-button {
background: transparent;
border: 2px solid #0F7173;
color: #0F7173;
padding: 8px 14px;
border-radius: 25px !important;
font-weight: 500 !important;
transition: all 0.3s ease;
font-size: 12px;
}
.wc-category-slider .button.pick-button:hover {
background-color: #007c91;
color: #fff;
}
.product-detail-inner {
display: flex
;
gap: 8px;
flex-direction: column;
justify-content: center;
align-items: center;
}
.product-detail-inner .span.amount{
color: #052626;
font-weight: 400;
font-size: 14px;
}
</style><script>
jQuery(document).ready(function($){
$('.wc-category-slider').owlCarousel({
items: 4,
loop: true,
margin: 20,
nav: true,
dots: false,
responsive:{
0:{ items:1 },
600:{ items:2 },
1000:{ items:4 }
}
});
});
</script>Assistant
To make **all `.product-card` heights the same**, regardless of content length (like title or price), you can set a **fixed height** or use **flexbox with equal height behavior**. Here's the minimal change to your CSS to ensure equal heights across product cards:
### ✅ Just add this inside your existing “ block:
.wc-category-slider .product-card {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 360px; /* Or adjust to the height you need */
}### 📌 Optional (for consistent `.item` height as well):
To ensure `.item` also adapts uniformly:
.wc-category-slider .item {
height: 100%;
}These lines will ensure all product cards in your Owl Carousel stay the same height visually, even if the content varies slightly. Let me know if you want the height to be dynamically matched to the tallest item instead.