在WooCommerce短代码输出的顶部添加一个div

Question

我有一个由WooCommerce短代码生成的[products category='tshirts']产品列表。

我想在列表的顶部添加一个div，如下所示：

<div class='woocommerce'>
   <ul class='products'>
       <div class='test'>Hello</div> //This is the div I would like to add
       <li class='product'></li>
       <li class='product'></li>
       <li class='product'></li>
       ...

我试过以下几种方法，但仍然不起作用：

function action_woocommerce_shop_loop( $array, $int ) { 
    echo "<div class='test'>Hello</div>";
}; 
add_action( 'woocommerce_shop_loop', 'action_woocommerce_shop_loop', 10, 2 ); 

任何帮助都将不胜感激！

Answer 1

有几种选择是可能的：

1.重写可插拔的woocommerce_product_loop_start函数。

function woocommerce_product_loop_start( $echo = true ) {
    ob_start();

    wc_set_loop_prop( 'loop', 0 );

    wc_get_template( 'loop/loop-start.php' );
    
    // Loop prop name = products
    if ( wc_get_loop_prop('name') == 'products' ) {
        echo '<div class="test">Hello</div>';
    }

    $loop_start = apply_filters( 'woocommerce_product_loop_start', ob_get_clean() );

    if ( $echo ) {      
        // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
        echo $loop_start;
    } else {
        return $loop_start;
    }
}

2.覆盖循环/循环-start.php模板文件。可以通过将模板复制到yourtheme/woocommerce/loop/loop-start.php来重写该模板。

替换

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
?>
<ul class="products columns-<?php echo esc_attr( wc_get_loop_prop( 'columns' ) ); ?>">

使用

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
?>
<ul class="products columns-<?php echo esc_attr( wc_get_loop_prop( 'columns' ) ); ?>">
<?php
// Loop prop name = products
if ( wc_get_loop_prop('name') == 'products' ) {
    echo '<div class="test">Hello</div>';
}
?>

3.通过do_action( "woocommerce_shortcode_before_{$this->type}_loop", $this->attributes );实现的

function action_woocommerce_shortcode_before_products_loop( $atts ) {   
    echo "<div class='test'>Hello</div>";
}
add_action( 'woocommerce_shortcode_before_products_loop', 'action_woocommerce_shortcode_before_products_loop', 10, 1 );

结果：(然而，这并不是你想要的)

<div class='woocommerce'>
   <div class='test'>Hello</div> //This is the div I would like to add
   <ul class='products'>
       <li class='product'></li>
       <li class='product'></li>