Return to previous page

Product Slider / Add to cart with price and name button aligned without the staircase effect

This topic has 9 replies, 3 voices, and was last updated 8 months, 1 weeks ago ago by Andrew Mitchell

Kombajn88

Participant

March 12, 2024 at 22:34
Hello,
Thank you in advance for your help!

I tried to use the code from this topic, but unfortunately it didn’t work, the problem is identical to the topic – steps with title, price, product name, picture

I would like each (add to cart, product name, price, category) to be in the same row regardless of the photo. The problem exists in sliders and carousels

topic: https://www.8theme.com/topic/product-slider-add-to-cart-button-aligned-without-the-staircase-effect/

css from topic:
```
.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;
}
```
Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.
#386639 Copied Theme version: 9.2.9
8 Answers
Luca Rossi

Support staff

March 13, 2024 at 10:34
Dear @Kombajn88,

We hope this message finds you well.

We are pleased to inform you that we have implemented the following custom CSS to enhance the presentation of the product grid on the homepage:
```
.home .etheme-product-grid-title {
    min-height: 60px;
    display: flex;
    align-items: center;
}

.home .etheme-product-grid-image img {
    min-height: 173px;
    width: auto;
}
```
This adjustment ensures that the products are now properly aligned. We kindly request that you review the changes at your earliest convenience.

For your reference, here is a screenshot of the updated layout: https://prnt.sc/HDpVCzQ-GLG4

Should you have any further questions or require additional assistance, please do not hesitate to contact us.

Best regards,
The 8Theme Team
#386695 Copied
Kombajn88

Participant

March 15, 2024 at 13:56

Thank you very much, that’s exactly what I meant!

I can see the css is global, but it doesn’t work on the give page in private content unfortunately. I tried adding it individually to the page, but it doesn’t do anything. Strange because it is the same widget on both pages.

Please contact administrator
for this information.

#387099 Copied

Kombajn88

Participant

March 15, 2024 at 14:03

And also if I could ask to do the same in the store

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#387100 Copied
Luca Rossi

Support staff

March 15, 2024 at 14:32
Hi @Kombajn88,

We’ve updated the custom CSS codes to this:
```
.etheme-product-grid-title {
    min-height: 60px;
    display: flex;
    align-items: center;
}

.etheme-product-grid-image img,
.content-product .product-content-image img {
    min-height: 175px;
    width: auto;
}

.products-page-cats {
    min-height: 65px;
}
```
Can you please check again?

Best regards,
The 8Theme Team
#387106 Copied
Kombajn88

Participant

March 15, 2024 at 19:11

It works almost perfect, unfortunately the product photos stretch a little strangely (vertical I think)

/on the phone view even stronger

Files is visible for topic creator and
support staff only.

#387155 Copied
Luca Rossi

Support staff

March 16, 2024 at 07:19
Dear @Kombajn88,

We would like to advise you to maintain a consistent image size across all products. We recommend using images with dimensions of 1000×1000 pixels.

Furthermore, please ensure to delete the following line from your custom CSS code:
```
min-height: 175px;
```
Should you require any further assistance, please do not hesitate to contact us.

Best Regards,
The 8Theme Team
#387176 Copied
Kombajn88

Participant

March 16, 2024 at 18:29

You guys are awsome, thanks a lot!

#387197 Copied

Andrew Mitchell

Support staff

March 16, 2024 at 18:29

Dear Kombajn88,

In the spirit of gratitude, we want to express our appreciation for your trust in our products. As a valued customer, your experience matters greatly. Would you consider sharing it by giving our theme a deserving 5-star rating on ThemeForest?

Click here to share your thoughts: https://themeforest.net/downloads

Being part of our community means a lot, and your feedback contributes immensely.

Best Regards,
The 8Theme Team

#387198 Copied
Tagged: add to cart button alignment, customizable wordpress themes, efficient woocommerce themes, no staircase effect woocommerce, price name button woocommerce, product slider themes, woocommerce wordpress themes
Viewing 9 results - 1 through 9 (of 9 total)

The issue related to '‘Product Slider / Add to cart with price and name button aligned without the staircase effect’' has been successfully resolved, and the topic is now closed for further responses

Product Slider / Add to cart with price and name button aligned without the staircase effect

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection