WooCommerce如何通过自定义字段控制不同变体的add_to_cart按钮显隐

整个实现分为后端注入自定义字段到变体数据、前端监听变体切换控制按钮状态两部分，全程不需要修改WooCommerce核心文件。

第一步：将自定义字段加入变体AJAX返回数据 #

将以下代码添加到站点主题的functions.php文件或者自定义功能插件中：

add_filter( 'woocommerce_available_variation', 'add_purchasable_field_to_variation_data', 10, 3 );
function add_purchasable_field_to_variation_data( $variation_data, $product, $variation ) {
    // 获取自定义复选框值，勾选则返回true，未勾选返回false
    $variation_data['purchasable_variation'] = get_post_meta( $variation->get_id(), 'purchasable_variation', true ) ? true : false;
    return $variation_data;
}

第二步：添加前端JS控制加入购物车按钮显隐 #

将以下JS代码添加到产品页的自定义脚本区域，或者通过wp_enqueue_script挂载到产品页资源中：

jQuery( document ).ready( function( $ ) {
    // 缓存加入购物车按钮对象，不同主题选择器可能不同，可根据实际情况调整
    const $add_to_cart_button = $( '.single_add_to_cart_button' );
    // 初始状态先隐藏按钮，等用户选中变体后再判断显隐
    $add_to_cart_button.hide();

    // 监听变体选中事件
    $( '.variations_form' ).on( 'found_variation', function( event, variation ) {
        if ( variation.purchasable_variation ) {
            $add_to_cart_button.show();
            // 清空之前的不可购买提示
            $( '.woocommerce-variation-description' ).empty();
        } else {
            $add_to_cart_button.hide();
            // 可选：展示不可购买提示，不需要可以删除下面一行
            $( '.woocommerce-variation-description' ).html('<p>当前选择的规格暂不支持购买，请选择其他规格</p>');
        }
    } );

    // 监听变体取消选择事件（用户未选全所有属性的情况）
    $( '.variations_form' ).on( 'reset_data', function() {
        $add_to_cart_button.hide();
        $( '.woocommerce-variation-description' ).empty();
    } );
} );

注意事项 #

• 如果你的自定义复选框规则是勾选代表不可购买，把JS里的判断条件variation.purchasable_variation改成!variation.purchasable_variation即可
• 部分主题的加入购物车按钮选择器可能不是.single_add_to_cart_button，可通过浏览器开发者工具检查按钮的类名后替换
• 代码添加前建议先备份站点代码，避免语法错误导致站点异常

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