WooCommerce技术需求:为缺货产品变体旁显示Out of Stock文本
在WooCommerce变体选项旁显示缺货状态
嘿,我来帮你完善代码,实现当产品变体缺货时,在对应的下拉选项旁标注“Out of Stock”的功能。你的初始思路是对的,咱们把未完成的逻辑补全,同时加上一些细节优化:
完整可运行代码
add_filter( 'woocommerce_variation_option_name', 'customizing_variations_terms_name_with_stock_status', 10, 1 ); function customizing_variations_terms_name_with_stock_status( $term_name ) { // 后台编辑界面不生效,避免影响产品管理 if ( is_admin() ) return $term_name; global $product; // 非可变产品直接返回原名称 if ( ! $product || ! $product->is_type( 'variable' ) ) return $term_name; // 用静态数组存已经处理过的选项,防止同一个选项重复加缺货标签 static $processed_terms = []; $term_slug = sanitize_title( $term_name ); if ( in_array( $term_slug, $processed_terms ) ) return $term_name; $is_out_of_stock = false; // 遍历所有可用变体 foreach ( $product->get_available_variations() as $variation ) { // 只处理缺货的变体 if ( ! $variation['is_in_stock'] ) { // 检查当前变体的属性是否匹配当前选项 foreach ( $variation['attributes'] as $attr_key => $attr_value ) { $attr_taxonomy = str_replace( 'attribute_', '', $attr_key ); // 通过属性值获取对应的术语对象 $matching_term = get_term_by( 'slug', $attr_value, $attr_taxonomy ); if ( $matching_term && $matching_term->name === $term_name ) { $is_out_of_stock = true; break 2; // 找到匹配项,直接跳出两层循环 } } } } // 如果缺货,追加红色的缺货标签 if ( $is_out_of_stock ) { $term_name .= ' <span style="color: #dc3232; font-weight: normal;">(Out of Stock)</span>'; $processed_terms[] = $term_slug; } return $term_name; }
代码细节解释
- 后台隔离:用
is_admin()判断,保证这段逻辑只在前端商品页面生效,不会干扰你在后台编辑产品时的选项显示。 - 产品类型校验:先确认当前产品是可变产品(variable),避免对简单产品、分组产品等无效类型执行多余逻辑。
- 重复处理防护:静态数组
$processed_terms会记录已经处理过的选项slug,防止同一个选项因为循环多次被重复添加缺货文本。 - 精准匹配属性:遍历每个缺货变体的属性,通过术语slug和名称匹配当前选项,确保只有真正缺货的选项才会被标记。
- 视觉优化:用红色字体显示缺货文本,和正常选项区分开,用户一眼就能注意到。
使用提示
- 把这段代码添加到你的主题/子主题的
functions.php文件里,或者用Code Snippets这类自定义代码插件来添加,千万别直接修改WooCommerce核心文件,不然更新插件后代码会丢失。 - 如果你的变体属性用的是自定义输入值(不是WP分类术语),可以把
get_term_by那部分改成直接对比$attr_value和$term_name,适配你的属性类型。 - 缺货文本和样式可以随便改,比如把
(Out of Stock)换成[缺货],调整颜色或者字体大小都可以。
内容的提问来源于stack exchange,提问作者DrMTR
相关产品推荐
相关产品推荐

