WooCommerce中隐藏空值的产品变体自定义字段
2026-7-13
问题：WooCommerce变体自定义字段为空时隐藏对应表格行
我给WooCommerce产品变体添加了自定义字段，代码部署在wp-content\themes\my_theme\woocommerce\single-product\add-to-cart\product-attributes.php模板文件中，基础功能正常。
添加了多个自定义字段对应表格行，单个字段的原始代码如下：
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--my_field"> <th class="woocommerce-product-attributes-item__label">My Field Label</th> <td id="my_field" class="woocommerce-product-attributes-item__value"> {{{ data.variation.my_field }}} </td> </tr>
当前{{{ data.variation.my_field }}}为空时，表格行仍会显示，我希望仅展示有值的字段行。尝试了以下Handlebars条件判断代码，但未生效：
{{{ #if data.variation.my_field }}} <tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--my_field"> <th class="woocommerce-product-attributes-item__label">My Field</th> <td id="your_field" class="woocommerce-product-attributes-item__value"> {{{ data.variation.my_field }}} </td> </tr> {{{/if }}}
已实现的功能代码（运行正常）
1. 在functions.php中创建自定义字段
function my_field_settings( $loop, $variation_data, $variation ) { woocommerce_wp_text_input( array( 'id' => "my_field{$loop}", 'label' => __( 'My Field', 'woocommerce' ), 'name' => "my_field[{$loop}]", 'value' => get_post_meta( $variation->ID, 'my_field', true ), 'wrapper_class' => 'form-row form-row-33', ) ); } add_action( 'woocommerce_product_after_variable_attributes', 'my_field_settings', 10, 3 );
2. 保存自定义字段值
function my_field_save( $variation_id, $loop ) { $text_field = $_POST['my_field'][ $loop ]; update_post_meta( $variation_id, 'my_field', esc_attr( $text_field )); } add_action( 'woocommerce_save_product_variation', 'my_field_save', 10, 2 );
3. 加载自定义字段值
function my_field_load( $variation ) { $variation['my_field'] = get_post_meta( $variation[ 'variation_id' ], 'my_field', true ); return $variation; } add_filter( 'woocommerce_available_variation', 'my_field_load' );
product-attributes.php模板完整代码
<?php /** * Product attributes * @version 3.6.0 */ defined( 'ABSPATH' ) || exit; if ( ! $product_attributes ) { return; } ?> <ul id="new_product_attributes" class="accordion" data-accordion data-allow-all-closed="true"> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title">Caratteristiche tecniche</a> <div class="accordion-content" data-tab-content> <div class="attributes_container"> <table class="woocommerce-product-attributes shop_attributes"> <?php foreach ( $product_attributes as $product_attribute_key => $product_attribute ) : ?> <tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--<?php echo esc_attr( $product_attribute_key ); ?>"> <th class="woocommerce-product-attributes-item__label"><?php echo wp_kses_post( $product_attribute['label'] ); ?></th> <td class="woocommerce-product-attributes-item__value"><?php echo wp_kses_post( $product_attribute['value'] ); ?></td> </tr> <?php endforeach; ?> </table> </div> <div class="single_variation_wrap"> <div id="variation_clone_box" class="woocommerce-variation single_variation"> <script type="text/template" id="tmpl-variation-template"> <table class="woocommerce-product-attributes shop_attributes"> <tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--my_field"> <th class="woocommerce-product-attributes-item__label">My Field Label</th> <td id="my_field" class="woocommerce-product-attributes-item__value">{{{ data.variation.my_field }}}</td> </tr> </table> <div class="woocommerce-variation-description">{{{ data.variation.variation_description }}}</div> <div class="woocommerce-variation-availability">{{{ data.variation.availability_html }}}</div> <div id="old_box_Price" class="woocommerce-variation-price">{{{ data.variation.price_html }}}</div> </script> </div> </div> <div class="datasheets_box"> <a class="button">(i) Scarica la scheda tecnica</a> </div> <div class="richiedi_info_box"> <p class="richiedi_info_title">Richiedi informazioni</p> <p><strong>Assistenza Clienti</strong></p> <p> ORARI<br> Dal Lunedì al Venerdì<br> 8:00 / 13:00 - 14:00 / 17:00 <p> <a class="button">(i) assistenza@grafoplast.it</a> <a class="button">(i) +39 0131 718477</a> </p> </div> </div><!-- accordion-content --> </li> </ul><!-- #new_product_attributes --> <div id="new_box_AddToCart"> <?php woocommerce_quantity_input( array( 'min_value' => apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product ), 'max_value' => apply_filters( 'woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product ), 'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( wp_unslash( $_POST['quantity'] ) ) : $product->get_min_purchase_quantity(), // WPCS: CSRF ok, input var ok. ) ); ?> <div class="shipment_info"> <p>Disponibilità immediata</p> <p>I costi di spedizione sono esclusi</p> </div> <button type="submit" class="single_add_to_cart_button button alt<?php echo esc_attr( wc_wp_theme_get_element_class_name( 'button' ) ? ' ' . wc_wp_theme_get_element_class_name( 'button' ) : '' ); ?>"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button> </div>
解决方案
问题出在Handlebars条件判断的语法错误：你用了三个大括号{{{ #if ... }}}包裹逻辑标签，但Handlebars的逻辑语句（比如#if）应该使用两个大括号{{ #if ... }}，三个大括号仅用于无转义输出内容，不能用来包裹逻辑判断。
修改后的条件判断代码如下：
{{#if data.variation.my_field}} <tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--my_field"> <th class="woocommerce-product-attributes-item__label">My Field Label</th> <td id="my_field" class="woocommerce-product-attributes-item__value"> {{{ data.variation.my_field }}} </td> </tr> {{/if}}
如果需要更严格的判断（排除仅含空格的空白值），可以在PHP加载字段值时预处理：
function my_field_load( $variation ) { $my_field_value = trim( get_post_meta( $variation[ 'variation_id' ], 'my_field', true ) ); if ( ! empty( $my_field_value ) ) { $variation['my_field'] = $my_field_value; } return $variation; } add_filter( 'woocommerce_available_variation', 'my_field_load' );
结合上述修改，即可确保只有当字段存在有效内容时，才显示对应的表格行。
内容的提问来源于stack exchange，提问作者Mauro Beretta
相关产品推荐
相关产品推荐
