Add to cart - button should be disabled

Question

To clarify things a bit visit http://adorn.edge-themes.com/product/variable-bag/ and simply click on Add to cart. The text gets changed to "Adding to cart" even if it could not be added to cart.

I have a variable product, where the customer needs to select a few options (clothing size, clothing color, ...) before adding this product to cart. If I do not select any of those I get a warning message saying "Please select some product options". This is correct and expected. The problem is that the add to cart button changes to "Adding to cart" and stays that even after the warning message. I'd expect it to be reverted back to "Add to cart" text.

I'm guessing I have to find a js file that sets the text after clicking on the button. Any ideas where to start, please?

Answer 1

This behavior is being applied by your theme's javascript.

There's a global variable being set in the head of the page by the theme:

<script type='text/javascript'>
/* <![CDATA[ */
var edgeGlobalVars = {"vars":{"edgeAddForAdminBar":0,"edgeElementAppearAmount":-100,"edgeAddingToCartLabel":"Adding to Cart...","edgeTopBarHeight":0,"edgeStickyHeaderHeight":0,"edgeStickyHeaderTransparencyHeight":60,"edgeLogoAreaHeight":0,"edgeMenuAreaHeight":96,"edgeMobileHeaderHeight":60}};
var edgePerPageVars = {"vars":{"edgeStickyScrollAmount":0,"edgeHeaderTransparencyHeight":0}};
/* ]]> */
</script>

and a call to a minified/aggregate compiled theme js file:

<script type='text/javascript' src='http://adorn.edge-themes.com/wp-content/themes/adorn/assets/js/modules.min.js?ver=4.7.5'></script>

which includes a click handler to change the text on the button on click:

function h()
{
    var a = e( ".add_to_cart_button, .single_add_to_cart_button" );
    a.length && a.click( function ()
    {
        e( this ).text( edgeGlobalVars.vars.edgeAddingToCartLabel )
    } )
}

Recommended steps:

• Check the main theme for a setting to disable/override this, keeping the text static, or override in a child theme.
• Add your own javascript in your child theme or custom plugin to apply the additional conditional checks to see if all the input parameters are valid before updating button text on click.

---

If you're wondering how I came to determine this:

1. I inspected the element looking for any class changes on state change (for which there were none);
2. searched the vanilla woocommerce plugin for the text "Adding to Cart" in any javascript files (also none), and then
3. searched the rendered source code of the page for the text "Adding to Cart", which led me to to the edgeGlobalVars array.