Add to cart button alignment on products carousel

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

  • Avatar: TheOne
    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.
    7 Answers
    Avatar: Rose Tyler
    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

    Avatar: TheOne
    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;
    }
    Avatar: Rose Tyler
    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

    Avatar: TheOne
    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.
    Avatar: Rose Tyler
    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

    Avatar: TheOne
    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,

    Avatar: Rose Tyler
    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

  • Viewing 8 results - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.