Woocommerce breadcrumb doesn’t show primary category

Viewing 13 replies - 1 through 13 (of 13 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.

    ​​​​​​

    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 [rank_math_breadcrumb] 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 ?

    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.

    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 ?

    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.

    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 2 weeks, 5 days ago by George.
    • This reply was modified 2 weeks, 5 days 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.

    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

    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 1 week, 5 days ago by Sajid Khan.
    • This reply was modified 1 week, 5 days ago by Sajid Khan.
    • This reply was modified 1 week, 5 days ago by Sajid Khan.

    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;
    }
    ?>

    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

    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

    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

Viewing 13 replies - 1 through 13 (of 13 total)

You must be logged in to reply to this ticket.