"Added to Cart" message appears on wrong position (Elementor)

Solved3 replies2 participantsUpdated by Rose Tyler

  • Avatar: Manu G
    Manu G
    Participant

    We created a Single Page using Elementor, in order to display a category of products a certain way we envisioned.

    However, the “added to cart” message appears on the top of the page, overlapping with the header.

    Instead, we would want it to behave as it does in the rest of the categories and appear in the bottom of the single page, right before the footer.

    Please, contact administrator
    for this information.

    3 Answers

    Avatar: Rose Tyler
    Rose Tyler
    Support staff

    Hello,

    Try to add the next code in Theme Options > Theme custom CSS:

    .single-product .woocommerce-notices-wrapper {
        position: fixed;
        bottom: 0;
        z-index: 3;
        margin-bottom: -2px;
        left: 0;
        right: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 3s ease-in-out;
        animation: et-woo-fadeIn 7s ease-in-out, et-toTop 1s ease-in-out;
    }

    Regards

    Avatar: Manu G
    Manu G
    Participant

    Thank you for that snippet. It worked, I just had to add it in Theme Options > Theme custom CSS > Global CSS.

    However, the green box that contains the message does not stretch out full-screen. Is there a fix for that?

    Avatar: Rose Tyler
    Rose Tyler
    Support staff

    Add this code also:

    .single-product .woocommerce-notices-wrapper ul {
        width: 100% !important;
        margin-bottom: 0px !important;
        padding: 1.12em 1.2em !important;
    }

    Regards

The issue related to '‘"Added to Cart" message appears on wrong position (Elementor)’' has been successfully resolved, and the topic is now closed for further responses