Breadcrumb navigation helps users to understand where exactly they are on your website. This is useful especially when you grouped articles under different categories. Similarly, when you have lot of product categories with WooCommerce plugin, showing breadcrumb will help the users a lot. However, WooCommerce plugin does not offer a default setting to enable breadcrumb in WordPress sites. If you are looking for a solution, here is how you can add breadcrumb in WooCommerce product pages.
Breadcrumbs in WooCommerce Product Page
Before going further, check the below picture to understand how the breadcrumb navigation will look on a product page. As mentioned, this will help users to understand in which section of the shop the product is available. Users can click on the product categories in breadcrumb to check other available products in the same category. Therefore, breadcrumb can potentially increase your sales by allowing visitors to quickly navigate through the shop.
In addition to helping users, Google, Bing and other search engines also show breadcrumbs in search results. When breadcrumb is available, it will replace the URL in the search results as shown below. This can help to improve the click through rate of your product pages compared to showing URL.
Add Breadcrumb in WooCommerce Product Pages
Though WooCommerce plugin does not offer default settings, you have multiple options to insert breadcrumb on product pages.
- Themes supporting WooCommerce breadcrumb
- Manually inserting breadcrumb and customizing the appearance with a plugin
- Using SEO plugins like Yoast SEO
We will explain all these options in detail in the following sections.
1. Check Themes with Custom WooCommerce Settings
WooCommerce is the most popular ecommerce plugin for WordPress with more than 5 million active installations. Due to this popularity, many free and commercial themes offer custom shop settings for WooCommerce stores. Therefore, before using a plugin to insert breadcrumb in product pages make sure to check whether your theme provides in-built breadcrumb feature. For example, all WooThemes and default WordPress themes (like twenty-twenty-two) automatically supports WooCommerce breadcrumb without any additional setting.
Similarly, popular Astra theme also supports WooCommerce breadcrumbs by default. However, you have an option in customizer section to disable it if you want to use other options.
2. Manually Inserting WooCommerce Breadcrumbs
WooCommerce plugin offers a woocommerce_breadcrumb() function to display breadcrumb wherever you want on the site. You can manually insert this function in the single product template to show the breadcrumb without any additional plugin. Remember, the changes made in WooCommerce plugin file will be deleted whenever you update the plugin. Since WooCommerce is also updated frequently, you need to keep a track of this change and update the file to keep the breadcrumb showing on your product pages. Therefore, follow this method only if you know what you are doing.
- When you are in WordPress admin panel, go to “Plugins > Plugin File Editor” section. Note that if you are using themes like twenty-twenty-two, you can find the plugin file editor under “Tools” section.
- Click the dropdown next to “Select the plugin to edit” option and select “WooCommerce” plugin from the list.
- Click “Select” button to reveal the template files part of WooCommerce plugin.
- You will see list of files and folders and click on “templates” folder and then select “single-product.php” file.
- Insert the following code at line number 33 just after the WooCommerce main content hook.
<?php woocommerce_breadcrumb(); ?>- Click “Update File” button to save your changes.
- It should look like below on the plugin file editor.
Now, open your product page and you will see a breadcrumb showing on top of the product section.
After manually inserting breadcrumbs, you can use WooCommerce Breadcrumbs plugin to customize the appearance. Note that this plugin does not insert the breadcrumb trails, however, allows you to change the separator, adding wrapper CSS class, changing home text, home URL, etc.
WooCommerce Breadcrumbs plugin uses additional parameters of woocommerce_breadcrumb() function as explained in this WooCommerce documentation and allows you to beautify the appearance. In addition, you can use this plugin to disable default WooCommerce breadcrumb which is useful when you want to use other options.
3. Using SEO Plugins Like Yoast
Since breadcrumb is part of optimization, all WordPress SEO plugins offer a direct or indirect way of adding breadcrumb to your site. This is a good option if you are already using SEO plugin, though you need to edit the theme file.
- Make sure you have Yoast SEO plugin active on your site.
- Go to “SEO > Search Appearance” menu from the sidebar and then navigate to “Breadcrumbs” tab.
- Here, you can customize the breadcrumb separator, home text, prefix, etc.
- Make sure to select “Category” option for “Products” under “Taxonomy to show in breadcrumbs for content types” section.
- Scroll down to bottom and click “Enabled” option to allow Yoast breadcrumb on your theme.
- Unfortunately, it does not end here. Copy the following code and insert it in single-product.php file as explained in manual insertion method above.
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>Alternatively, instead of the above code you can insert the following shortcode in single-product.php file.
<?php echo do_shortcode("[wpseo_breadcrumb]"); ?>You can customize the appearance by adding custom styles to the CSS id “breadcrumbs”. Yoast breadcrumb on your product page will look like as shown in the below picture.
Note that Yoast also offers breadcrumb block for Gutenberg editor which you can manually insert on your product pages from the editor. However, WooCommerce products are custom post types and only works with Classic Editor interface. Therefore, you can use the [wpseo_breadcrumb] shortcode to insert breadcrumb on product pages. This is useful when you have only few product pages on your site and do not want to edit plugin files. However, you may need to adjust the appearance depending upon your theme.
As you can see, Yoast breadcrumb shows different trails than the default WooCommerce breadcrumb. It misses “Clothing” category which is a parent category of “Accessories” for the product “Belt”. In some themes, you may need to edit the products and update primary category to show Yoast breadcrumb trails properly. However, it simply does not show the parent category in many themes.
Final Words
As you can see, being a popular plugin WooCommerce has rigid setup without an option to insert breadcrumb on product pages. Unless your theme support WooCommerce breadcrumbs, it is quite a difficult task to insert on your product pages. Though you can edit plugin file and insert Yoast or Rank Math breadcrumb code, it will not show parent category with most themes or will not align properly. Manual insertion is the best available option along with WooCommerce Breadcrumbs plugin for customizing the appearance. At any case, you need to modify PHP template and keep a track to make sure the changes are not deleted whenever you update WooCommerce plugin.
Leave a Reply
Your email is safe with us.