Woocommerce Shop Breadcrumb

How are you adding the breadcrumbs to your site? Are you using a plugin, and if so, which one?

Or are you on the premium version of the theme?

If you can post a like that will be helpful too. I just need a bit more info so I can replicate what you’re doing.

thanks!

Hi Kevin,

I would like to use Yoast plugin’s breadcrumb. The guide says to input the following code into the theme:

<?php if ( function_exists(‘yoast_breadcrumb’) )
{yoast_breadcrumb(‘<p id=”breadcrumbs”>’,'</p>’);} ?>

(As per https://kb.yoast.com/article/245-implement-wordpress-seo-breadcrumbs
It is to be inserted under single.php and/or page.php file just above the page’s title. Or paste it in header.php at the very end. If you have trouble locating the correct place to add the code, please contact the theme developer for assistance.)

I tried putting it in single.php and/or page, or just putting it in header, no breadcrumb is showing up.

Currently, I only see ” Back to [category] ” showing up on my product details page (it shows up regardless of Yoast).

Any idea where I should put the above code to make it work? I’m not on the premium version of the theme.

Thanks so much!

Hey,

I suggest using a child theme for this so your code is not lost. you can download a child theme here: https://www.kadencethemes.com/child-themes/

Then in your child theme functions.php file you can add this function:

add_action('kt_afterheader', 'kad_yoast_breadcrumbs');
function kad_yoast_breadcrumbs() {
	if ( function_exists('yoast_breadcrumb') ){
		yoast_breadcrumb('<p id="breadcrumbs">','</p>');
	}
}

and that will add it to every page.

Kadence Themes

Thank you! Only one problem with the breadcrumbs, it is aligned on the very left of the website: https://www.twofoldshop.com
Would there be a CSS to align it properly?

Thanks again.

I forgot to mention, there’s also breadcrumb on my front/main page that says “Home”, how can I hide it?
Thanks very much!

.home .breadcrumb_last {
    display: none;
}

Try this CSS. Place into Appearance> Theme Options> Advanced Settings.

#breadcrumbs {
    max-width: 1100px;
    margin: 0 auto;
    margin-bottom: 5px;
}
.home #breadcrumbs {
  display: none;
}

That will align it and remove on the home page.

Kadence Themes

The breadcrumb was slightly out of line (too far left), so I edited max-width to 1070px and it fixed the problem on desktop version (although not too sure if this is the correct fix). However, the tablet & mobile version of the breadcrumb is aligned to the edged of the screen. How can I get some space on the side to align with the rest of the page?

#breadcrumbs {
	max-width: 1070px;
	margin: auto;
	margin-bottom: 5px;
}

Also, I tried to remove the breadcrumb on right side of product pages (Product Pg), which I believe to be woocommerce breadcrumb. I tried with each of the following codes in function.php, but none of them seem to work. Any suggestions?

Thank you very much!

remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0);

add_action( 'init', 'jk_remove_woo_wc_breadcrumbs' );
function jk_remove_woo_wc_breadcrumbs() {
    if ( is_woocommerce() || is_cart() || is_checkout() ) {
        remove_action( 'woo_main_before', 'woo_display_breadcrumbs', 10 );
    }
}

.woocommerce-breadcrumb {
	display: none !important;
}

Change your breadcrumb function to this:

add_action('kt_afterheader', 'kad_yoast_breadcrumbs');
function kad_yoast_breadcrumbs() {
	if ( function_exists('yoast_breadcrumb') ){
		yoast_breadcrumb('<div class="container"><p id="breadcrumbs">','</p></div>');
	}
}

Use css to remove the simple breadcrumb in products:

.cat_back_btn {
    display: none;
}

Kadence Themes

It worked perfectly, thanks so much!