CodeCanyon BWD Breadcrumb - WordPress Plugin

How to Set Up CodeCanyon BWD Breadcrumb in Elementor

CodeCanyon BWD Breadcrumb is not just there to add a simple "Home / Page" line to a page. Its main practical purpose is to give an Elementor editor a manageable breadcrumb block with ready-made styles, a dynamic page path, WooCommerce support, and a polished look without hand-coding HTML. In this guide, we will walk through how to prepare the site, where to place the widget, which settings to verify after installation, how to choose a preset, how to avoid duplicate breadcrumbs from the theme or an SEO plugin, and how to validate the output both in the browser and in structured data tools.

This guide is written for site owners, Elementor editors, and developers responsible for pushing pages live. It does not repeat the short description from the product page. Instead, we will cover the full workflow: installing the ZIP package, initial activation, placing the widget in a template, adjusting the visual style, setting it up for a WooCommerce store, checking microdata, diagnosing common issues, and comparing it with similar solutions.

It is important to understand what the product does and does not do. BWD Breadcrumb adds a visual breadcrumb widget for Elementor and helps you display the navigation path exactly where it fits best in your layout. It does not replace a well-structured site, fix messy categories, or guarantee that Google will show an enhanced snippet. You only get a solid outcome when the widget is placed correctly, the page hierarchy makes sense, duplicate breadcrumb blocks are removed, and the markup is checked after publishing.

What the breadcrumb block does and when it is actually useful

Breadcrumbs show the path from a broader section to the current page. On a services website, that might look like "Home / Services / Consultation"; on a blog, "Home / Blog / Category / Article"; in a store, "Home / Catalog / Category / Product". For visitors, it is a quick location map. For editors, it is a way to avoid overloading the main menu. For search engines, it can act as an extra signal about page structure if the markup is implemented correctly.

BWD Breadcrumb is useful when the site is already being built with Elementor and you want the breadcrumb path somewhere other than where the theme outputs it automatically, such as below the header, above a post template title, inside a product section, next to a decorative block, or inside a narrow container. Standard themes often display breadcrumbs together with the system page title. On Elementor-based projects, that is not always the right fit: the title and hero section may be built manually, while the default breadcrumb ends up too high, too low, or too wide for the intended layout.

The product has several confirmed core features: ready-made style presets, dynamic breadcrumb generation based on page hierarchy, WooCommerce support, two separator types - text and icon, stated Google Schema readiness, responsive behavior, Elementor integration, and a translation file. Those features sound brief, but each of them involves a practical choice. The preset needs to match the theme design. The dynamic path should be checked on pages, posts, categories, and products. The separator must remain readable on mobile. Schema should be verified in an external tool rather than accepted on trust.

When the widget is better than the theme's built-in output

Use BWD Breadcrumb when exact placement inside an Elementor template matters. For example, you might have a single post template where a slim navigation strip comes first, then the H1, then meta details and an image. If the theme outputs breadcrumbs automatically, you often have to disable or hide them first and then recreate the styling manually. The widget gives you a cleaner workflow: drag in the element, choose a style, adjust the spacing, and save the template.

A second common case is a WooCommerce store. In a standard store setup, breadcrumbs may come from the theme, WooCommerce, an SEO plugin, or a separate Elementor block. When all of those sources are active at once, visitors see two breadcrumb paths, and sometimes they are not even the same. BWD Breadcrumb should be treated as the one chosen visual source. The other sources should be disabled through normal settings or carefully hidden if the theme documentation explicitly allows it.

When the plugin may be unnecessary

If you use Elementor Pro and are already happy with its Breadcrumbs widget together with Yoast SEO, you may not need a separate plugin. If your site runs on a classic theme with solid built-in breadcrumbs that display correctly across all page types, BWD Breadcrumb is not essential either. If the site is very small and consists of five flat pages, the benefit of a breadcrumb path will be limited.

There is also an obvious technical limitation: if the site structure is not thought through, the breadcrumb widget will only expose that problem. It will not guess the correct category for a post if multiple categories are assigned and no primary category is set. It will not build a useful path for a page that has no parent. It will not fix URLs created by a third-party permalink manager. Breadcrumbs visualize hierarchy; they do not design it for you.

Before installation: what to check in WordPress, Elementor, and your site structure

Before installing the plugin, it is worth spending a few minutes checking the environment. That helps you separate product issues from site issues. For BWD Breadcrumb, four things matter most: Elementor must be installed, you need administrator access, the page structure should be clear, and there should not already be an active breadcrumb output coming from the theme or an SEO plugin.

Start with Elementor. The widget is added through the elements panel, so without an active Elementor installation the whole setup makes no sense. The Elementor editor should open normally on the site, and basic widgets should drag onto the page without problems. If the editor is already freezing, resolve the theme, cache, or plugin conflict first; otherwise, once BWD Breadcrumb is installed, it will be hard to tell what actually broke.

Then review the structure. For pages, check parent-child relationships. For posts, check categories and the primary category if your SEO plugin defines one. For WooCommerce products, check the assigned product category and any nested category structure. If you plan to show breadcrumbs on service pages, create a parent page such as "Services" ahead of time and attach child pages to it. That way the path explains the page structure instead of showing only "Home / Page Title".

Checking existing breadcrumb sources

The most common mistake when rolling out breadcrumbs is enabling a new widget on top of an existing breadcrumb output. The source may be the theme, WooCommerce, Yoast SEO, Rank Math, AIOSEO, SEOPress, or a standalone plugin. Before installing BWD Breadcrumb, open several typical pages and see whether a navigation path is already displayed below the header, above the title, inside a product page, or in a post template.

If breadcrumbs are already present, decide which source will own the visible block. There is no reason to leave two outputs active "just in case." For users, that looks like a layout mistake; for editors, it creates confusion because one block changes in Elementor while the other is controlled in theme settings. The right approach is one visible breadcrumb block per page, followed by a separate structured data check after publishing.

Checking permissions and the ZIP installation method

CodeCanyon plugins are usually installed by uploading a ZIP archive in the WordPress admin area. That requires an administrator role and access to the Plugins section. If the site is managed by an agency or a locked-down hosting environment, confirm in advance that manual plugin uploads are allowed. On some corporate sites, extension installation is restricted by security policy, so the editor will need a developer or the site owner to handle access.

Prepare a backup or at least a hosting restore point. This is especially important if the site uses many Elementor add-ons. BWD Breadcrumb itself is a narrow-purpose widget, but any new extension can load CSS, JavaScript, or PHP code. If Elementor stops opening after activation, you need a quick rollback path.

Installation and initial activation with minimal risk

Installation starts in the WordPress admin area. Open Plugins, then Add New, choose Upload Plugin, upload the ZIP archive, and click Install Now. After installation, activate the plugin with Activate. If WordPress says the archive does not contain a valid plugin, check whether you uploaded the full package with documentation instead of the installable ZIP. Commercial products sometimes include the actual plugin file inside the downloaded archive.

After activation, do not start by editing the live homepage. Create a draft page or open a test page in Elementor. In the widgets panel, search for BWD or Breadcrumb. If the widget appears, drag it into a simple section above a text block and update the page. The first test only needs to confirm that the element renders, the editor does not crash, and the public-facing site shows the breadcrumb path.

Minimal test page

The best first test is a child page. Create a page called "Test Service", assign "Services" as its parent, and add the BWD Breadcrumb widget in Elementor. The expected result is a path that includes the homepage, the parent section, and the current page. If the path shows only "Home" or only the current page, the problem is usually not the color or preset. It is more often caused by missing hierarchy or by the current page type not returning the expected data.

Quick post-install check: the widget appears in the Elementor panel, the page updates without errors, the breadcrumb path is visible on the live site, the links point to the correct pages, and the current item does not look like an unnecessary link unless the design specifically calls for that.

What to do if the widget does not appear

First, make sure Elementor itself is active. Then refresh the editor page and search for BWD rather than only Breadcrumb. If the site uses admin-side caching or aggressive script optimization, temporarily disable the optimizer for testing. If Elementor does not load at all, use Safe Mode as a diagnostic tool: it helps determine whether the editor is being affected by a theme conflict or another plugin.

There is no reason to jump straight to reinstalling WordPress or switching themes. With Elementor widget issues, a step-by-step check is usually more effective: is Elementor active, is the new plugin active, are there browser console errors, does the editor open in Safe Mode, and does the widget appear on a clean test page? That order saves time and avoids breaking the live site.

Where to place breadcrumbs in Elementor templates

BWD Breadcrumb works best not on a one-off page, but in reusable templates. If you manually add the widget to a single page, it only helps that page. If you place it in a post template, service page template, or product template, you get consistent behavior across an entire group of pages. That matters most on sites where breadcrumbs are part of the navigation system rather than a decorative line.

In Elementor, the placement rule is simple: breadcrumbs usually belong above the main title or next to it, but not above the entire site header. The visitor should already understand that they are inside a page, not still navigating the main menu. A strong placement is the first content container after the header: a slim row, then the H1, then a short intro or meta information. In a store, breadcrumbs are often placed above the product title or above the main "gallery + price + button" grid so the shopper can easily return to the category.

Service page template

For a service page, use a path like "Home / Services / Service Name". In the Elementor template, create a top container with a limited width, add BWD Breadcrumb, then place the H1 and a short introductory paragraph below it. If the service has child subpages, confirm that the parent relationship is set in the WordPress page settings rather than only being represented visually in the menu.

Adjust the spacing so the breadcrumbs do not sit tight against the header. On desktop, a small top and bottom margin is usually enough. On mobile, the line may wrap, so avoid placing it in an overly narrow column next to other elements. If the breadcrumb wraps onto two lines, it should remain readable and should not overlap the heading.

Blog post template

On blogs, the main difficulty is categories. If a post belongs to multiple categories, the breadcrumb path may choose a route you do not consider the main one. Some SEO plugins support a primary category, but BWD Breadcrumb may rely on standard hierarchy or WordPress data depending on how it is implemented. That is why you should not test just one post. Test at least three: a simple post with one category, a post in a nested category, and a post assigned to multiple categories.

If the path runs through the wrong category, do not try to cover that up with decorative text in the widget. It is better to clean up the category structure, assign a primary category in the SEO plugin if your stack supports it, or accept a simpler path. A decorative breadcrumb that looks right but follows the wrong structure is worse than an honest, shorter path.

WooCommerce product template

For products, breadcrumbs are especially useful because shoppers can return to the category without going back through the menu. In the product template, place the widget above the product title or above the main "gallery + price + button" area. Check the path on a product in a single category and on a product in a nested category. If WooCommerce or the theme already outputs its own breadcrumbs, disable them in the standard way or do not add BWD Breadcrumb to that template.

Do not place breadcrumbs too close to purchase buttons, variation selectors, or cart notices. They should function as page-level navigation, not as part of the sales block. On mobile, it is usually better to place them above the product title so the path does not compete with the price and variation controls.

Presets, separators, and visual tuning to match the site design

One reason to choose BWD Breadcrumb over a fully manual setup is its ready-made presets. The product page and demo make it clear that the plugin is built around multiple visual options rather than a single plain text style. That is useful on sites where breadcrumbs should feel like part of the design system, with a colored background, an icon, a contrasting final item, or a more visible separator.

But a preset should not live separately from the theme. If the site has a strict, text-first look, an overly bright breadcrumb can feel like a promotional banner. If the hero section is already visually busy, a pale breadcrumb may disappear into the layout. Setup should not begin with "Which preset looks better?" It should begin with "Which preset helps visitors understand the path without fighting the heading?"

How to choose from 10 styles

Start with the quietest option. Add it to the template, open the public page, and evaluate three states: normal link, separator, and current item. If everything reads clearly, only then try more expressive presets. Brighter styles can work well on landing pages, promo pages, store categories, and designs where the breadcrumb path is part of the decorative system.

For an informational site, a compact style usually works best: text links, moderate contrast, and a simple separator. For a store, a style with a more visible background can make sense because shoppers often navigate back from the product to the category. For a corporate services page, neatness matters most: the breadcrumb should guide the visitor without dominating the hero area.

Text and icon separators

The plugin states support for two separator types: text and icon. A text separator is easier to control. For example, / or > is almost always clear and wraps predictably. An icon separator can look more modern, but it needs to be checked at different screen sizes and in different browsers. If the icon looks too small, turns into an empty square, or breaks the line height, go back to the text version.

For accessibility, the separator should not be the only way to understand the structure. Links should be visually distinct from the current item through color, weight, or state. If every element looks the same, users may not understand where they are now and which items are parent pages.

Colors, spacing, and typography

In Elementor, you will usually see tabs such as Content, Style, and Advanced. The exact controls available in a specific BWD widget depend on the product version, but the practical sequence stays the same. First choose the structure and preset, then adjust the link colors and current-item color, then review spacing and responsiveness. Do not start with fine typography before confirming that the path itself is correct.

For a typical site, choose a text size slightly smaller than the H1 and the main introductory paragraph. Breadcrumbs are supporting navigation, not the main heading. Link color should be noticeable, but not brighter than the page's primary call to action. The current item can be less prominent, because it does not always need to link back to the current page. If the last item is clickable, make sure that does not trap users in a pointless loop where the page links to itself.

Dynamic paths: how the product builds the breadcrumb trail and where limitations appear

Dynamic breadcrumbs are valuable because the editor does not have to enter the path manually on every page. The widget reads the current page context and builds the trail from the available hierarchy. For pages, that means parent pages. For posts, categories and archives. For products, the store, categories, and the product itself if the WooCommerce structure provides that data.

There is a tradeoff: dynamic output depends on WordPress data. If a page has no parent, the breadcrumb will be short. If categories overlap, the path may be debatable. If a product belongs to multiple categories, the output depends on which path is treated as primary. If the site uses custom post types created by third-party plugins, behavior should be checked separately, because the product page confirms the main use cases but does not describe every possible custom content structure.

Checking the path across page types

After configuring the widget, build a small set of test URLs. It should include a regular page, a child page, a blog post, a category archive, a product, a product category, and a page where breadcrumbs should not appear. On each URL, check not just the appearance but the meaning of the path. A good breadcrumb answers the question "How do I go one level up?" rather than simply echoing the URL.

If the homepage shows only "Home" and nothing else, that is not always an error. Breadcrumbs are often unnecessary on the homepage. It is usually better to hide the block for the homepage at the template or display-condition level, if your stack allows it, than to leave a single word there merely because the widget exists.

Why the URL and the breadcrumb path may differ

Do not confuse the URL with the navigation hierarchy. A page may have an address like /services/audit/, but if WordPress does not assign "Services" as its parent, the dynamic breadcrumb may not show that level. A post may use a date-based or custom permalink structure, while the breadcrumb is built from categories. That is normal if the chosen behavior matches the site's information architecture.

Google explicitly notes in its guidance that a breadcrumb should reflect the user's typical path, not necessarily mirror the URL mechanically. So you do not need to force every address segment to match exactly. What you need is a clear and stable path that supports navigation and does not mislead people.

The setup - output - verify - fix loop

For every important page, use the same control sequence. The widget is added in Elementor. The page or post has valid hierarchy in WordPress. The public page shows the expected path. The links work. On mobile, the line does not break the layout. In Rich Results Test or a similar tool, there are no critical breadcrumb markup errors. If any of those checks fail, fix the source of the issue rather than the styling.

This approach is especially useful on sites with many templates. Sometimes breadcrumbs work perfectly on regular pages but disappear in Elementor Canvas because the template disables theme elements. Sometimes they show on products but not on informational pages because the theme only outputs them in a WooCommerce context. BWD Breadcrumb helps move control into Elementor, but you still need to know which template is responsible for each specific URL.

Google Schema, SEO, and realistic result checks

The product page states Google Schema readiness. That is a meaningful advantage, but it should not be interpreted as a guarantee of enhanced search display. Search engines decide for themselves whether to show breadcrumbs in results, and valid structured data is only one requirement among many. So the real task for the site owner is not to "turn on SEO," but to make sure the visible path and the structured data do not conflict.

Google describes BreadcrumbList as an ordered list of items where each entry has a position, a name, and, for intermediate items, a link. In practice, that means the order should run from the top level to the current page, the labels should be clear, and the links should be accessible without login. If the page is blocked from indexing, disallowed in robots.txt, or available only to authenticated users, the validation result may not be what you expect.

How to validate the markup after publishing

Open the published page, copy the URL, and test it in Rich Results Test. On a local site or a closed staging domain, URL-based validation may fail because the tool needs public access. In that case, you can temporarily validate the HTML source or move the check to a publicly accessible test URL. After running the test, do not just confirm the presence of a Breadcrumb type. Review the errors as well. Warnings may be less critical, but they are still worth reading.

Do not draw conclusions from a single URL. Test at least a page, a post, and a product if the site includes WooCommerce. Different content types can output different paths and different markup elements.

What to do if Schema is duplicated

If BWD Breadcrumb, an SEO plugin, and the theme are all active on the same page, the source code may contain multiple breadcrumb markups. Multiple paths do not always mean a critical error by themselves, but for a typical site they make troubleshooting harder. It becomes especially problematic when the visible breadcrumb shows one path while the SEO plugin's JSON-LD shows another. At that point, both the search engine and the site team are left guessing which structure is meant to be primary.

The solution depends on your stack. Sometimes the visible breadcrumb is handled by BWD Breadcrumb while Schema is left to the SEO plugin, as long as both represent the same path. Sometimes the theme breadcrumb output is disabled. Sometimes an older block is removed from the template. The key point is this: do not hide a visual duplicate with CSS alone if conflicting markup still remains in the code. If you are not sure, first get down to one visible block and one clear source of structured data.

SEO value without inflated promises

Breadcrumbs help users and may help search engines understand structure more clearly. But they do not replace headings, internal linking, XML sitemaps, canonical URLs, or clean category architecture. You should not expect ranking gains just from installing a widget. The real benefit is different: visitors understand where they are more quickly, editors get a consistent template element, and the site's structure becomes easier to inspect.

From an SEO standpoint, the safer way to describe the goal is this: BWD Breadcrumb helps you display a clean navigation path in Elementor and validate it as part of the site's overall structure. It is a useful interface element, not a magic SEO button.

Practical use case: breadcrumbs for a WooCommerce catalog

Let us look at a concrete example. Imagine a store with categories like "Catalog / Accessories / Backpacks" and products inside them. The goal is to show breadcrumbs in the product template so shoppers can return to the category and keep browsing. The site is built with Elementor, and the theme's default breadcrumbs are poorly placed: too high, spaced incorrectly, or sitting next to a system page title.

The target is a compact path above the product title: "Home / Catalog / Accessories / Backpacks / Product Name". At the same time, there should not be a second breadcrumb block coming from WooCommerce or the theme, the separators must remain readable, and on mobile the line should wrap without causing horizontal scrolling.

Preparing the catalog

Start by checking your product categories. Each product should have an assigned category, and nested categories should reflect a real path. If a product sits in several categories at once, decide which path should be treated as primary. In a simple store, a clean category structure is often enough. In a more complex setup, you may need settings from the theme or an SEO plugin, but do not invent controls your plugin stack does not actually provide.

Then review how breadcrumbs are currently displayed. Open a product on the public-facing site. If WooCommerce breadcrumbs are already there, decide whether you want to disable them. WooCommerce documentation shows a developer-oriented way to remove its breadcrumb output through a child theme or a snippets plugin, but that is not a universal recommendation for every theme. If the theme offers a toggle in settings, use the toggle. Use code only when you understand exactly which output you are removing.

Setting up the product template

1. Open the single product template in Elementor or create a test template for a limited product group.
2. Add a top container above the product title and place BWD Breadcrumb there.
3. Choose a calm preset, then adjust the link color, current-item color, and separator.
4. Check that the container has a sensible width and does not run into the screen edge on mobile.
5. Save the template and open several products from different categories.

After that, verify the user actions. Click the category in the path. It should open the correct product category, not the general shop page, if the path is supposed to include the category. Click "Home" or the first item. It should take users to a top-level page that makes sense to them. If the word "Home" is not appropriate for a Russian-language site, check the localization or translation settings. The product page states that a pot file is included, but the actual strings and the translation path need to be checked in the installed version.

Verifying the result

Open a product as a regular visitor in a private browser window. This matters because a logged-in administrator may see the WordPress admin bar, disabled cache, or other special conditions. Check the desktop view, tablet width, and mobile view. Then open the HTML source or a structured data tool and confirm that the breadcrumb markup is not conflicting with another source.

If everything works, move the template from the test group to the intended display conditions. Do not roll it out to the entire store immediately if you have products with unusual category structures, hidden products, uncategorized products, or multiple language versions. First validate the edge cases, then expand the scope.

Safe visual improvements without editing the plugin core

Sometimes the widget's built-in settings are enough. But in some cases you may want to fine-tune the appearance slightly: reduce awkward wrapping, soften the background, add a consistent border radius, or adjust spacing between items. There is no need to edit the plugin files for that. A safer option is to assign your own CSS class in Elementor and add a small CSS snippet through Appearance - Customize - Additional CSS or through the CSS area provided by your theme.

The basis for this approach is standard Elementor behavior: every widget has an Advanced tab where you can assign a CSS class to the container. We are not relying on hidden BWD Breadcrumb classes or tying ourselves to the plugin's internal structure. The code below works as a cautious custom adaptation: it styles links and elements inside the container with your class, but it does not alter PHP, Schema, or the breadcrumb-generation behavior.

CSS for a compact breadcrumb line

In Elementor, open the widget, go to the Advanced tab, and add bwd-breadcrumb-compact in the CSS Classes field. Then add this CSS:

.bwd-breadcrumb-compact {
  font-size: 14px;
  line-height: 1.45;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.bwd-breadcrumb-compact a {
  text-decoration: none;
  font-weight: 600;
}

.bwd-breadcrumb-compact a:hover,
.bwd-breadcrumb-compact a:focus {
  text-decoration: underline;
}

.bwd-breadcrumb-compact li,
.bwd-breadcrumb-compact span {
  vertical-align: middle;
}

Check the result on a page with a long title. If wrapping becomes cleaner and the links remain clickable, the tweak worked. If the style unexpectedly affects other elements inside the container, remove the class from the widget or delete the CSS. Rollback is simple: remove the CSS snippet and clear the site cache.

When not to add CSS

Do not add CSS if the issue is an incorrect path, a missing category, duplication from the theme, or a Schema error. Front-end styling cannot fix the data source. Also, do not use CSS to hide a second breadcrumb block if the theme already provides a built-in way to disable it. Hiding something with display: none can leave unnecessary markup in the code and make the site harder to maintain.

Quality check before publishing

Before publishing, run through a short but strict checklist. It is not there for formality. It is there to prevent the breadcrumb from becoming an element that looks good on one page and breaks the rest. Start with the visual check: the path is visible, not duplicated, does not overlap the heading, links look different from the current item, and mobile wrapping is clean.

Then check the meaning. A child page should have a parent. A post should have a category. A product should have a category. On a page with no hierarchy, the breadcrumb may be short, and that is normal. If you see a strange path, fix the content structure rather than only changing text inside the widget.

Tests for the editor

• Open the page in a private window and confirm the breadcrumb is visible without administrator privileges.
• Check every link in the path and make sure it points to a live section.
• Open the mobile width and confirm that a long title does not create horizontal scrolling.
• Compare the page with cache active and after clearing cache if the site uses a caching plugin.
• Test one URL in Rich Results Test, then repeat the check on another content type.

Tests for the developer

The developer should inspect the source code and confirm that the page does not contain an unexpected mix of breadcrumb markup from different plugins. It is also helpful to check the browser console: if the widget depends on CSS or JavaScript, errors from other Elementor add-ons can affect how the editor or public page is displayed. In case of a conflict, temporarily disable CSS/JS optimization and see whether the output changes.

If the site is multilingual, check each language version separately. The product states that a translation file is included, but the translation of strings, the "Home" label, and other internal labels depends on the active locale, theme, and plugin stack. Do not assume the Russian version and the English version behave the same way.

If breadcrumbs are not showing or are working incorrectly

Troubleshooting is best handled from simple to complex. Do not start by editing PHP or deleting plugins blindly. For BWD Breadcrumb, the typical symptoms are tied to Elementor, content hierarchy, theme duplicates, cache, WooCommerce templates, and SEO plugin conflicts.

The widget is not visible in the Elementor panel

Symptom: BWD Breadcrumb or the Breadcrumb widget does not appear in Elementor search. Possible causes: Elementor is not active, the BWD plugin is not activated, the archive was not installed completely, the editor is loading stale state, or another extension is interfering with the widgets panel.

Check the installed plugins list and confirm Elementor is active. Refresh the editor page, clear the browser cache, and search for BWD. If the editor loads unreliably, turn on Elementor Safe Mode for diagnosis. If the editor opens in Safe Mode but not in normal mode, look for a theme conflict or another plugin conflict rather than an error in the breadcrumb settings.

The path shows only Home

Symptom: on a child page or a post, only the top-level item is displayed. The usual reason is that the current page has no parent, the post has no suitable category, the product is not assigned to a category, or the template is being previewed on a page where the context is not passed the way the widget expects.

Check the source data. A page should have a parent in WordPress settings. A post should have a category. A product should have a category. If you are testing on the homepage, a short breadcrumb can be normal. If you are previewing an Elementor template without a real content object, switch to a preview of a specific page or product.

Two breadcrumb paths appear on the page

Symptom: one line is output by BWD Breadcrumb and another by the theme, WooCommerce, or an SEO plugin. This is not just a cosmetic issue. Two breadcrumb paths weaken the layout and may point to different routes.

Choose one visible source. If you want BWD Breadcrumb inside Elementor, disable the theme or WooCommerce output in the standard way. If the theme has no toggle, review its documentation. Code-based removal should only be done in a child theme or through a safe snippets plugin, and only when you understand which hook you are removing. Do not make CSS hiding your first response.

Breadcrumbs are visible in the editor but not on the live site

Symptom: everything looks correct in Elementor, but the public page does not show the block. Possible causes: the template is not assigned to the right page type, the page uses a different layout, cache is serving an older version, or Elementor display conditions do not match the URL.

Open the page in a private window. Clear both site cache and browser cache. Check the template assignment rules. If the page uses Elementor Canvas or Elementor Full Width, remember that different layouts interact differently with theme elements and templates. For testing, temporarily use a simple page with the default layout.

The WooCommerce product path chooses the wrong category

Symptom: the product belongs to multiple categories, and the breadcrumb runs through a secondary one. The cause is usually not the widget style, but the product structure and the logic used to choose the primary category.

Check the product categories and the primary-category setting if your SEO plugin provides one. For important products, avoid leaving a chaotic category mix in place. If the business genuinely needs several routes to the same product, decide which route should be primary in navigation and which routes should remain only filters or listing pages.

Rich Results Test shows an error

Symptom: the visual breadcrumb is there, but the structured data test shows a critical error or cannot find Breadcrumb. First confirm that you are testing a published public URL. Then check whether there are multiple Schema sources. If BWD Breadcrumb and the SEO plugin output different data, temporarily keep only one source and run the test again.

Do not assume the issue will disappear after indexing. If the tool reports a syntax error, it needs to be fixed before you resubmit the URL. If there are no errors but Google still does not show breadcrumbs in search, that may simply be normal search-engine behavior.

When BWD Breadcrumb is the right choice

CodeCanyon BWD Breadcrumb is worth using if you build your site in Elementor and want to manage breadcrumbs as a visual block: choose a preset, place the widget exactly where it belongs in a template, adjust the separator, and verify the output on pages, posts, and products. The product fits especially well on projects where the theme does not offer convenient breadcrumb placement or where the standard WooCommerce output needs to be replaced with a cleaner Elementor block.

Before rollout, check Elementor, the page structure, existing breadcrumb sources, and cache. After rollout, check the public view, mobile wrapping, breadcrumb links, and structured data. If the project already uses a strong SEO plugin with breadcrumb functionality, compare the use cases: the SEO plugin may handle Schema while BWD Breadcrumb is used only for the visible block inside Elementor. That is acceptable as long as the paths match and there are no duplicates.

If, after reviewing everything, you decide the site really needs an Elementor widget with ready-made styles, you can move to the download section and download the CodeCanyon BWD Breadcrumb archive for testing on a backup copy or staging site. The best implementation outcome is not just a nice-looking line above the heading, but a stable navigation path that the editor understands, the visitor uses, and the developer can verify and maintain quickly.

BWD Breadcrumb: final breadcrumb checks before publishing

After setting up BWD Breadcrumb, it helps to go beyond a quick visual check inside the Elementor editor. Breadcrumbs look simple, but on a real page they depend on several factors at once: the WordPress permalink structure, post or product hierarchy, the Elementor template, the active theme, WooCommerce archives, caching, and indexing rules. If you only inspect one view in the editor, it is easy to miss situations where the product page looks correct, but the blog post, category page, or mobile version introduces an extra level, an awkward line break, or a link that points somewhere users do not expect.

The most reliable approach is to run a short pre-publish check on the template. Open the page in a normal browser, not just in Elementor preview, and follow the path visually as a visitor would. The first link usually goes to the homepage, the middle items should open real sections of the site, and the last item should identify the current page without feeling like something that still needs to be clicked. If the last item is clickable and points back to itself, that is not always a technical error, but for navigation and accessibility it is usually easier to treat it as the current position. In the widget settings, check the option that controls how the current item is displayed and the link styling for the active item.

Checks on typical page types

For a small site, it is enough to test the homepage, a standard page, a blog post, and one page that goes two or three levels deep. For a store, add a product page, a product category, a brand or attribute archive if those archives are in use, and a filtered page. BWD Breadcrumb is especially useful where users may land on a product from search, ads, or internal links and have no clear sense of where they are in the catalog. That is why you should check not only the clean top-level cases, but also the longest category names, products assigned to multiple categories, posts with long titles, and pages where the Elementor container is already crowded with nearby widgets.

• Homepage. If breadcrumbs are not needed there, disable the widget in the template or set a display condition so users do not see a single Home item.
• Standard page. Check whether the path includes the parent page if one is assigned in WordPress. If there is no parent, the breadcrumb should stay short and clear.
• Blog post. Verify which category the breadcrumb shows, especially when the post belongs to multiple categories. Users should land in a logical section, not in a random technical category.
• WooCommerce product. Open the product from different entry points and make sure the middle level leads to the correct catalog category. If the product lives in multiple categories, decide in advance which structure makes the most sense to shoppers.
• Mobile width. Check line wrapping, spacing around separators, and whether the links are easy to tap. A clean desktop row can become awkward if a long title stretches across three lines.

How to tell a setup issue from a WordPress data issue

If the breadcrumb path is not built the way you expected, check the page data first and the widget styling second. BWD Breadcrumb renders navigation on top of the structure that WordPress and its related plugins expose. If a page has no parent, a post is missing the right category, a product is attached to several categories at once, or permalinks were changed recently, the widget may honestly reflect what the system currently knows, even if that is not the structure you had in mind. In that situation, changing the color, separator, or font size will not help - you need to clean up the content hierarchy.

A practical sequence looks like this: open the problematic post or product for editing, check the parent, category, product category, and URL slug, save the object, then refresh the front-end page after clearing cache. If the site uses a caching plugin, CDN, or Elementor CSS optimization, clear every cache layer after changing the template. When the issue appears only inside the Elementor editor but the published page looks correct, trust the front end: the editor may be showing a demo context, especially inside Theme Builder.

Separator, spacing, and the last item

The separator between items is a small setting that has a big effect on readability. BWD Breadcrumb can create a noticeable visual style, but on a working site the first thing to verify is the basic job: users should instantly understand where the link is, where the separator is, and which item represents the current page. If the separator is too high-contrast, it starts competing with the breadcrumb items themselves. If it is too small or pressed too tightly against the words, the line turns into a blur of text. A simple check works well: narrow the browser window to a mobile width, open a page with a long title, and see whether the separator gets stranded at the start of a new line without the item it belongs to.

For the current item, it usually makes sense to use a calmer color, remove underlining, and avoid making it look like a standard link. If the site design requires every item to remain clickable, add a clear visual cue for the current state: a different font weight, a neutral background, a slight opacity shift, or a status color. The main thing is not to hide the last item completely on pages where users need to confirm their location, such as a product page or a deep documentation article.

Safe CSS polish without touching plugin code

When Elementor's built-in controls cover almost everything but you still want a bit more final control, it is safer to use CSS in Elementor Pro Custom CSS, a child theme, or the Additional CSS field in the WordPress Customizer. Do not edit plugin files directly: an update will overwrite the changes, and a selector mistake will make troubleshooting harder. Before adding any styles, open the browser inspector, find the BWD Breadcrumb widget container, and scope the selector to a specific template area so you do not accidentally affect breadcrumbs elsewhere on the site.

.single-product .elementor-widget-bwd-breadcrumb {
  max-width: 1180px;
}

.single-product .elementor-widget-bwd-breadcrumb a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

This example is a custom adaptation for a product page, not a mandatory universal snippet. Its purpose is to show the principle: the selector is limited to a page type, the tweak is reversible, and the behavior can be checked immediately after saving. If the breadcrumb starts breaking on other screen sizes after the CSS adjustment, remove the block, clear the cache, and go back to the widget settings. For most sites, Elementor's built-in controls are enough, and CSS is only needed for small refinements that cannot be handled cleanly through the interface.

Final test after updates

After updating Elementor, the theme, WooCommerce, or BWD Breadcrumb itself, repeat a quick check on several URLs. Pay special attention to templates used globally: single post, single product, archive, and custom post type layouts. If an update changes an HTML class, your visual CSS polish may stop working. If the theme starts outputting its own breadcrumbs in a new place, the page may suddenly show two navigation paths. If that happens, do not mask one of them with a random display:none without checking first. Identify which breadcrumb path users actually need, where it is being loaded from, and whether the extra output can be disabled in theme settings, Elementor Theme Builder, or the specific template.

A strong final standard is this: BWD Breadcrumb should not only match the site style, but also help visitors move one level up, confirm the current section, and avoid duplicates next to the theme's own navigation. If that standard is met on desktop and mobile, the widget is ready to stay in the live template and you can move on to testing the link for downloading and installing BWD Breadcrumb.