Return to previous page

WooCommerce Product widget, line/height limitation

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

NelsonTsai

Participant

March 30, 2023 at 06:21

Hello,

Two questions about xstore ‘product’ widget.
(1) The normal product name occupied only one-line. But in some cases, if the product name extends to 2+ lines, the inner surrounding rectangle will expand out of bounding area, make the shadow effect broken.
Except to shorten the product name, any other solutions to expand the bounding area in height?
(2) product widget show ‘deprecated’, should I use ‘product carousel’ instead? Is ‘product’ widget separated to grid/masonry/carousel/…?

Regards,

Please, contact administrator
for this information.

#351692 Copied Theme version: 9.0.4

2 Answers
Rose Tyler

Support staff

March 30, 2023 at 09:58
Hello, NelsonTsai,

Thank you for contacting us and for using XStore.

1/ Add the next code in Theem options > Theem custom CSS:
```
.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;
}
.elementor-element.elementor-element-b7ea95f .swiper-wrapper {
    margin-bottom: 10px;
}
```
2/ It would be better to use Products carousel or Products grid new elements depending on your needs.

If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

Kind Regards,
8theme team
#351729 Copied
NelsonTsai

Participant

March 30, 2023 at 11:04

Hello,

Thanks for your tips and tricks, it works well.

regards,

#351742 Copied
Tagged: best selling, height, limitation, line, product, themes, widget, woocommerce
Viewing 3 results - 1 through 3 (of 3 total)

The issue related to '‘WooCommerce Product widget, line/height limitation’' has been successfully resolved, and the topic is now closed for further responses

WooCommerce Product widget, line/height limitation

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection