CODEWITHSUNDEEP
phpwordpresswoocommerce
Barry Kilian
Barry Kilian

Reputation: 41

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

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?

Upvotes: 4

Views: 3660

Answers (3)

LoicTheAztec
LoicTheAztec

Reputation: 254220

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.

Upvotes: 1

m1tk00
m1tk00

Reputation: 124

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

Upvotes: 0

mdubey
mdubey

Reputation: 1

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

Upvotes: 0

Related Questions