Return to previous page

Add to cart button alignment on products carousel

This topic has 8 replies, 2 voices, and was last updated 5 months ago ago by Rose Tyler

TheOne

Participant

December 5, 2023 at 10:31

Hello,

I’ve added two product carousels on my homepage. I noticed that some of the add to cart buttons are not centered. It’s the same thing on both carousels.

Picture with admin access in private.

Thank you,

Please, contact administrator
for this information.

#375713 Copied Theme version: 9.2.4 WooCommerce version: 8.3.1

7 Answers

Rose Tyler

Support staff

December 5, 2023 at 12:08

Hello, TheOne,

We appreciate you contacting us regarding the issue you have encountered.

To assist you effectively, we kindly ask that you verify whether the problem originates from any custom code you may have implemented. Please navigate to Theme Options, then to Theme Custom CSS, and finally to Global. We suggest you remove sections of the code incrementally to isolate the problematic segment. Upon identifying the code causing the issue, please proceed to make the necessary adjustments.

Should you require any further assistance, please do not hesitate to reach out.

Kind Regards,
8theme team

#375739 Copied
TheOne

Participant

December 5, 2023 at 14:29
Hello,

All the codes for the allignment of the products came from you:
https://www.8theme.com/topic/add-to-cart-button-align-vertically-in-archive-and-module/#post-361560

I found out that the problem is caused by this:

.elementor-widget-etheme_product_carousel .swiper-slide .product {
display: flex;
flex-wrap: wrap;
height: 100%;
}

Allignment of the products are for:
1. Product sliders
2. Related products on single product page
3. Archive page

I’m using this codes:
```
/*Products allignment */
.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;
}
.content-product .product-image-wrapper {
    margin-bottom: 10px;
}
.products-grid .product-excerpt {
    min-height: 42px;
}

/* Poravnava product carousel */
.elementor-widget-etheme_product_carousel .swiper-container {
    display: flex;
    align-items: stretch;
}
.elementor-widget-etheme_product_carousel .swiper-slide  .product {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}
.elementor-widget-etheme_product_carousel .swiper-slide .etheme-product-grid-content {
    align-self: flex-end;
}

/* Home page sliders*/
.products-slider .content-product {
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    flex: 1;
}
.products-slider.swiper-container {
    display: flex;
    align-items: stretch;
}
.product-slide .product {
    display: flex;
    height: 100%;
}
.products-slider .swiper-wrapper {
    height: auto;
}

/* Related products on single product page*/
.elementor-widget-etheme_product_grid .etheme-product-grid-item {
    display: flex;
    flex-wrap: wrap;
}
```
#375770 Copied
Rose Tyler

Support staff

December 5, 2023 at 15:34

Hello, TheOne,

We are grateful for your swift reply.

We kindly request that you review the recent addition to the code at your earliest convenience. The relevant line can be found here: https://prnt.sc/EOc8L7h4sHXd

Kind Regards,
8theme team

#375778 Copied

TheOne

Participant

December 5, 2023 at 16:16

Hello,

Thank you, the buttons on home page are now alligned, but since i had to replace the block for related products on single product page, like you suggested here:

https://www.8theme.com/topic/elementor-related-products-in-single-product-and-stock-element/#post-375776

the related products on single product page are not alligned: picture in private

Please contact administrator
for this information.

#375789 Copied

Rose Tyler

Support staff

December 5, 2023 at 16:45

Hello, TheOne,

We would like to inform you that we have updated the following code: https://prnt.sc/QFFAZhn3__ws to a new one: https://prnt.sc/WDga5cHx2n-A. We kindly request that you review the result at your earliest convenience.

Kind Regards,
8theme team

#375793 Copied

TheOne

Participant

December 6, 2023 at 21:15

Hello,

Works ok now. Can you attach the allign code also for grid products module (non sliders) – for future projects?

Thank you,

#375959 Copied

Rose Tyler

Support staff

December 7, 2023 at 08:01

Hello, TheOne,

Thank you for your response.

Enclosed herein is a foundational code – https://www.8theme.com/topic/product-card-how-to-make-an-equilibrium/#post-375059
that may vary based on the specific requirements of the project, such as the content of the website or occasionally due to plugins that have been installed.

Should you have any further inquiries or require assistance, please feel free to contact us. Our customer support team is readily available to provide you with the necessary help.

Kind Regards,
8theme team

#375995 Copied
Tagged: add to cart button alignment, customize add to cart button, enhance ecommerce web design, improve online shopping experience, optimize woocommerce store, woocommerce products carousel, wordpress woocommerce themes
Viewing 8 results - 1 through 8 (of 8 total)