What is the best way to format my product titles?

I would like the brand of the product to be on it’s own line in a larger bolder font and then underneath the name of the products in a smaller more refined format.

I see I can add the markup straight into the product title in wordpress and use a line break to separate the brand name and the product name, but is there a more efficient way to achieve this?

I came across this code recommended on a thread where you use a pipe in the product title and it converts it to to a line break but it doesn’t appear to work and just adds a pipe to my product title, I added it to my functions.php

I am using Elementor for the majority of the woocommerce page design

Thanks in advance

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

What is the best way to format my product titles?

I would like the brand of the product to be on it’s own line in a larger bolder font and then underneath the name of the products in a smaller more refined format.

I see I can add the markup straight into the product title in wordpress and use a line break to separate the brand name and the product name, but is there a more efficient way to achieve this?

I came across this code recommended on a thread where you use a pipe in the product title and it converts it to to a line break but it doesn’t appear to work and just adds a pipe to my product title, I added it to my functions.php

I am using Elementor for the majority of the woocommerce page design

Thanks in advance

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

• woocommerce-offtopic
• formatting

• Hi, you are adding brand name directly in the title or using custom field or taxonomy for brand selection. – MMK Commented Sep 11, 2020 at 8:35
• Hi there The brand name as well as product name is directly in the title currently – laxus Commented Sep 11, 2020 at 8:45
• In this case you need to put pipe sign in the backend and above code in functions.php on runtime it will replace pipe with <br>.. The other way around is to use custom taxonomomies (like categories) or add brand as custom taxonomy i will put the code later... it is more efficient in a way that many brand repeat most of the time so you just need to select it. plus in front end you can create filter by brand too. – MMK Commented Sep 11, 2020 at 9:27
• I don't see how adding a pipe is any more efficient than adding a <br/> tag to the title when creating a product. You're still just adding something to the title & then you're adding another function for WordPress to process when it loads a page. Just stick with <span>Brand</span> Product Name in the title & then use CSS to apply the styling you need. Personally,I 'd make the Brand a custom taxonomy & then re-work the product template to display it exactly as I want it. That then gives you opportunities to do lots of other things, like filtering the products by Brand names, etc. – Tony Djukic Commented Sep 24, 2020 at 14:56
• 1 @TonyDjukic Hi Tony, for some reason I didn't get a notification for your response, I have gone ahead with Muneebs answer, thank you for your input though on the subject – laxus Commented Nov 10, 2020 at 23:53

1 Answer 1

Add Brand as taxonomy:

if ( ! function_exists( 'brand_tax' ) ) {

// Register Custom Taxonomy
function brand_tax() {

    $labels = array(
        'name'                       => _x( 'Brands', 'Taxonomy General Name', 'text_domain' ),
        'singular_name'              => _x( 'Brand', 'Taxonomy Singular Name', 'text_domain' ),
        'menu_name'                  => __( 'Brands', 'text_domain' ),
        'all_items'                  => __( 'All brands', 'text_domain' ),
        'parent_item'                => __( 'Parent brand', 'text_domain' ),
        'parent_item_colon'          => __( 'Parent brand:', 'text_domain' ),
        'new_item_name'              => __( 'New brand', 'text_domain' ),
        'add_new_item'               => __( 'Add New brand', 'text_domain' ),
        'edit_item'                  => __( 'Edit brand', 'text_domain' ),
        'update_item'                => __( 'Update brand', 'text_domain' ),
        'view_item'                  => __( 'View brand', 'text_domain' ),
        'separate_items_with_commas' => __( 'Separate brands with commas', 'text_domain' ),
        'add_or_remove_items'        => __( 'Add or remove brands', 'text_domain' ),
        'choose_from_most_used'      => __( 'Choose from the most used', 'text_domain' ),
        'popular_items'              => __( 'Popular brands', 'text_domain' ),
        'search_items'               => __( 'Search brands', 'text_domain' ),
        'not_found'                  => __( 'Not Found', 'text_domain' ),
        'no_terms'                   => __( 'No brands', 'text_domain' ),
        'items_list'                 => __( 'brands list', 'text_domain' ),
        'items_list_navigation'      => __( 'brands list navigation', 'text_domain' ),
    );
    $args = array(
        'labels'                     => $labels,
        'hierarchical'               => true,
        'public'                     => true,
        'show_ui'                    => true,
        'show_admin_column'          => true,
        'show_in_nav_menus'          => true,
        'show_tagcloud'              => true,
    );
    register_taxonomy( 'brand', array( 'product' ), $args );

}
add_action( 'init', 'brand_tax', 0 );

}

Modify your code like this now

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' ){
        $terms = get_the_terms( $post_id, 'brand' );
        foreach($terms as $term){
            $output .=  "<span>".$term->name."</span>";
        }
        $title .= "<br><p>".$output ."</p>";
    }
    return $title;  
}

You can change markup as per your design..