breadcrumbs to the basket page

Hey Scott,

First you'd need to use a plugin that offers breadcrumbs. Yoast SEO provide the following code:

<?php if ( function_exists('yoast_breadcrumb') ) : ?>
    <div class="yoast-breadcrumb">
        <?php yoast_breadcrumb( '<p id="breadcrumbs">','</p>' ); ?>
    </div>
<?php endif; ?>

Then you can use GPP 1.7 (currently in testing): https://generatepress.com/gp-premium-1-7/

Go to "Elements > Add New > Hook".

Paste the above into the content area, and check the "Execute PHP" option.

For the hook, you can choose before_content.

Then in "Display Rules", choose your Cart page.

For the checkout, create a new Hook Element, and add your content to the content area.

For the Hook, you should see a woocommerce_proceed_to_checkout hook.

Then in your Display Rules, choose the Cart page again.

Hope this helps :)

Hi Tom

Sorry for late reply.
Thanks for this, will it work with the live version now?

Scott

It should :)

Hi Tom

I've just set this up on a dev site, it worked. Elements is brilliant.
https://sg-demo2.getondigitaldesign.co.uk/basket/

Do you know how I might change the beginning path "Home" to go to the "Shop".

Thanks
Scott

This might help: https://kb.yoast.com/kb/change-breadcrumb-title/

Hi Tom

Thanks for the link.

Is it possible to add a css class to the breadcrumb I've added to elements?

I'm currently using this on the other pages

/* BREADCRUMB Yoast Breadcrumb */
.breadcrumbs {
font-size: 14px;
font-family: 'Cormorant Infant', serif;
text-transform: uppercase;
}

Thanks
Scott

So you are wanting to style the breadcrumb differently in checkout page?

If so you should be able to just use this selector:
body.woocommerce-checkout .breadcrumbs

Otherwise you can just add more classes to Tom's code above:
https://generatepress.com/forums/topic/breadcrumbs-to-the-basket-page/#post-642900

Hi Leo

I tried just now adding it to the customiser additional css

/* BREADCRUMB Yoast Breadcrumb */
.breadcrumbs body.woocommerce-checkout {
font-size: 14px;
font-family: 'Cormorant Infant', serif;
text-transform: uppercase;
}

But hasn't changed, Is the code correct?

Thanks
Scott

Looks like your selector is the opposite of what I provided here:
https://generatepress.com/forums/topic/breadcrumbs-to-the-basket-page/#post-714604

Hi Leo

I've tried this:

/* BREADCRUMB Yoast Breadcrumb Checkout */
body.woocommerce-checkout .breadcrumbs {
font-size: 14px;
font-family: 'Cormorant Infant', serif;
text-transform: uppercase;
}

Is that correct?
Thanks
Scott

Yup that looks good.

It's not working?

Hi Leo

No it doesn't seem to be styling it.
https://sg-demo2.getondigitaldesign.co.uk/basket/

Thanks
Scott

That's the cart page and not the checkout page, try this instead:
.woocommerce-cart .yoast-breadcrumb

Oh yeah you're right I'm getting confused.
It works now
Thanks
Scott