Solved

Customizing the add to cart button

  • 7 November 2021
  • 4 replies
  • 90 views

Userlevel 3
Badge +1

Please tell me, I have set separate styles for the "add to cart" button for a product that has already been added to the cart.
Also, with the help of code, I changed the text on the "add to cart" button for a product that has already been added to the cart.
My problem is that after refreshing the page, the styles I set and the text on the button stop working. How can I make it so that after refreshing the page, the styles I set and the text on the button are preserved?

icon

Best answer by Supriya Kanjilal 23 November 2021, 08:27

View original

4 replies

Userlevel 5
Badge +3

Hi @Evgeny Sviridov 

Please provide some screenshot / screen recording of the issue and also the code you use for that.

if possible please provide the URL for inspection.

Userlevel 3
Badge +1

To style the buttons, I added the following CSS:

a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.added {
background-color: # CF141C! important;
border-color: # CF141C! important;
}

In the theme settings - additional styles.

In order to change the text on the button without reloading the page, I use the following code:

 <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
$ (function () {
  jQuery (document) .ajaxComplete (function () {
    var element = jQuery ("a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.added");
    element.text ("In the basket");
    setTimeout (function () {
        element.text ("In the basket");
    }, 1000);
  });
});
</script>

Using the "Custom CSS and JS" plugin, as you recommended for me in this thread:

https://forum.elementor.com/development-24/customizing-the-add-to-cart-button-8137

Here is a link to the page to check:

https://ndtrade.sviridovstudio.ru/

This is what the site looks like before the page is reloaded:

This is how the site looks after reloading the page:

 

Userlevel 5
Badge +3

Hi @Evgeny Sviridov 

Nothing Wrong with You :thumbsup_tone4:

in Woocommerce default function, when you refreshing the page, the Added to Cart mark changes to Add to cart again.

you may check it on the Woocommerse official theme:

https://www.cssigniter.com/woocommerce/miniature/

 

in Your case Button style does not change.

After refreshing the page, as per woocommerse default behavior It changes only В корзине to В корзину

 

Userlevel 3
Badge +1

Supriya, thanks a lot!
You helped me figure out how these buttons work.

Reply