I'm newbie in programming, so this confuses me.

How to keep the "Add to Cart" button disabled for a specific product ID until all the required custom variation radio buttons are clicked and all the text field quantities for that custom variation are filled out?

From what I've found on my research, below's medthod is the easiest way to integrate into WordPress. I want it to specifically target a product ID.

<?php

// It adds a JS script only on the WooCommerce product page

add_action('wp_footer', 'add_script_to_product_page');
function add_script_to_product_page()
{

    // Only on the product page.
    if (!is_product()) {
        return;
    }


    // disable add to cart button until required fields are filled out

    <script type="text/javascript">
        jQuery(".single_add_to_cart_button").prop('disabled', true);

        var toValidate = jQuery('#fpf_6796689, #fpf_6744940, #fpf_3566324'),
            valid = false;
        toValidate.keyup(function() {
            if (jQuery(this).val().length > 0) {
                jQuery(this).data('valid', true);
            } else {
                jQuery(this).data('valid', false);
            }
            toValidate.each(function() {
                if (jQuery(this).data('valid') == true) {
                    valid = true;
                } else {
                    valid = false;
                }
            });
            if (valid === true) {

                jQuery(".single_add_to_cart_button").prop('disabled', false);
            } else {

                jQuery(".single_add_to_cart_button").prop('disabled', true);
            }
        });
    </script>

};

CodePudding user response：

add_action('wp_footer', 'add_script_to_product_page');
function add_script_to_product_page() {
  if (!is_product()) return;  //execute only if we are on product page

  global $product;
  $product_id = $product->get_id(); // what is the current product ID
  $product_ids = array('10','20') // Products to which we want to load script
  if(in_array($product_id,$product_ids)) {
     load_single_product_script();
  } 
}

function load_single_product_script() {
?>
 <script type="text/javascript">
        jQuery(".single_add_to_cart_button").prop('disabled', true);

        var toValidate = jQuery('#fpf_6796689, #fpf_6744940, #fpf_3566324'),
            valid = false;
        toValidate.keyup(function() {
            if (jQuery(this).val().length > 0) {
                jQuery(this).data('valid', true);
            } else {
                jQuery(this).data('valid', false);
            }
            toValidate.each(function() {
                if (jQuery(this).data('valid') == true) {
                    valid = true;
                } else {
                    valid = false;
                }
            });
            if (valid === true) {

                jQuery(".single_add_to_cart_button").prop('disabled', false);
            } else {

                jQuery(".single_add_to_cart_button").prop('disabled', true);
            }
        });
    </script>
<?php
}