|
↳ See all 15 articles
/ Documentation /Astra Pro Modules/Enhance (Integration Modules)/WooCommerce/ How to Change the Heading Tag for WooCommerce Product Titles in Astra

How to Change the Heading Tag for WooCommerce Product Titles in Astra

By default, WooCommerce product titles on the Shop page and any product grid display as <h2> elements. Astra inherits this default and renders them the same way.

If your page already has a meaningful <h2> heading (such as a section title above the product grid), having every product title also use <h2> can break the heading hierarchy, which affects both accessibility and SEO. This guide shows you how to change the product title tag to <h3> (or any other tag) without editing the Astra parent theme files.


Override the Astra Function (Child Theme)

Astra wraps its product title function inside a if ( ! function_exists() ) check. This means you can safely redefine the function in your child theme and Astra will use your version instead.

Add the following code to your child theme’s functions.php file:

function astra_woo_woocommerce_template_loop_product_title() {
    $product_title_link = apply_filters( 'astra_woo_shop_product_title_link', '__return_true' );
    if ( $product_title_link ) {
        echo '<a href="' . esc_url( get_the_permalink() ) . '" class="ast-loop-product__link">';
    }
    echo '<h3 class="woocommerce-loop-product__title">' . esc_html( get_the_title() ) . '</h3>';
    if ( $product_title_link ) {
        echo '</a>';
    }
}

This replaces the <h2> with <h3> while preserving Astra’s product title link wrapping and any filters applied to the link behavior.

Important Note:

If Astra updates the original function’s internal logic, you may need to update your override to match.


How to Add the Code

Option A — Child Theme

  1. Go to Appearance → Theme File Editor in your WordPress dashboard.
  2. Select your Astra Child Theme from the dropdown on the right.
  3. Open functions.php.
  4. Paste the code at the bottom of the file.
  5. Click Update File.

Option B — WPCode Plugin

  1. Install and activate the free WPCode plugin.
  2. Go to Code Snippets → Add Snippet.
  3. Choose PHP Snippet.
  4. Paste the code, set the location to Run Everywhere, and activate it.

Important Note:

Never add custom code directly to the Astra parent theme’s files. Your changes will be lost when the theme updates. Always use a child theme or a code snippets plugin.


Result

After adding the code, product titles on your Shop page and product grid pages will render as <h3> instead of <h2>, giving you a cleaner heading hierarchy across your WooCommerce store.

Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

Need help? Contact Support
Scroll to Top