Add a Line Break in Woocommerce Product Titles

Add a line break in Woocommerce Product Titles

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)…

Add a line break in Woocommerce Product Attributes

You can use the woocommerce_attribute filter to change the commas into line breaks.

add_filter( 'woocommerce_attribute', 'woocommerce_product_attributes_add_line_break', 10, 3 );
function woocommerce_product_attributes_add_line_break( $attribute_list, $attribute, $values ) {
    if ( !is_product() ) return; //Only on product page
    $attribute_list = wpautop( wptexturize( implode( '<br>', $values ) ) );
    return $attribute_list;
}

Add a line break to Woocommerce cart item names and order item names

To alter the product name display on cart items, minicart and order items (+ email notifications), use the following additional code:

// For mini cart and cart item name
add_action( 'woocommerce_cart_item_name', 'alter_wc_cart_item_name', 10, 2 );
function alter_wc_cart_item_name( $item_name, $cart_item ) {
    if ( strpos($item_name , '|') !== false ) {
        $item_name = str_replace( '|', '<br/>', $item_name );
    }
    return $item_name;
}

// For order item name (even on email notifications)
add_action( 'woocommerce_order_item_name', 'alter_wc_order_item_name', 10, 2 );
function alter_wc_order_item_name( $item_name, $item ) {
    if ( strpos($item_name , '|') !== false ) {
        $item_name = str_replace( '|', '<br/>', $item_name );
    }
    return $item_name;
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

Append a text string to WooCommerce product title

If you look to the template single-product/title.php code you have essentially just this:

the_title( '<h1 class="product_title entry-title">', '</h1>' );

The WordPress function the_title() echoes the product title, so you can't use echo again if you want to append "More Info" to the title. You will use this line instead:

<div class="woocommerce-loop-product__title"><? the_title( '<h1 class="product_title entry-title">', ' More Info</h1>' ); ?>

or in a more cleaner way.

<div class="woocommerce-loop-product__title"><? the_title( '<h1 class="product_title entry-title">', ' '. __("More Info") . '</h1>' ); ?>

Tested and works.

---

Related Topics