0

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;
}
8
  • Hi, you are adding brand name directly in the title or using custom field or taxonomy for brand selection. – MMK Sep 11 '20 at 8:35
  • Hi there The brand name as well as product name is directly in the title currently – laxus Sep 11 '20 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 Sep 11 '20 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 Sep 24 '20 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 Nov 10 '20 at 23:53
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..

1
  • This looks amazing, thank you. Will sit down and have a proper look once I finish work :D – laxus Sep 11 '20 at 13:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.