• Resolved Mark Krieger

    (@markcanada)


    I am just starting with this great plugin.
    Is there a way to disable the “Add to Cart” button if not all required fields are selected? The same way it is disabled in a variable product if a selection isn’t made?
    That would be a bit more user-friendly than the error message and be having a more consistent UX.

    • This topic was modified 3 years, 8 months ago by Mark Krieger.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author ThemeHigh

    (@themehigh)

    Inorder to achieve your requirement, please add the below code in your child theme’s functions.php file.

    function disable_add_to_cart_till_required_fields_filled(){
        ?>
        <script type="text/javascript">
            (function($, window, document) {
                function may_disable_add_to_cart_button(){
                    var req_fields = $('.thwepof-input-field.validate-required');
                    var disabled = false;
                    
                    $.each(req_fields, function(index, elm){
                        var value = '';
                        var finput = $(elm);
    
                        var type = finput.getType();
                        var name = finput.prop('name');
    
                        if(type == 'radio'){
                          value = $("input[type=radio][name='"+name+"']:checked").val();
    
                        }else if(type == 'checkbox'){
                          value = $("input[type=checkbox][name='"+name+"']:checked").val();
    
                        }else{
                          value = finput.val();
                        }
                    
                        if(isEmpty(value)){
                            disabled = true;
                        }
                    });
                    $('.single_add_to_cart_button').prop("disabled", disabled);
                }
    
                $.fn.getType = function(){
                  try{
                    return this[0].tagName == "INPUT" ? this[0].type.toLowerCase() : this[0].tagName.toLowerCase(); 
                  }catch(err) {
                    return 'E001';
                  }
                }
    
                function isEmpty(str){ 
                  return (!str || 0 === str.length); 
                }
    
                $('.thwepof-input-field').on('keyup change', function(){
                    may_disable_add_to_cart_button();
                });
                may_disable_add_to_cart_button();
                
            }(window.jQuery, window, document));
        </script>
    <?php
    }
    add_action('wp_footer', 'disable_add_to_cart_till_required_fields_filled');

    Sometimes, while copying the code, the format of the double quotes and single quotes will get change. If you are facing any issue, please remove the double quotes and single quotes in the code and add it again.

    We hope this will help.

    Thank you!

    Thread Starter Mark Krieger

    (@markcanada)

    Genius.
    Thank you.

    Plugin Author ThemeHigh

    (@themehigh)

    Great!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Disable “Add to Cart”?’ is closed to new replies.