Disable “Add to Cart”/ “Buy Now” button at the bottom of the product page

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

  • Avatar: Aasim Pathan
    Aasim Pathan
    Participant
    June 26, 2024 at 16:45

    Hi,

    On a product page I’ve added multiple dropdowns for different variables, when i scroll below to see the description of the product, half of my screen is filled by the “add to cart” or Buy Now button and the options that are already visible at the top.

    see the first screenshot for reference

    So I have a couple of questions:
    1: I would prefer that the add to cart / buy now button at the bottom of the page to only display whatever the user has selected at the top without this whole list of items.
    2: if 1 above is not possible, how do I disable the bottom “add to cart” or Buy Now options? because I cannot find the option either in XStore or in Elementor to disable it.

    viewing the source of the button reveals it is labelled as follows
    et-wrap-columns flex align-items-center

    Files is visible for topic creator and
    support staff only.
    3 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 26, 2024 at 18:06

    Hello Aasim Pathan,

    Thank you for reaching out to us with your concerns regarding the product page layout on your website.

    Please provide URL of page from your screenshot.

    Best Regards,
    8Theme’s Team

    Avatar: Aasim Pathan
    Aasim Pathan
    Participant
    June 26, 2024 at 18:14

    Hi,

    Well I used ChatGPT and it told me to do the following which seems to have worked:
    Log in to your WordPress Dashboard.
    Navigate to Appearance > Customize.
    Open the Additional CSS section.
    Add the following custom CSS:

    /* Hide the sticky cart */
    .etheme-sticky-cart {
        display: none !important;
    }
    
    /* Hide the sticky panel */
    .etheme-sticky-panel {
        display: none !important;
    }
    
    /* Hide flex containers with specific alignments */
    .flex.align-items-center.container-width-inherit {
        display: none !important;
    }
    

    It was on all product pages so you could open any of the product links and it will show the “add to cart” button as you’d scroll
    .e.g. URL: https://refurbco.in/product/used-i9-14900k-asus-tuf-gaming-z790/

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 26, 2024 at 20:51

    Hello Aasim Pathan,

    We appreciate your prompt response.

    You can reduce this code https://prnt.sc/zYcFM4fOW8Pw to

    .single-product .etheme-sticky-panel {
        display: none !important;
    }

    or remove custom CSS code, edit page template https://www.8theme.com/documentation/xstore/xstore-builders/xstore-single-product-builder-with-elementor/, and remove the Sticky panel element.

    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.

    Warm Regards,
    The 8Theme Team

  • Viewing 4 results - 1 through 4 (of 4 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.