Split my woocommerce product title into 2 line

Question

1.00/5 (1 vote)

See more:

I’m trying to split my WooCommerce product title into 2 lines, currently, it looks like this 0101-12-12 – 3/4″ MNPT X 3/4″ MNPT STR,

I want the title description to look like the below without hyphens:

0101-12-12
3/4″ MNPT X 3/4″ MNPT STR

Thanks for your help

What I have tried:

I've tried the following code.

PHP

function split_product_title($title) {
        // Find the position of the first hyphen
        $hyphen_pos = strpos($title, ' - ');

        if ($hyphen_pos !== false) {
            // Split the title into two parts
            $line1 = substr($title, 0, $hyphen_pos);
            $line2 = substr($title, $hyphen_pos + 3); // Skip the hyphen      
            // Return the formatted lines
            return $line1 . '' . $line2;
        }

        // Return the original title if no hyphen is found
        return $title;
    }

Posted 18-Jul-23 3:58am

Nonso Nkwoji

Updated 18-Jul-23 5:03am

Andre Oosthuizen

v2

Add a Solution

Comments

Richard MacCutchan 18-Jul-23 10:57am

You need to add a line break between the two parts. And that will depend on how you are displaying the information.

Nonso Nkwoji 18-Jul-23 11:00am

I updated the code with a line break still didn't work.

function split_product_title($title) {
// Find the position of the first hyphen
$hyphen_pos = strpos($title, ' - ');

if ($hyphen_pos !== false) {
// Split the title into two parts
$line1 = substr($title, 0, $hyphen_pos);
$line2 = substr($title, $hyphen_pos + 3); // Skip the hyphen
// Return the formatted lines
return $line1 . '' . $line2;
}

// Return the original title if no hyphen is found
return $title;
}

Richard MacCutchan 18-Jul-23 11:03am

I don't see any line break in there.

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Andre Oosthuizen · Answer 1 · 2023-07-18T05:03:00

Solution 1

You are almost there :).

From what I can gather, you want the first part of the title to be displayed separately from the rest of the title. I have used the hyphen character ('-') as the delimiter instead of ' - ' with spaces between the hyphen. I also use the 'trim()' function to remove any leading or trailing spaces from the second line '$line2' -

PHP

function split_product_title($title)
{
    //Find the position of the first space-hyphen-space occurrence - 101-12-12
    $hyphen_pos = strpos($title, ' - ');

    if ($hyphen_pos !== false) {
        //Split the title into two parts
        $line1 = substr($title, 0, $hyphen_pos);
        $line2 = substr($title, $hyphen_pos + 3); //Skip the space-hyphen-space

        //Remove hyphens and any other non-word characters (except whitespace) from the second part - – 3/4" MNPT X 3/4" MNPT STR
        $line2 = preg_replace('/[^\w\s]/u', '', $line2);

        //Add a line break after formatting
        return $line1 . " <br> " . $line2;
    }

    //Return the original title if no space-hyphen-space is found
    return $title;
}

Make a call to your function -

PHP

$product_title = '0101-12-12 – 3/4" MNPT X 3/4" MNPT STR';
$split_title = split_product_title($product_title);

echo $split_title;

Output is -

Output

0101-12-12
3/4" MNPT X 3/4" MNPT STR

EDIT/UPDATE]

The above code works well with normal hyphens. As it turned out, the OP had 'emdash-es' in his input which did not get replaced. To remove the 'emdash' symbols, use the following -

PHP

$title = '0101-12-12 – 3/4" MNPT X 3/4" MNPT STR';

$title = str_replace(["–"], '', $title); //Note: not a hyphen but an emdash...

echo $title;

Posted 18-Jul-23 5:03am

Andre Oosthuizen

Updated 19-Jul-23 5:18am

v4

Comments

Nonso Nkwoji 18-Jul-23 11:11am

@Andre Oosthuizen. I tried the code with your updates to it and it still didn't do anything.

Andre Oosthuizen 19-Jul-23 5:36am

I have updated my solution, it works fine now. I have used 'preg_replace' to remove the hyphens. The main problem, which took a while to figure out, was that your hyphens were incorrect. In the first part '0101-12-12' you used normal hyphens but a long hyphen (em dash) in the second part which were not replaced as it is not a hyphen, I replaced it to a normal hyphen to read - '0101-12-12 - 3/4" MNPT X 3/4" MNPT STR'.
The output I got -

0101-12-12
34 MNPT X 34 MNPT STR

Nonso Nkwoji 19-Jul-23 8:09am

Hi Andre, Thank you for your help. All the titles have the em dash, I can't replace the em dash with a hyphen on all the titles. Is there a way we can achieve the same output with the em dash in the description?

Andre Oosthuizen 19-Jul-23 8:12am

The pre_replace is in the solution above. I need to work on teh code when time allows as this changes the question as we will not replace hyphens anymore. No biggy though.

Nonso Nkwoji 19-Jul-23 8:37am

Thanks, I'll await your response.

Andre Oosthuizen 19-Jul-23 11:19am

See my edit to the solution, it works fine - output '0101-12-12 3/4" MNPT X 3/4" MNPT STR'. If you want to add a break between the 2 lines, just play with both solutions.

Nonso Nkwoji 24-Jul-23 8:53am

Andre thanks for the help but I'm a bit confused, will the edited code remove the emdash and break the title into 2 lines for all the product titles? And I'm not sure what the full code will look like. Can you please provide the full code?

Andre Oosthuizen 24-Jul-23 10:32am

Quote: And I'm not sure what the full code will look like. Can you please provide the full code?

The idea of the solution was to solve your question, you will have answers once you write the actual code and test it. Unfortunately I am not about to write an entire pack for you, this is my own time helping here and I would rather spend it on my own projects, sorry.

Nonso Nkwoji 31-Jul-23 9:22am

I fixed it with Javascript

// Function to modify product names with line breaks
function modifyProductNames() {
const productTitles = document.querySelectorAll('.product_title.entry-title');
productTitles.forEach(title => {
const originalText = title.innerText;
const modifiedText = originalText.replace(' – ', '<br>');
title.innerHTML = modifiedText;
});
}

// Call the function once the page loads to modify the product names
window.addEventListener('load', modifyProductNames);

Andre Oosthuizen 31-Jul-23 9:25am

Great work! glad you got to the solution.

Split my woocommerce product title into 2 line

1 solution

Solution 1

Add your solution here

Preview 0

Split my woocommerce product title into 2 line

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us