WordPress WooCommerce 如何实现选择规格后隐藏无关商品尺寸变体

你可以通过两种方式实现按装裱规格动态过滤可选尺寸的需求： #

方案1：自定义代码实现（无冗余功能，性能最优） #

将以下代码添加到你的WordPress主题/子主题的functions.php文件中即可生效：

// 后端校验变体可用性，防止非法提交
add_filter('woocommerce_available_variation', 'filter_variation_by_pack_spec', 10, 3);
function filter_variation_by_pack_spec($available, $product, $variation) {
    // 替换为你的实际属性slug：装裱规格对应pa_pack_spec，尺寸对应pa_canvas_size
    $pack_type = $variation->get_attribute('pa_pack_spec');
    $size_val = $variation->get_attribute('pa_canvas_size');

    // 1幅装、5幅装禁用xl尺寸
    if (in_array($pack_type, ['1幅装', '5幅装']) && $size_val === 'xl') {
        return false;
    }
    return $available;
}

// 前端动态隐藏不可选选项，优化用户体验
add_action('wp_footer', 'dynamic_variation_filter_script');
function dynamic_variation_filter_script() {
    // 仅在商品详情页加载脚本
    if (!is_product()) return;
?>
<script>
jQuery(function($) {
    // 监听装裱规格选择事件
    const packSelect = $('select[name="pa_pack_spec"]');
    const sizeSelect = $('select[name="pa_canvas_size"]');
    
    packSelect.on('change', function() {
        const selectedPack = $(this).val();
        // 先重置所有尺寸选项可见性
        sizeSelect.find('option').show();
        // 1幅装、5幅装隐藏xl选项
        if (['1幅装', '5幅装'].includes(selectedPack)) {
            sizeSelect.find('option[value="xl"]').hide();
            // 自动清空已选的xl值
            if (sizeSelect.val() === 'xl') sizeSelect.val('');
        }
    });
});
</script>
<?php
}

代码配置注意事项 #

• 替换代码中的属性slug为你站点的实际值：WooCommerce自定义属性默认前缀为pa_，可在后台「商品→属性」页面查看对应属性的slug
• 如果你的属性值使用英文slug（例如1幅装的slug为pack-1），需要将代码中的中文属性值替换为对应的slug

方案2：插件实现（适合无代码基础用户） #

使用WooCommerce官方适配的条件变体类插件，在插件可视化配置界面中为每个尺寸选项绑定显示条件：

• 给xl尺寸设置显示条件：仅当装裱规格选择「3幅装」时可见
• 其余尺寸无限制，所有装裱规格下均可见
  配置完成后保存即可生效，无需修改代码。

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