AJAX Add to Cart + Change Cart Notification Bar Color

This topic has 7 replies, 2 voices, and was last updated 1 hours ago ago by khurram virk

  • Avatar: khurram virk
    khurram virk
    Participant
    June 20, 2025 at 07:52

    Dear Sir,

    Good day to you!

    I’ve set up a WordPress Development product on my website where each pricing plan (Bronze, Silver, Gold) is displayed inside a pricing table. Each table has a “GET STARTED” button to add the selected plan to the cart.

    When clicking the “GET STARTED” button, the page reloads before adding the product to the cart. I want to achieve this via AJAX, so the product is added without reloading the page.

    After the product is added, a green horizontal notification bar appears at the top. I’d like to change its color from green to blue to match the website theme.

    🔗 Here is a video showing the issue:
    https://drive.google.com/file/d/1JrnGc3A_C8ewXfDFT8Trq61MgaRqg1Sw/view?usp=sharing

    🔗 Here is the product page:
    https://skysolmedia.com/product/wordpress-development/

    Could you please guide me on:

    How to make the “GET STARTED” (Add to Cart) button work with AJAX.

    How to change the color of the success message bar to blue.

    Thank you.

    6 Answers
    Avatar: Justin
    Luca Rossi
    Support staff
    June 20, 2025 at 09:53

    Hello @khurram virk,

    Thank you for reaching out to us.

    We appreciate the detailed explanation and the video reference you provided. Based on your request, please find our guidance below:

    1. Enabling AJAX for the “GET STARTED” (Add to Cart) Button:

    To make the “GET STARTED” button add the product to the cart via AJAX without reloading the page, please ensure the following:

    – The product should be a Simple Product (not a variable or grouped product).
    – The button should have the class add_to_cart_button and include the data-product_id attribute.

    If you are using a custom pricing table or a page builder, you may need to manually add the appropriate WooCommerce classes and data attributes. Here is an example of the correct HTML structure:

       <a href="/?add-to-cart=7513&variation_id=7565&quantity=1" data-quantity="1" 
       class="button product_type_simple add_to_cart_button ajax_add_to_cart" 
       data-product_id="PRODUCT_ID" 
       rel="nofollow">GET STARTED</a>

    Please replace PRODUCT_ID with the actual ID of your product.

    Additionally, ensure that AJAX add to cart is enabled in your theme. If you are using one of our themes, you can check this setting under Theme Options > WooCommerce > Shop > Enable AJAX Add To Cart.

    2. Changing the Color of the Success Message Bar:

    To change the color of the success notification bar from green to blue, you can add the following custom CSS to your site:

    .woocommerce-message[role="alert"] {
        background-color: #0A3DDC;
    }

    You can add this CSS under Appearance > Customize > Additional CSS.

    If you are using a child theme, you may also add it to your child theme’s style.css file.

    Should you need further assistance or if the issue persists, please do not hesitate to let us know. We are here to help.

    Best Regards,
    8Theme’s Team

    Avatar: khurram virk
    khurram virk
    Participant
    July 1, 2025 at 12:09

    Dear Sir,

    Thank you for your detailed response.

    I tried implementing the AJAX Add to Cart code as you suggested, but unfortunately, it’s not working as expected—it redirects to the homepage when I click the button instead of adding the product via AJAX.

    I have added the code at the end of the product page. Here is the link and a screenshot for your reference:
    🔗 Product Page: https://skysolmedia.com/product/wordpress-development/
    🖼️ Screenshot: https://snipboard.io/j7IZ6c.jpg

    Additionally, I would like to place the button code below the pricing table element’s footer so that it stays visually aligned with the pricing table. Here is a screenshot showing where I want it to appear:
    🖼️ Screenshot: https://snipboard.io/AeJ3yg.jpg

    Could you please guide me on how to fix the redirect issue and ensure the button is placed correctly in the pricing table footer?

    Thank you.

    Avatar: Justin
    Luca Rossi
    Support staff
    July 1, 2025 at 17:03

    Dear @khurram virk,

    Could you please provide temporary wp-admin access? We need to check your settings.

    To grant WP-Admin access, please proceed to create a new user account with an administrator role through your WordPress Dashboard. Once the account is established, you may securely transmit the username and password to us via the Private Content section designated for this purpose.

    Thank you!

    Avatar: khurram virk
    khurram virk
    Participant
    July 1, 2025 at 21:46

    Dear Sir,

    Thank you for your response.

    I’ve shared the login credentials in the Private Content Area (PCA) for your review.

    Please let me know if you need anything else.

    Thank you.

    Content is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    July 2, 2025 at 07:54

    Dear @Khurram Virk,

    We hope this message finds you well.

    1. We would like to inform you that we have updated the HTML code for the button as follows:

    
    <a href="/?add-to-cart=7513&variation_id=7565&quantity=1" data-quantity="1" 
       class="button product_type_simple add_to_cart_button ajax_add_to_cart" 
       data-product_id="7565" 
       rel="nofollow">GET STARTED</a>
    

    We are pleased to report that it is now functioning correctly.

    2. Additionally, we recommend creating a container with three columns and placing three buttons within it, positioned below the pricing table element. For your reference, please see the following screenshot:
    https://prnt.sc/-ldoGEl-w3VR

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

    Best regards,
    The 8Theme Team

    Avatar: khurram virk
    khurram virk
    Participant
    July 4, 2025 at 10:05

    Thanks for the support! My topic “AJAX Add to Cart + Change Cart Notification Bar Color” has been successfully resolved.

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

The issue related to '‘AJAX Add to Cart + Change Cart Notification Bar Color’' has been successfully resolved, and the topic is now closed for further responses

Helpful Topics

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