[Support request] Remove product title by seperator with js

[nik9]

Hi Guys,

We are working on a special solution. In order so style our product pages more, we want to hide some part of the product title. For SEO reasons we have to put brand names in it. But we do not want them if a user goes to the product page. The brand name is hooked-in in another way. So there is now the case, that the brand name is twice available on the product page. You can see this in the link in private note.

We also use a seperator “-” between product name and brand name. We wrote a script, which remove the text after the “seperator”. It is working.. but its slow and the user can see the cut from the title.

This is our script and is hookend in in wp_head with prio 1..

Is there a way.. maybe not js to make this faster?

<script>
window.onload = function modifyAllTitles() {
    let titles = findAll("h1.product_title.entry-title");
    titles.forEach(modifyTitle);
}
function findAll(cssQuerySelector) {
  return document.querySelectorAll(cssQuerySelector);
}
function modifyTitle(item, index) {
  item.innerText = item.innerText.split('–')[0].trimEnd()
}
</script>

I found this here for PHP: https://www.pixelninja.me/shorten-woocommerce-product-titles/
This is shorten the title for words or character. But we can not use this because we need to seperate by “-“. Is this possible with PHP?

Cheers

[David]

Hi there,

you should be able to do something like this:

add_filter( 'the_title', 'short_woocommerce_product_titles_chars', 10, 2 );
function short_woocommerce_product_titles_chars( $title, $id ) {
    if ( is_woocommerce() && !is_admin() && get_post_type( $id ) === 'product' ) {
      $title_pieces = explode("–", $title);
      $title = trim($title_pieces[0]);
    }
    return $title;
}
add_filter( 'the_title', 'short_woocommerce_product_titles_chars', 10, 2 );

EDIT – try replacing EN Dash with its Unicode.
See here:
https://www.w3.org/wiki/Common_HTML_entities_used_for_typography

You want the one that begins &#8 – sorry can’t display it in the code here as it just displays the actual screen character.

[nik9]

Hi David,

hmm.. I’m 100% sure the character in “-” is right but the split does not work right. It does not split ” – ” but it splits e.g. Pizza-hunter.. the “-” between pizza and hunter is the same as for the other ” – ” but this does not work. If i split on other character e.g. “l” or so, then it work far better.

In javascript is 100% the same character like in the PHP snipped but java work far better but there we have the performance issue.

I also noticed, that the php snipped has effect also on the admin backend area. It should only affect the frontent for customers and nothing else.

Is this possibe?

[David]

Edited above to exclude the admin area – and see the part above using the equivalent HTML Entity unicode.

[nik9]

Awesome! Works!

I had to use $title_pieces = explode("&#8211", $title);.

Did you see here any problems with that approach? In terms of SEO or other stuff or is this a proper solutions? I guess the crawler is not affected when we hide this via php?

Cheers & many thanks

[David]

This PHP method is filtering the title before it gets output to the HTML. So the removed text is never present on the frontend. But you should find that text is still in any Meta / JSON-LD your SEO plugins are generating.

[nik9]

Hi david,

Okey, so means no SEO issue at all? I see that in the browser tab is also the full title displayed. So this are the meta which you mentoined right?

We very like the current solution! But when its a issue for SEO, then its no the way we want go.

[David]

That all depends as to whether the on screen title is relevant in your SEO strategy. As that content is in the Title tag and your other SEO meta i don’t see it would be an issue when it comes to Search Engines finding that info.

[nik9]

Hi David,

Yes. It’s very relevant for us because this is the brand name and we want that customer us can find when they searching for such a brand. So all in all, you agree that this is now a good solution because the title meta is in the browser tab. 🙂

Update 1:
I just noticed that our code for trimming by “-” has no affect for the products on the home page. The Products which are displayed there are hooked-in via WooCommerce Shortcode [featured_products], [recent_products] and [best_selling_products]. Whats is the difference between the shop archive and single product pages and the products which are displayes via shortcode?

Update 2:
I also noticed that this code does not affect the listing for the product bundles. (Link in note)
Is this because the product name is in another class or a raw SQL query? I do not understand why it works sometime and sometime not. Because this are the same products.. but I guess the display of this product is not the same.

Can you teach me here? 🙂

Cheers

[David]

You can try removing the is_woocommerce template tag from the condition ie.

if ( is_woocommerce() && !is_admin() && get_post_type( $id ) === 'product' ) {

becomes:

if ( !is_admin() && get_post_type( $id ) === 'product' ) {

This ‘should’ apply to the shortcodes on the home page ( or wherever ).

The bundles – doesn’t look the plugin is using the_title function – which is understandable. You would need to ask the developer if that is filterable.

[nik9]

Hi David,

Remocing the is_woocommerce() works! Cool! So the I will ask the bundle plugin developer to ask how we can use the filter there.

Many thanks!

Cheers
Nik

[David]

You’re welcome

[nik9]

Hi David,

Now I found the info for the product bandle overview. Here I found an example how this should work…

add_filter( 'wooco_product_name', 'wooco_shorten_product_name', 99, 2 );
function wooco_shorten_product_name( $name, $product ) {

//Custom Code

return $name;

}

I already add the cuntion to it. But it does not work. Did you see here a obvious error?

add_filter( 'wooco_product_name', 'wooco_shorten_product_name', 99, 2 );
function wooco_shorten_product_name( $name, $product ) {
    if ( !is_admin() && get_post_type( $product ) === 'product' ) {
      $title_pieces = explode("&#8211", $name);
      $name = trim($title_pieces[0]);
    }
    return $name;
}
add_filter( 'wooco_product_name', 'wooco_shorten_product_name', 99, 2 );

[David]

Function looks fine – what happens if you change the "&#8211" to a different character eg. "a"

[nik9]

Nothing 🙁

I thinks the function is wrong maybe it looks fine but there is no function or empty values. Strange..

[Author]

Posts