WooCommerce product title formatting

Question

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

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..