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

This may be related to your question https://stackoverflow.com/questions/46412614/add-a-line-break-in-woocommerce-product-titles — Syntax_Error, Jan 08 '20 at 20:47
Yes this were I got some lines of my code from... but with the snippet provided in this post, the title isnt changing in the order-details-table and within the shopping cart... — Samuel, Jan 08 '20 at 21:17

score 0 · Answer 1 · answered Jan 08 '20 at 22:44

0

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;
}

answered Jan 08 '20 at 22:44

Syntax_Error

760
3
10
15

I just updated my question because I managed to change the code so that it appears everywhere in the frontend with the html tags. Only in the backend, the html appears, but gets interpreted as normal text. – Samuel Jan 09 '20 at 13:10
Since a few days we are using the Woocommerce Gutenberg Block: "Newest Products" on our landing page. Do you know the specific filter for this block to change the html also there? – Samuel Mar 17 '20 at 08:57

score 0 · Answer 2 · edited Aug 24 '20 at 23:11

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.

score 0 · Answer 3 · answered Sep 07 '20 at 12:08

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>

Add html to woocommerce product title

3 Answers3