-
Hello.
I have the exact same problem which is described in this topic: https://support.rankmath.com/ticket/woocommerce-breadcrumb-bug/.
The main product category is not displayed in my breadcrumb. Instead, the first selected category from the list on the product edit page is displayed in my breadcrumb.
I have already done the “Make term primary” (please see here: https://drive.google.com/file/d/1Gx_g5mg3fMh-Gzg7LSY9N3vLPAF1VvC0/view?usp=drivesdk )
I have chosen “Product categories” in WP Dashboard > Rank Math > Titles & Meta > Primary Taxonomy (please see here: https://drive.google.com/file/d/1bW-zkCyDTvjjUAaM97ewZArT4BFE5iQZ/view?usp=drivesdk ).
Have I to add this code to my theme functions.php file ?
<?php if (function_exists(‘rank_math_the_breadcrumbs’)) rank_math_the_breadcrumbs(); ?>When I add it, the problem is still there and I have the following error showing https://drive.google.com/file/d/1_6KKM8Dcfoap1AH8_skG2KLB0-bTWpy_/view?usp=drivesdk
Many thanks.
-
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 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); ?>
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 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.
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
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.
The ticket ‘Woocommerce breadcrumb doesn’t show primary category’ is closed to new replies.