Woocommerce: How to move the Category H1 Tag above the description?

Question

I have a woocommerce shop where I am amending the theme, the only thing I can't figure out how to do is to get the Category title to show as a H1 tag above the category description.

I have managed to get the H1 tag to show but it currently shows below the description. This is the code I am currently using:

add_action('woocommerce_before_shop_loop', 'show_category_title', 10, 2);

function show_category_title() {
$cat_title = single_tag_title("", false);
echo '<h1>' . $cat_title . '</h1>';
}

This displays the H1 tag but below the content. I have tried the below but this doesn't display anything, I want it to display above the 'woocommerce_archive_description'.

add_action('woocommerce_archive_description', 'show_category_title', 10, 2);

function show_category_title() {
    $cat_title = single_tag_title("", false);
    echo '<h1>' . $cat_title . '</h1>';
}

Please can someone tell me how to get it above the description. I have included a screenshot of the current output. Ideally I would like the title above the description.

Answer 1

You can go 2 ways here.

Solution 1 (hooks): Show before main content and after the breadcrumbs

add_action('woocommerce_before_main_content', 'show_category_title', 40, 2);

function show_category_title() {
    $cat_title = single_tag_title("", false);
    echo '<h1>' . $cat_title . '</h1>';
}

Solution 2 (PHP templates overwrite):

1. Copy archive-product.php from /wp-content/plugins/woocommerce/templates to /wp-content/YOUR_THEME/woocommerce
2. Edit with custom code. Example:

<header class="woocommerce-products-header col-span-12">
<h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1>
<?php do_action( 'woocommerce_archive_description' ); ?>
</header>