在 WooCommerce 简码输出的顶部添加 div

Question

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

我想在列表的顶部添加一个 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. 覆盖loop/loop-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>

在 WooCommerce 简码输出的顶部添加 div

Add a div at top of WooCommerce shortcode output

php

wordpress

product

shortcode

woocommerce