WooCommerce：针对特定Product ID实现Add to Cart按钮条件启用

要实现仅针对指定Product ID，让"Add to Cart"按钮保持禁用，直到所有必填自定义变体单选按钮选中、对应文本字段填写完成，可按以下方式调整代码：

核心优化点 #

• 增加特定产品ID的判断逻辑，确保代码只在目标产品页面生效
• 同时监听单选按钮的change事件和文本字段的keyup事件
• 修复验证逻辑，确保所有必填字段都满足要求才启用按钮

修改后的完整代码 #

<?php
// 仅在指定WooCommerce产品页面添加JS脚本
add_action('wp_footer', 'restrict_add_to_cart_for_specific_product');
function restrict_add_to_cart_for_specific_product()
{
    // 替换为你的目标产品ID
    $target_product_id = 123;
    // 仅在目标产品页面生效
    if (!is_product() || get_the_ID() !== $target_product_id) {
        return;
    }
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // 初始状态禁用添加购物车按钮
            const addToCartBtn = $(".single_add_to_cart_button");
            addToCartBtn.prop('disabled', true);

            // 定义需要验证的元素：自定义单选按钮组和文本字段
            // 替换为你的单选按钮选择器（比如[name="your-radio-group"]）和文本字段ID
            const requiredRadios = $('input[name="custom-variant-radio"]:required');
            const requiredInputs = $('#fpf_6796689, #fpf_6744940, #fpf_3566324');

            // 验证所有必填字段是否符合要求
            function validateAllFields() {
                // 检查单选按钮是否有选中项
                const radiosValid = requiredRadios.length === 0 || requiredRadios.is(':checked');
                // 检查所有文本字段是否有内容
                const inputsValid = requiredInputs.length === 0 || requiredInputs.toArray().every(input => $(input).val().trim().length > 0);
                
                return radiosValid && inputsValid;
            }

            // 监听单选按钮切换和文本字段输入/失焦事件
            requiredRadios.on('change', updateButtonState);
            requiredInputs.on('keyup blur', updateButtonState);

            // 更新按钮禁用状态
            function updateButtonState() {
                addToCartBtn.prop('disabled', !validateAllFields());
            }
        });
    </script>
    <?php
};
?>

使用说明 #

1. 替换代码中的$target_product_id = 123为你需要生效的产品ID
2. 将requiredRadios的选择器input[name="custom-variant-radio"]:required替换为你实际的自定义变体单选按钮组选择器
3. 确保requiredInputs里的ID和你页面上的必填文本字段ID完全一致

逻辑说明 #

• 页面加载完成后自动禁用"Add to Cart"按钮
• 当单选按钮切换、文本字段输入内容或失焦时，触发验证逻辑
• 只有当所有单选按钮已选中、所有文本字段已填写非空内容时，才启用添加购物车按钮

内容的提问来源于stack exchange，提问作者wikis