CODEWITHSUNDEEP
phpwordpresswoocommercehook-woocommerce
Jacq Healy
Jacq Healy

Reputation: 93

Changing "woocommerce_template_loop_product_title" heading tag

I'm attempting to change the WooCommerce woocommerce-loop-product__title from a H2 to a h6 but I'm having some trouble.

I've used the following snippet to unhook the original function and replace it with the h6. Unfortunately, this does add the h6 but it also retains the original h2.

Can anybody point out where this is going wrong?

remove_action( 'woocommerce_shop_loop_item_title','woocommerce_template_loop_product_title', 10 );
add_action('woocommerce_shop_loop_item_title', 'soChangeProductsTitle', 10 );
function soChangeProductsTitle() {
    echo '<h6 class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '">' . get_the_title() . '</h6>';
}

Upvotes: 4

Views: 3386

Answers (1)

7uc1f3r
7uc1f3r

Reputation: 29624

First of all we are going to apply a remove_action to the existing title. Priority 10 is used for this (which is default in WooCommerce, see attached code line).

Copied/pasted from /includes/wc-template-hooks.php line 98 @version 2.1.0

add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );

However, the priority number can be different if the theme you use differs from the default behavior in WooCommerce (in short, this is theme dependent)

Then we will overwrite the existing output (that we just removed) with the output we want, based on the existing output. The existing output can be found in the same file I referenced earlier in my answer, namely on line 1165 @version 2.1.0

So you get:

/**
 * Show the product title in the product loop. By default this is an H2.
 */
function action_woocommerce_shop_loop_item_title() {
    // Removes a function from a specified action hook.
    remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
    
    echo '<h6 class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '">' . get_the_title() . '</h6>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
add_action( 'woocommerce_shop_loop_item_title', 'action_woocommerce_shop_loop_item_title', 9 );

OR to apply this only to related products (single product page), use:

function action_woocommerce_shop_loop_item_title() {
    global $woocommerce_loop;

    // Only for related products
    if ( isset( $woocommerce_loop['name']) && $woocommerce_loop['name'] === 'related' ) {
        // Removes a function from a specified action hook.
        remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
        
        echo '<h6 class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '">' . get_the_title() . '</h6>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
    }
}
add_action( 'woocommerce_shop_loop_item_title', 'action_woocommerce_shop_loop_item_title', 9 );

Upvotes: 5

Related Questions