Return to previous page

Keep prices vertically aligned when product name text is longer for some products

This topic has 2 replies, 2 voices, and was last updated 1 years, 3 months ago ago by Tony Rodriguez

Adrian Popa

Participant

September 17, 2023 at 22:17

Hello,

On the category page, how to make the prices vertically align to each other when product title is longer for some products?

https://ibb.co/XZ1dhrp

Please, contact administrator
for this information.

#367709 Copied Theme version: 9.1.14

1 Answer
Tony Rodriguez

Support staff

September 18, 2023 at 05:56
Hello, @Adrian Popa,

Thank you for using our theme and for contacting us.

To address your concern, we kindly suggest that you disable the Masonry option. You can do this by navigating to XStore > Theme Options > WooCommerce > Shop > Shop page Layout. Please refer to the attached image for guidance.https://imgur.com/BsCfdCt

Please proceed by copying and pasting the subsequent CSS code into the designated location: Xstore > Theme Options > Theme Custom CSS > Global CSS. Once completed, ensure to publish it.
```
.main-products-loop .product, .products-loop .product, .carousel-area .product-slide .product {
    display: flex;
    justify-content: center;
}
.products-loop .ajax-content, .products-loop {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
}
.content-product {
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    flex: 1;
}
.content-product .quantity-wrapper {
    margin-right: auto;
    margin-left: auto;
}
.swiper-container {
    display: flex;
    align-items: stretch;
}
.product-slide .product {
    display: flex;
    height: 100%;
}
.swiper-wrapper {
    height: auto;
}
```
Best Regards,
8Theme’s Team
#367720 Copied
Tagged: long text adjustment, price alignment, product name alignment, vertical price display, woocommerce product layout, woocommerce themes, wordpress themes
Viewing 2 results - 1 through 2 (of 2 total)