[Support request] Remove product title by seperator with js

Home Forums Support [Support request] Remove product title by seperator with js

Home Forums Support Remove product title by seperator with js

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1576218
    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

    #1576366
    David
    Staff
    Customer Support

    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.

    #1576693
    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?

    #1576812
    David
    Staff
    Customer Support

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

    #1576821
    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

    #1577172
    David
    Staff
    Customer Support

    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.

    #1577266
    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.

    #1577511
    David
    Staff
    Customer Support

    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.

    #1577583
    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

    #1578016
    David
    Staff
    Customer Support

    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.

    #1578319
    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

    #1578458
    David
    Staff
    Customer Support
    #1582595
    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 );
    #1582745
    David
    Staff
    Customer Support

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

    #1582812
    nik9

    Nothing πŸ™

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

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.