Adding a break to product title on shop pages for a certain length

Question

I am trying to get more of a consistent grid layout on my shop loop.

The product title spans over 1 or 2 lines depending on the string length, therefore if the string length is below the amount which forces it to overlap to the next line I want to add a break '
' so that it doesn't affect the overall spacing of the shop loop page/

This is the code I have tried at the moment:

<?php
    echo "test";
    $title = get_the_title();
    if ( strlen($title) < 29 )
    {
        echo '<br>';
    }
?>

I have put it in content-product.php woocommerce template, but it's not working.

Is my code correct?

score 1 · Answer 1 · edited May 23 '17 at 12:08

This answer is based on both "title length" an "words length", to avoid breaking a word.

This function partially based on this answer and on woocommerce_template_loop_product_title() WooCommerce native function, that is used on content-product.php WooCommerce template, to display the title in Shop pages.

Here I have included your limit string length, but it's also based on a complex "words length" detection, to avoid break words:

if (  ! function_exists( 'woocommerce_template_loop_product_title' ) ) {

    // Show the product title in the product loop. By default this is an <h3> html tag.

    function woocommerce_template_loop_product_title() {

        // Define the lenght limit for title (by line)
        $limit = 29;

        $title = get_the_title();
        $lenght = strlen($title);

        // 1. The title length is higher than limit

        if ( $lenght >= $limit ) {

            $title_arr1 = array();
            $title_arr2 = array();
            $sum_length_words = -1;

            // an array of the words of the title
            $title_word_arr = explode( ' ', $title );

            // iterate each word in the title
            foreach( $title_word_arr as $word ){
                // Length of current word (+1 space)
                $length_word = strlen($word) + 1;
                // Adding the current word lenght to total words lenght
                $sum_length_words += $length_word;
                // Separating title in 2 arrays of words depending on lenght limit
                if ( $sum_length_words <= $limit )
                    $title_arr1[] .= $word;
                else
                    $title_arr2[] .= $word;
            }
            // Converting each array in a string
            $splitted_title = implode(" ", $title_arr1). ' ('. strlen(implode(" ", $title_arr1)) .')';
            $splitted_title .= '<br>'; // adding <br> between the 2 string
            $splitted_title .= implode(" ", $title_arr2). ' ('. strlen(implode(" ", $title_arr2)) .')';
            echo '<h3>' . $splitted_title . '</h3>';

        // 2. The title length is NOT higher than limit

        } else {
            echo '<h3>' . $title . '</h3>';
        }

    }

}

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

This code is tested and works.

score 0 · Answer 2 · answered Aug 30 '16 at 11:53

0

I think this is not a correct way in order to place a
tag in between product title. I think you just need to fix the amount of characters used in your product title for displaying in product page like for example if product title is like "Test Bank for Medical Terminology: A Living Language, 5/E" in this case you can limit the title as "Test Bank for Medical Terminology..." depending on your layout

so in this way, your layout will remain same and good

answered Aug 30 '16 at 11:53

mdubey

1
4

Is there not a way I can make this work how i originally intended though? As if i shorted some product names it wont really make sense to the user – Barry Kilian Aug 30 '16 at 12:03

score 0 · Answer 3 · answered Aug 30 '16 at 15:03

What will i suggest is using the following

h1{ height: 40px; width: 250px; white-space: nowrap;  overflow: hidden;   text-overflow: ellipsis;}

<h1>Sample test test test test</h1>

This way you can easily display the titles always in one line. If that doesn't work and you want to display the full title, then you can use some tooltip plugin that will display the full title on hover

Adding a break to product title on shop pages for a certain length

3 Answers3

Linked