How to Add Breadcrumbs in WooCommerce (Beginners Guide)

How to Add Breadcrumbs to Your WooCommerce Store (2023 Guide)

Are you looking to improve the navigation and SEO of your WooCommerce store? One important element that can help with both is breadcrumb links. Breadcrumbs provide a trail of links, usually near the top of the page, that show the user‘s path from the homepage to their current location. This makes it easy for users to orient themselves and navigate to higher-level pages.

Breadcrumbs also provide semantic hints to search engines about your site structure and content hierarchy. Search engines like Google sometimes even display breadcrumb links in search results, which can improve click-through rates.

In this beginner‘s guide, you‘ll learn why breadcrumbs are important and how to easily add them to your WooCommerce store in 2023. We‘ll cover multiple methods, including using plugins and manually adding code. Let‘s get started!

Why Use Breadcrumbs in Your WooCommerce Store?

There are two main reasons to add breadcrumb navigation links to an eCommerce site:

1. Improve user experience and reduce bounce rates. Breadcrumbs act as a secondary navigation aid, making it easier for users to browse your product catalog and quickly jump to different category levels. This is especially helpful if a user lands on a deep product page from a search engine. Instead of feeling stuck, they can use breadcrumbs to explore related products or navigate to other sections of your store.

2. Boost search engine optimization (SEO). Breadcrumbs create an easy-to-follow linking structure that tells search engines how your pages are related. This can help your SEO by:

• Reinforcing the topical hierarchy of your site
• Encouraging Google to use your breadcrumb links in search results (with proper markup)
• Improving internal linking and spreading link equity to important pages
• Helping search engine bots discover and crawl all your site‘s pages

Best Practices for WooCommerce Breadcrumbs

When adding breadcrumbs to a WooCommerce store, follow these tips for the best results:

• Make sure breadcrumb text links back to the correct category and parent pages
• Use short, descriptive, keyword-rich anchor text for each breadcrumb link
• Place breadcrumbs prominently at the top of the page, above the main content
• Style links to stand out from surrounding text (e.g. with a different color or underline)
• Include the current page as the last item, but don‘t make it a link
• Use separators like » or / between levels
• Add schema markup so search engines can parse your breadcrumb data
• Avoid breadcrumb trails that are too long (aim for 3-4 levels max)
• Make breadcrumbs unobtrusive on mobile devices with limited screen space

Now that you know the why and how of breadcrumbs, let‘s look at some methods to implement them on your WooCommerce site.

How to Add Breadcrumbs in WooCommerce (3 Methods)

There are two main ways to add breadcrumb navigation to a WooCommerce store:

1. By using a WordPress plugin (easiest)
2. By manually adding code to your theme template files
3. Hybrid approach – using a plugin‘s shortcode in your template files

We‘ll go through each method step-by-step. Use the one that best fits your skill level and needs.

Method 1: Adding Breadcrumbs With a WooCommerce Plugin

Using a plugin is the simplest way to get breadcrumbs on your WooCommerce site without touching any code. There are a number of WordPress SEO and breadcrumb plugins that support WooCommerce out of the box.

Here are a few of the best breadcrumb plugins for WooCommerce in 2023:

• Yoast SEO – Popular all-in-one SEO toolkit that includes breadcrumbs
• Breadcrumb NavXT – Dedicated breadcrumb plugin with flexible settings
• WooCommerce Breadcrumbs – Lightweight plugin just for WooCommerce stores
• Rank Math – SEO plugin with breadcrumbs and schema markup

For this tutorial, we‘ll use the free Yoast SEO plugin. It automatically adds breadcrumbs to WooCommerce product pages using sensible defaults.

Step 1: Install and activate the free Yoast SEO plugin. You can do this by going to Plugins → Add New in your WordPress dashboard and searching for "Yoast SEO". Click the "Install Now" button and then "Activate".

Step 2: Go to the SEO → Search Appearance settings page.

Step 3: Click on the "Breadcrumbs" tab.

Step 4: Toggle the "Enable Breadcrumbs" setting to "Enabled".

Step 5: Customize the breadcrumb settings to your liking. Yoast SEO gives you options to:

• Change the breadcrumb separator character
• Choose a taxonomy to show in the breadcrumbs for post types
• Add a prefix like "You are here" before the breadcrumb trail
• Disable showing the blog page in breadcrumbs
• Enable or disable showing the breadcrumb trail on the front page

The default settings will work well for most WooCommerce stores. But feel free to experiment with the options.

Step 6: Click the "Save Changes" button.

That‘s it! Breadcrumb links should now appear on your WooCommerce product category and product detail pages.

To test it out, visit a product page on your store‘s front end. You should see a trail of breadcrumb links like:

Home > Product Category > Sub-Category > Product Name

Clicking on the category links will take you to those archive pages. The current product page will be at the end of the breadcrumb trail, but not linked.

Yoast SEO also automatically adds the correct Schema.org structured data for breadcrumbs. This increases your chances of Google showing the links in search results.

Overall, Yoast SEO is the simplest solution for adding SEO-friendly breadcrumbs to a WooCommerce site. However, some WooCommerce themes have breadcrumb functionality built-in, which can conflict with Yoast‘s.

That brings us to method #2.

Method 2: Manually Add WooCommerce Breadcrumbs via Code

If you‘re comfortable editing your WordPress theme files, you can add breadcrumb code directly to your WooCommerce templates. This gives you more control over the placement and styling.

WooCommerce has a built-in breadcrumb function called woocommerce_breadcrumb(). You just need to call this function in the appropriate template files.

Here‘s how:

Step 1: Open the header.php file in your current WooCommerce theme.

Step 2: Paste the following code at the top of the file, after the opening tag:

<?php
if ( function_exists(‘yoast_breadcrumb‘) ) {
yoast_breadcrumb( ‘

‘,‘

‘ );
}
?>

This checks if the Yoast SEO plugin is active and uses its yoast_breadcrumb() function to display the breadcrumb trail. If you‘re not using Yoast, you can replace this with:

<?php
if ( function_exists( ‘woocommerce_breadcrumb‘ ) ) {
woocommerce_breadcrumb();
}
?>

Step 3: Save the header.php file.

Now breadcrumbs should display at the top of your WooCommerce pages. The exact location will depend on your theme‘s template structure.

You can use CSS to style the appearance of the breadcrumb text and links. For example, to change the link color and font size, you could add this to your theme‘s stylesheet:

.woocommerce-breadcrumb a {
color: #007bff;
font-size: 0.9rem;
}

Method 3: Hybrid – Use a Breadcrumb Shortcode in Your Templates

Finally, there‘s a hybrid approach that combines the convenience of a plugin with the control of editing template files.

Some breadcrumb plugins provide shortcodes that you can paste directly into your WooCommerce template files. This lets you position the breadcrumbs exactly where you want, but still take advantage of the plugin‘s settings and schema markup.

For example, the Breadcrumb NavXT plugin uses this shortcode:

And the WooCommerce Breadcrumbs plugin uses:

To use this method:

Step 1: Install and activate your chosen breadcrumb plugin.

Step 2: Go to the plugin‘s settings page and configure the options as desired.

Step 3: Identify the WooCommerce template file(s) where you want to display breadcrumbs (e.g. archive-product.php for product category pages).

Step 4: Open the template file(s) and paste the plugin‘s breadcrumb shortcode where you want the links to appear.

Step 5: Save your changes.

This approach works well if you‘re already using a breadcrumb plugin but want to move the position of the links in your templates.

Troubleshooting WooCommerce Breadcrumbs

If your breadcrumbs aren‘t showing up or working as expected, here are a few things to check:

• Make sure the plugin is active or the breadcrumb function is called correctly in your template files.
• Check that breadcrumbs are enabled in your plugin settings.
• Clear any caching plugins you may be running.
• Inspect the page source to see if there are any HTML errors preventing the breadcrumb links from displaying.
• Test on multiple devices to check for responsive styling issues.

You can also use a web crawler tool like Screaming Frog to see how search engines will view your breadcrumb links and schema markup.

Key Takeaways

Adding breadcrumb navigation to your WooCommerce store can have big benefits for user experience and search optimization. It‘s a small change that makes your site more browsable and sends positive signals to search engines.

For beginners, using a plugin like Yoast SEO is the easiest way to get up and running with breadcrumbs. More advanced users can hardcode breadcrumbs into their WooCommerce template files for precise control.

Whichever method you choose, make sure to follow breadcrumb best practices like using clear labeling, keeping trails short, and adding schema markup.

Do you have any other tips for implementing breadcrumbs in WooCommerce? Let us know in the comments!