woocommerce_after_shop_loop钩子无法添加内容的问题排查

问题 #

我参考教程为WooCommerce产品分类页添加第二个产品描述，使用woocommerce_after_shop_loop钩子时内容完全不显示，但换成woocommerce_before_shop_loop_item钩子就能正常显示。我用Divi主题，通过其构建器创建了分类/归档页面模板并添加了Woo Product区块，已经禁用所有插件排查，问题依然存在。使用的代码如下：

// 1. 在"添加新产品分类"后台页面显示字段
add_action( 'product_cat_add_form_fields', 'bbloomer_wp_editor_add', 10, 2 );

function bbloomer_wp_editor_add() {
    ?>
    <div class="form-field">
        <label for="seconddesc"><?php echo __( '第二个描述', 'woocommerce' ); ?></label>
       
      <?php
      $settings = array(
         'textarea_name' => 'seconddesc',
         'quicktags' => array( 'buttons' => 'em,strong,link' ),
         'tinymce' => array(
            'theme_advanced_buttons1' => 'bold,italic,strikethrough,separator,bullist,numlist,separator,blockquote,separator,justifyleft,justifycenter,justifyright,separator,link,unlink,separator,undo,redo,separator',
            'theme_advanced_buttons2' => '',
         ),
         'editor_css' => '<style>#wp-excerpt-editor-container .wp-editor-area{height:175px; width:100%;}</style>',
      );

      wp_editor( '', 'seconddesc', $settings );
      ?>
       
        <p class="description"><?php echo __( '这是显示在分类页产品下方的描述', 'woocommerce' ); ?></p>
    </div>
    <?php
}

// ---------------
// 2. 在"编辑产品分类"后台页面显示字段
add_action( 'product_cat_edit_form_fields', 'bbloomer_wp_editor_edit', 10, 2 );

function bbloomer_wp_editor_edit( $term ) {
    $second_desc = htmlspecialchars_decode( get_woocommerce_term_meta( $term->term_id, 'seconddesc', true ) );
    ?>
    <tr class="form-field">
        <th scope="row" valign="top"><label for="second-desc"><?php echo __( '第二个描述', 'woocommerce' ); ?></label></th>
        <td>
            <?php
          
         $settings = array(
            'textarea_name' => 'seconddesc',
            'quicktags' => array( 'buttons' => 'em,strong,link' ),
            'tinymce' => array(
               'theme_advanced_buttons1' => 'bold,italic,strikethrough,separator,bullist,numlist,separator,blockquote,separator,justifyleft,justifycenter,justifyright,separator,link,unlink,separator,undo,redo,separator',
               'theme_advanced_buttons2' => '',
            ),
            'editor_css' => '<style>#wp-excerpt-editor-container .wp-editor-area{height:175px; width:100%;}</style>',
         );

         wp_editor( $second_desc, 'seconddesc', $settings );
         ?>
       
            <p class="description"><?php echo __( '这是显示在分类页产品下方的描述', 'woocommerce' ); ?></p>
        </td>
    </tr>
    <?php
}

// ---------------
// 3. 在后台保存字段值
add_action( 'edit_term', 'bbloomer_save_wp_editor', 10, 3 );
add_action( 'created_term', 'bbloomer_save_wp_editor', 10, 3 );

function bbloomer_save_wp_editor( $term_id, $tt_id = '', $taxonomy = '' ) {
   if ( isset( $_POST['seconddesc'] ) && 'product_cat' === $taxonomy ) {
      update_woocommerce_term_meta( $term_id, 'seconddesc', esc_attr( $_POST['seconddesc'] ) );
   }
}

// ---------------
// 4. 在产品分类页的产品下方显示字段内容
add_action( 'woocommerce_after_shop_loop', 'bbloomer_display_wp_editor_content', 5 );

function bbloomer_display_wp_editor_content() {
   if ( is_product_taxonomy() ) {
      $term = get_queried_object();
      if ( $term && ! empty( get_woocommerce_term_meta( $term->term_id, 'seconddesc', true ) ) ) {
         echo '<p class="term-description">' . wc_format_content( htmlspecialchars_decode( get_woocommerce_term_meta( $term->term_id, 'seconddesc', true ) ) ) . '</p>';
      }
   }
}

排查与解决方案 #

核心原因 #

Divi的Woo Product区块是自定义实现的产品循环逻辑，完全替换了WooCommerce原生的产品循环模板，因此WooCommerce默认的woocommerce_after_shop_loop钩子不会被触发——这个钩子只在原生循环中有效。而woocommerce_before_shop_loop_item是针对单个产品项的钩子，Divi的区块仍保留了单个产品的钩子触发，所以能正常显示。

具体解决办法 #

方法1：改用Divi专属钩子

Divi为其Woo Product区块提供了专属钩子，针对网格布局可以用et_after_woo_product_grid，替换原有显示代码的钩子即可：

// 替换原有的显示部分钩子，改用Divi专属钩子
add_action( 'et_after_woo_product_grid', 'bbloomer_display_wp_editor_content', 5 );

function bbloomer_display_wp_editor_content() {
   if ( is_product_taxonomy() ) {
      $term = get_queried_object();
      if ( $term && ! empty( get_woocommerce_term_meta( $term->term_id, 'seconddesc', true ) ) ) {
         echo '<p class="term-description">' . wc_format_content( htmlspecialchars_decode( get_woocommerce_term_meta( $term->term_id, 'seconddesc', true ) ) ) . '</p>';
      }
   }
}

如果是列表布局，可以尝试et_after_woo_product_list钩子。

方法2：直接在Divi构建器中添加内容

既然已经用了Divi构建器，更简单的方式是直接在Woo Product区块下方添加内容模块：

1. 在Divi构建器中找到Woo Product区块，在其下方添加一个文本模块或代码模块
2. 点击文本模块的动态内容图标（小齿轮），选择「自定义字段」
3. 输入自定义字段名seconddesc，勾选「渲染HTML」选项（确保富文本格式正常显示）
4. 保存模板，刷新分类页即可看到效果

方法3：尝试提高钩子优先级（可选，大概率无效）

如果坚持想用WooCommerce原生钩子，可以尝试把钩子优先级调高到99（原代码是5），但由于Divi替换了整个循环，这个方法大概率无效，仅作测试：

add_action( 'woocommerce_after_shop_loop', 'bbloomer_display_wp_editor_content', 99 );

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