Add html to woocommerce product title

Question

I want to be able to add an "li" tag within my product title. To achieve this in a user friendly way I wrote a code which changes the character "-" to an "li" tag. But currently the html does not have an effect on the "order-details-table" (which for example appears when you finished ordering). Is there another filter to add the html globaly so it changes "-" to "li" every time the title occures? --> I updated my code and the html now appeares everywhere, only the following problem is remaining:

In the backend however the html gets added, but gets shown as plain text, so it does not have an effect. Is there also a solution to this problem?

What the product title looks like at the moment --> the html gets interpreted as normal text

add_filter( 'the_title', 'custom_the_title', 10, 2 );
add_filter( 'woocommerce_cart_item_name', 'custom_the_title', 20, 3);
add_filter( 'woocommerce_order_item_name', 'custom_the_title' );

function custom_the_title( $title){

        $title = str_replace( '-', '<li>', $title );
        $title = str_replace( '.', '</li>', $title );

    return $title;
}

Thanks a lot for your help, and greetings from Austria! Samuel

Answer 1

Are you trying to get something like this? If not, please give more information, what do you expect to see? Any visual example? Where do you want to see those changes?

add_filter( 'the_title', 'custom_the_title', 10, 2 );
add_filter( 'woocommerce_cart_item_name', 'custom_the_title', 20, 3);

function custom_the_title( $title){

        $title = '<li>'.$title.'</li>';
    return $title;
}

Answer 2

The problem is still presisting even on Wordpress version 5.2.4 and not only on Wordpress 5.5; I have tried the suggested function but it won't work as the html code will always be shown as part of the title text. For instance if I want to add a line break of change a word in the title to red the html tags will just show and the html is not rendered by the browser.

Even with php function html_entity_decode() applied to the title no luck!

So here is the fix:

After checking the code on Woocommerce latest update I found the culprit on the titile.php woocommerce plugin code:

echo esc_html( get_the_title() );

you will need to edit that and remove the esc_html() . But this is temporary as any update on the woocommrce plugin will perhaps return the issue. So I will leave it to experts here to suggest a better solution.

Answer 3

I found the same issue where I'd added some spans to my titles that were suddenly being rendered as text instead of HTML. It was indeed thanks to the addition of an esc_html() around the title in woocommerce/templates/single-product/title.php.

I've fixed it by copying the file to my theme folder under woocommerce/single-product/title.php and simply removing the esc_html() . This is the 'update-proof' solution as it will not be overwritten when WooCommerce next updates.

<h1 class="product_title entry-title">
    <?php echo get_the_title(); ?>
</h1>