1

Let's say my product title is:

Brown Colored Leather Shoes

But based on my column width the title looks like this:

Brown Colored Leather
Shoes

I know it's possible to do a character replacement so that a "|" in the backend becomes a line break <br/>. But I don't know how.

I want it to look like this

Brown Colored
Leather Shoes

I found these references:

Is it possible to add a line break to WC products long titles?

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
coes
  • 41
  • 1
  • 2
  • 7

3 Answers3

6

2020 revision - Still works on Wordpress 5.5.1 with WooCommerce 4.4.1

Using this custom function hooked in the_title filter hook will do the job (replacing a pipe character | by a <br> in product titles):

add_filter( 'the_title', 'custom_product_title', 10, 2 );
function custom_product_title( $title, $post_id ){
    $post_type = get_post_field( 'post_type', $post_id, true ); 

    if( in_array( $post_type, array( 'product', 'product_variation') ) ) {
        $title = str_replace( '|', '<br/>', $title ); // we replace "|" by "<br>"
    }
    return $title;
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

Code is tested on Woocommerce 3+ and works.

Now you can target different product pages with the WC conditionals tags as is_product(), is_shop(), is_product_category() or is_product_tag() (and many others)…

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
  • Nope. I must be doing something wrong :( https://imgur.com/ki1Avuw Added to my child theme btw. – coes Sep 25 '17 at 19:53
  • :( Yeah I see it works for you. Do you see ANYTHING that may look wrong with my screenshot? Thank you for taking the time to answer. – coes Sep 25 '17 at 19:59
  • Ok I got this to do something! – coes Sep 25 '17 at 20:00
  • Parse error: syntax error, unexpected ''
    '' (T_CONSTANT_ENCAPSED_STRING), expecting ',' or ')' in /home/...../functions.php on line 450     – coes Sep 25 '17 at 20:01
  • I got it! The problem was a character in your code. The right answer is `//ADD LINE BREAK function custom_the_title( $title, $post_id ){ $post_type = get_post_field( 'post_type', $post_id, true ); if( $post_type == 'product' || $post_type == 'product_variation' ) $title = str_replace( '|', '
    ', $title ); // we replace '|' by '
    ': return $title; }` Thank you thank you!! When I copied your code it created an OBJ character. Here https://imgur.com/8expPVQ     – coes Sep 25 '17 at 20:04
2

The full answer working as Nov 2019 with Wordpress 5.2.4:

//ADD LINE BREAK 
add_filter( 'the_title', 'custom_the_title', 10, 2 );
function custom_the_title( $title, $post_id ) {
    $post_type = get_post_field( 'post_type', $post_id, true );
    if( $post_type == 'product' || $post_type == 'product_variation' )
        $title = str_replace( '|', '<br/>', $title ); // we replace '|' by '<br>'
    return $title;
}

Credits to LoicTheAztec and Coes

Marco Bonelli
  • 63,369
  • 21
  • 118
  • 128
Daniel R
  • 29
  • 1
0

I have a JS solution if anyone would like it, just add to custom js of what have you:

if (document.querySelector('.product_title') !== null) {
var str = document.querySelector('.product_title').innerHTML; 
var res = str.replace("|", "<br/>");
document.querySelector('.product_title').innerHTML = res;
}

May be helpful if you need a workaround while you come up with a way to do it in functions.php

Tom Cato
  • 1