Woocommerce breadcrumb doesn’t show primary category

#88015
Viewing 15 replies - 1 through 15 (of 20 total)
  • Hello,

    Thank you for contacting Rank Math today.

    The breadcrumbs appearing on your product pages are not from Rank math. You can also confirm the same by disabling Rank math breadcrumbs and you will note they are still generated. I checked further and they seem to be WooCommerce breadcrumbs(here is a screenshot: https://i.rankmath.com/gaIn9e). Rank math can only generate breadcrumbs if you have added the specified php function or shortcode. In your case, adding the function is likely causing an issue since you already have existing breadcrumbs definition. You can check this article, specifically under the sub-topic Remove the breadcrumbs : https://docs.woocommerce.com/document/customise-the-woocommerce-breadcrumb/

    You can also get in touch with WooCommerce support to assist you in this.

    Looking forward to helping you. Thank you.

    ​​​​​​

    George
    Rank Math free

    Hello.

    Thank you for the fast reply. How stupid I am. Indeed, I added Woocommerce breadcrumb element in my product page template done by Elementor.

    I’ve added shortcode and now, evrything works like a charme.

    Just a quick question. Can we add the icone “Home” instead of the word “Home” in Rank Math > General Settings > Breadcrumbs > Home page label field ?

    Alberto
    Rank Math business

    Hello,

    You can by modifying one of our filters: https://rankmath.com/kb/filters-hooks-api-developer/#change-breadcrumb-strings

    Looking forward to help you.

    George
    Rank Math free

    Hello.

    Thank you.

    Can you give the exact filter I have to use please ? I have just to past the filter code in functions.php file and it will be okay or I have to add the home icone code in the code of the filter ? And what code, HTML code, unicode, unicode glyph ?

    Alberto
    Rank Math business

    Hello,

    You could use the following code I did for you:

    /**
     * Filter to change breadcrumb html.
     *
     * @param  html  $html Breadcrumb html.
     * @param  array $crumbs Breadcrumb items
     * @param  class $class Breadcrumb class
     * @return html  $html.
     */
    add_filter( 'rank_math/frontend/breadcrumb/html', function( $html, $crumbs, $class ) {
           $customHTML = '<a href="https://yourwebsitehomepage.com"><i class="fas fa-home"></i></a>';
          $html[0] = $customHTML;
    	return $html;
    }, 10, 3);

    Looking forward to help you.

    George
    Rank Math free

    Hello.

    Thank you for the fantastic work you do.

    I’ve added this code in my child theme functions.php file.

    Then I cleared the cache on my site but I don’t the the home icone in the breadcrumb. Have I make some changes in RankMath > General Settings > Breadcrumb ?

    Please see here: https://bon-cafe.mywpstaging.site/produit/drop/

    Here is my child them functions.php file

    <?php
    
    add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
    function enqueue_parent_theme_style() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    	if (is_rtl()) {
    		 wp_enqueue_style( 'parent-rtl', get_template_directory_uri().'/rtl.css', array(), RH_MAIN_THEME_VERSION);
    	}     
    }
    /**
     * Remove the  WooCommerce breadcrumbs 
     */
        remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
    /**
     * Does not filter related products by category
     */
    add_filter( 'woocommerce_product_related_posts_relate_by_category', '__return_false' );
    /**
     * Rename "home" in breadcrumb
     */
    add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_home_text' );
    function wcc_change_breadcrumb_home_text( $defaults ) {
        // Change the breadcrumb home text from 'Home' to 'Accueil'
    	$defaults['home'] = 'Accueil';
    	return $defaults;
    }
    /**
     * Filter to change breadcrumb html.
     *
     * @param  html  $html Breadcrumb html.
     * @param  array $crumbs Breadcrumb items
     * @param  class $class Breadcrumb class
     * @return html  $html.
     */
    add_filter( 'rank_math/frontend/breadcrumb/html', function( $html, $crumbs, $class ) {
           $customHTML = '<a href="https://yourwebsitehomepage.com"><i class="fas fa-home"></i></a>';
          $html[0] = $customHTML;
    	return $html;
    }, 10, 3);
    ?>
    • This reply was modified 4 years, 2 months ago by George.
    • This reply was modified 4 years, 2 months ago by George.

    Hello,

    Please remove the filter code my colleague provided before and use following CSS to show an icon instead of the home text:

    
    .rank-math-breadcrumb p a:first-child {
        font-size: 0;
    }
    .rank-math-breadcrumb p a:first-child:before {
        content: "\f015";
        color: #4dbc15;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 14px;
    }
    

    I hope that helps.

    George
    Rank Math free

    Hello Pratik,

    Thank you very much.

    It works fine.

    Just a quick question. Why I don’t see the home icone on product archive pages ? Instead I see the word “Home” which is set up in Rank Math > General Settings > Breadcrumbs > Homepage label

    Please see the product archive page screenshot https://drive.google.com/file/d/1qFpM4ompUlD017V6EHdSm5GTYaaWgJhc/view?usp=drivesdk

    Please see the product page screenshot https://drive.google.com/file/d/1Yia7Z9T2mv_RTt_sKDo1ZiKycphCmcy_/view?usp=drivesdk

    Sajid Khan
    Rank Math business

    Hello,

    I checked you site and find out that, your Theme is not using Fontawesome icons, so the code my colleague provided before might not work.

    Please try this code:

    I am using this URL: https://www.bon-cafe.net as Home, You might need to update this.

    /**
     * Filter to change breadcrumb html.
     *
     * @param  html  $html Breadcrumb html.
     * @param  array $crumbs Breadcrumb items
     * @param  class $class Breadcrumb class
     * @return html  $html.
     */
    add_filter( 'rank_math/frontend/breadcrumb/html', function( $html, $crumbs, $class ) {
           $customHTML = '<a href="https://yourwebsitehomepage.com"><i class="rhicon rhi-home"></i></a>';
          $html[0] = $customHTML;
    	return $html;
    }, 10, 3);

    Looking forward to help you.

    • This reply was modified 4 years, 2 months ago by Sajid Khan.
    • This reply was modified 4 years, 2 months ago by Sajid Khan.
    • This reply was modified 4 years, 2 months ago by Sajid Khan.
    George
    Rank Math free

    Hello,

    Thank you for the answer. I added the code you gave me in my functions.php child theme file.

    I replaced https://yourwebsitehomepage.com by https://www.bon-cafe.net

    I see no difference. On product archive pages I always see “Home” instead of the home icone (please see here https://drive.google.com/file/d/1qFpM4ompUlD017V6EHdSm5GTYaaWgJhc/view?usp=drivesdk)

    My theme doesn’t support Fontawesome icons but supports this icones http://wpsoul.net/icons/ (rhi-home or f015).

    Here is the whole content of my functions.php file. May be I made a mistake ?

    <?php
    
    add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
    function enqueue_parent_theme_style() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    	if (is_rtl()) {
    		 wp_enqueue_style( 'parent-rtl', get_template_directory_uri().'/rtl.css', array(), RH_MAIN_THEME_VERSION);
    	}     
    }
    /**
     * Remove the  WooCommerce breadcrumbs 
     */
        remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
    /**
     * Does not filter related products by category
     */
    add_filter( 'woocommerce_product_related_posts_relate_by_category', '__return_false' );
    
    /**
     * Filter to change breadcrumb html.
     *
     * @param  html  $html Breadcrumb html.
     * @param  array $crumbs Breadcrumb items
     * @param  class $class Breadcrumb class
     * @return html  $html.
     */
    add_filter( 'rank_math/frontend/breadcrumb/html', function( $html, $crumbs, $class ) {
           $customHTML = '<a href="https://www.bon-cafe.net/"><i class="rhicon rhi-home"></i></a>';
              $html[0] = $customHTML;
        	return $html;
        }, 10, 3);
    /**
     * Rename "home" in breadcrumb
     */
    add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_home_text' );
    function wcc_change_breadcrumb_home_text( $defaults ) {
        // Change the breadcrumb home text from 'Home' to 'Accueil'
    	$defaults['home'] = 'Accueil';
    	return $defaults;
    }
    ?>
    Alberto
    Rank Math business

    Hello,

    About the Home icon, I have added a working CSS code in Appearance > Theme Customization > Additional CSS.

    The reason why it is not working on category products’ pages is because you are displaying there the WooCommerce breadcrumbs but you should replace that WooCommerce breadcrumbs code with the Rank Math one and this issue will be solved.

    Looking forward to help you

    George
    Rank Math free

    Hello,

    Thank you for the faat reply. I appriciate it.

    Can you tell me how I can replace WooCommerce breadcrumbs code with the Rank Math one ?

    I’ve ealready added the code below in my functions.php file which goal is to remove WooCommerce breadcrubms.

    /**
     * Remove the  WooCommerce breadcrumbs 
     */
        remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );

    What else I have to do ?

    Thank you

    Sajid Khan
    Rank Math business

    Hello,

    If the code you are using to remove the WooCommerce breadcrumb is working, then you can add Rank Math breadcrumb like this:

    /**
     * Add Rank Math breadcrumbs on WooCommerce
     */
    add_action( 'woocommerce_before_main_content', 'rank_math_the_breadcrumbs', 20 );

    Thank you

    George
    Rank Math free

    Hello Sajid Khan,

    The code you provide me works. I see Rank Math breadcrumbs but there is 1 little problem. The “Home” icon not appear correctly (please see here https://drive.google.com/file/d/15XZEUYQKUAXtxBM_GwMuwzU7hsEb8t9t/view?usp=drivesdk )

    I’m guessing this problem exists because my theme doesn’t support Fontawesome icons. Can I use this icone http://wpsoul.net/icons/ (rhi-home or f015) ?

    Can I use this icone http://wpsoul.net/icons/ (rhi-home or f015) ?

    You will need to load the font files if you wish to use that.

    You might want to contact your theme provider for further instructions on styling.

    Hello,

    Since we did not hear back from you for 15 days, we are assuming that you found the solution. We are closing this support ticket.

    If you still need assistance or any other help, please feel free to open a new support ticket, and we will be more than happy to assist.

    Thank you.

Viewing 15 replies - 1 through 15 (of 20 total)

The ticket ‘Woocommerce breadcrumb doesn’t show primary category’ is closed to new replies.