如何正确挂钩自定义我的 WooCommerce 商店页面？

Question

I am creating a theme from scratch and I have installed WooCommerce. However, I am trying to customize the product archive page. I specifically want to have a banner before any WooCommerce content. The code below is from my functions.php .

add_action( 'woocommerce_before_main_content', 'shop_banner', 35);

function shop_banner(){
  echo '<h1>Hello</h1>';
}

When I call this hook, nothing happens.

But when I call the “ woocommerce_before_shop_loop ” hook, it works and displays the content (but this is not where I want the content to display).

I decided to test it and see if the hook worked anywhere else, so I added it to my woocommerce.php file. Below is the code when I added it.

<?php get_header() ;
do_action( 'woocommerce_before_main_content' );?>

    <div class="container woocommerce p-5">

        <?php woocommerce_content(); ?>
    </div>




<?php get_footer() ?>

The content displayed when I did that. But I do not want it to be on every page, only my archive pages. So it seems it is hooking on just fine but it is not wanting to display on the archive-product.php page. The code below is the first part of my archive page, which was copied straight from the woocommerce template folder.

/**
 * Hook: woocommerce_before_main_content.
 *
 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
 * @hooked woocommerce_breadcrumb - 20
 * @hooked WC_Structured_Data::generate_website_data() - 30
 */
do_action( 'woocommerce_before_main_content' );

?>
<header class="woocommerce-products-header">
    <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
        <h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1>
    <?php endif; ?>

    <?php
    /**
     * Hook: woocommerce_archive_description.
     *
     * @hooked woocommerce_taxonomy_archive_description - 10
     * @hooked woocommerce_product_archive_description - 10
     */
    do_action( 'woocommerce_archive_description' );
    ?>
</header> 

Any help or thoughts would be appreciated. Also I have only used WooCommerce for about a week so I am very new to the plugin.

Answer 1

You can add a condition in your hook. Take a look to conditional tags on WooCommerce documentation

add_action( 'woocommerce_before_main_content', 'shop_banner', 35);
function shop_banner(){
  if(!is_shop()){
     echo '<h1>Hello</h1>';
  }
}