Woocommerce add to cart validation hide alert message

Question

I have woocommerce, single product page, the variational product with two variations. If some of them (or none) are not checked, the Add to cart button is disabled and I have an alert with the message. As I understood it is a function woocommerce_add_to_cart_validation. I need to disable the alert message and show this error message before cart quantity and Add to cart button. As I understood, this is a woocommerce_before_add_to_cart_button. How can I do this?

I found a few solutions on how to customize the behavior, but I didn't found how to hide an alert message.

UPDATE

I'm talking about JS alert which appears when you push Add to cart button but with invalid variation form. For example, I have a product with size and color. I chose color but forget to pick a size. Add to cart button is disabled, and if I push it the JS alert appears with the message, that I need to complete the form. I want to hide this JS alert pop-up and place custom error message before add_to_cart_button block.

NONAMA NONAMA · Accepted Answer · 2020-01-28T08:49:50

I investigated this issue further and found out, that this alert comming from /woocommerce/assets/js/frontend/add-to-cart-variation.js

I found this function

    VariationForm.prototype.onAddToCart = function( event ) {
    if ( $( this ).is('.disabled') ) {
        event.preventDefault();

        if ( $( this ).is('.wc-variation-is-unavailable') ) {
            window.alert( wc_add_to_cart_variation_params.i18n_unavailable_text );
        } else if ( $( this ).is('.wc-variation-selection-needed') ) {
            window.alert( wc_add_to_cart_variation_params.i18n_make_a_selection_text );
        }
    }
};

The second one is current alert. So I decided do not rewrite this prototype, but use simplier solution. I've already had a custom form in meta position of single product.

<script type="text/javascript">
jQuery( function($){
    $( '<span id="show_error">Please, fill all options!</span>' ).insertBefore( ".single_variation_wrap" );
    $('#show_error').hide();
    ...........

    $('.single_add_to_cart_button').on('click',function(e){
      if ( $( this ).is('.disabled') ) {
        e.preventDefault();
        if ( $( this ).is('.wc-variation-selection-needed') ) {
          $('#show_error').show();
          setTimeout(function () {
            $('#show_error').hide();
          }, 3000);
          return false;
        }
      }
    });


 });
</script>

So I added custom span block for error message and now, if I forget to fill all options in form, the error message appears for a three seconds. It's not the best solution, but it works pretty much good!

Woocommerce add to cart validation hide alert message

1 Answers