WooCommerce中隐藏虚拟产品变体的数量按钮
解决WooCommerce可变产品指定变体移除数量按钮的方法
方法一:PHP+JavaScript+CSS精准控制(适配动态变体切换)
1. 先给变体做识别标记
确保你的图书变体都有明确的区分属性,比如设置一个「产品格式」属性,值为「平装本」「电子书」「有声书」;或者在变体的自定义字段里加个digital_variant字段,值设为yes(给电子书、有声书变体用)。
2. 用PHP把变体标识传到前端
在主题的functions.php文件里加这段代码,它会把数字产品的标记嵌入到变体数据中:
add_filter( 'woocommerce_available_variation', 'attach_digital_variant_flag', 10, 3 ); function attach_digital_variant_flag( $variation_data, $product, $variation ) { // 这里的pa_format是你属性的slug,换成自己实际用的 $format_attr = $variation->get_attribute('pa_format'); if ( $format_attr == '电子书' || $format_attr == '有声书' ) { $variation_data['is_digital'] = true; } else { $variation_data['is_digital'] = false; } return $variation_data; }
3. 用JS监听变体切换,控制数量按钮
在主题的自定义JS文件或者WooCommerce的自定义JS区域加这段代码:
jQuery(document).ready(function($) { // 页面加载时先检查默认变体 toggleQuantityDisplay(); // 监听变体切换事件 $('form.variations_form').on('show_variation', function(event, variation) { toggleQuantityDisplay(variation); }); // 未选中变体时重置显示 $('form.variations_form').on('hide_variation', function() { $('.quantity').show(); }); function toggleQuantityDisplay(variation) { if (variation && variation.is_digital) { $('.quantity').hide(); } else { $('.quantity').show(); } } });
4. 可选:CSS强化隐藏效果
如果需要更彻底的隐藏,在主题自定义CSS里加:
.quantity { transition: all 0.2s ease; } .quantity.hidden { display: none !important; }
也可以直接让JS给.quantity添加/移除hidden类,替换上面JS里的hide()/show()
方法二:通过变体ID固定数量(适合变体ID不变的场景)
如果你的电子书、有声书变体ID是固定的,直接用这段PHP把它们的数量锁死为1,变相移除数量按钮:
add_filter( 'woocommerce_quantity_input_args', 'lock_digital_variant_quantity', 10, 2 ); function lock_digital_variant_quantity( $args, $product ) { // 获取当前选中的变体ID $current_variation_id = isset( $_REQUEST['variation_id'] ) ? absint( $_REQUEST['variation_id'] ) : 0; // 替换成你的电子书、有声书变体ID列表 $digital_variation_ids = array( 123, 456, 789 ); if ( in_array( $current_variation_id, $digital_variation_ids ) ) { $args['min_value'] = 1; $args['max_value'] = 1; $args['step'] = 1; $args['input_value'] = 1; } return $args; }
内容的提问来源于stack exchange,提问作者Elle Holder
相关产品推荐
相关产品推荐

