Breadcrumbs are compact navigation paths that show where a visitor is located within a WordPress website. On a content site, the trail may reflect the site structure and hierarchical taxonomies such as categories and tags. On a store, it can help connect a product with the relevant taxonomy and archive pages. When you use Elementor, the Breadcrumbs widget can place this navigation inside a page or template, but its output depends on Yoast SEO.
The division of responsibility is important. Elementor controls where the widget appears and how it looks, including alignment, HTML tag, typography and link styling. Yoast SEO controls the breadcrumb dependency and the settings that influence hierarchy, labels and separators. The result can support clearer navigation and structured-data preparation, but it does not guarantee higher rankings or guarantee that search engines will display breadcrumbs in search results.
What Elementor Breadcrumbs Are and What They Require
The Elementor Breadcrumbs widget creates a navigation trail from the website structure rather than requiring you to enter every item manually. Its visible path is therefore connected to the content hierarchy and the taxonomies assigned to that content. Changing the relevant taxonomy choices can change the path that visitors see.
There is also a basic dependency: Elementor states that Yoast SEO must be installed and activated for the Breadcrumbs widget to display breadcrumbs. If Yoast SEO is inactive or unavailable, adding the widget alone should not be expected to produce a working trail.
How the breadcrumb path is generated
The trail is generated from the site structure and hierarchical taxonomies. Categories, tags and other relevant taxonomy choices can determine which intermediate item appears between the homepage and the current content. This is why breadcrumb configuration should be treated as both a template task and a content-structure task.
Before You Start: Elementor, Yoast SEO and WooCommerce Checks
Before editing a template, confirm that Yoast SEO is installed and active. Then identify the Elementor location where the breadcrumbs should appear: a particular page, a post template, or a single-product template. The correct location matters because a widget placed in a template that does not apply to the tested page will not produce the expected result there.
WooCommerce sites require one additional check. The active theme or WooCommerce configuration may already output breadcrumbs. If you add the Elementor widget without reviewing existing output, the page may contain competing or duplicate navigation. Before changing replacement settings, record the current result and, when possible, test product, product-category, shop and archive pages in a staging environment or on a backup-enabled site.
Check existing breadcrumb output
Open representative pages and look for breadcrumbs supplied by the theme or WooCommerce configuration. Note where they appear and whether they are already visible. This simple check helps you decide whether Elementor should add a new breadcrumb system or whether the existing output needs to be replaced through the relevant Yoast WooCommerce setting.
How to Add the Breadcrumbs Widget to an Elementor Template
Once the dependency and existing output have been checked, add the widget in the Elementor Editor. The documented insertion process is short, but the template location and display conditions determine which visitors will see the result.
Insert and place the widget
- Open the relevant page or template in the Elementor Editor.
- Click the plus icon in the editor canvas.
- Drag the Breadcrumbs widget onto the canvas, or click it to insert it.
- For a broader result, place it in the Elementor Theme Builder template that matches the intended content, such as a single post or single product template.
- Check that the template display conditions apply to the page or product being tested.
For a one-off page, placing the widget directly on that page may be appropriate. For repeated content, the relevant template is usually the practical location to review. In both cases, the widget still requires an active Yoast SEO installation.
Set the HTML tag and alignment
Use the widget’s Content settings to select the presentation options available for the navigation. Elementor provides alignment controls and HTML tag choices including Div, Span, Nav and Paragraph. Select the tag that fits the surrounding markup and the role of the navigation, then adjust alignment to match the layout.
Configure Breadcrumb Structure in Yoast SEO
Elementor places the widget, but Yoast SEO determines much of the breadcrumb data that the widget displays. In the WordPress Dashboard, go to Yoast SEO > Settings > Advanced > Breadcrumbs. The exact interface can vary with the installed product versions, theme, WooCommerce configuration and plugin plan, so verify the labels available in the current dashboard.
Set labels and separators
Review the separator used between breadcrumb items. You can also configure the homepage label and the anchor text shown before the homepage breadcrumb. These settings affect the wording and visual structure of the trail, while Elementor’s widget settings affect placement and presentation.
Use labels that make the path understandable in the context of the site. Keep this configuration separate from typography and link styling: a change in Elementor’s design controls does not change the underlying hierarchy supplied through Yoast SEO.
Select taxonomies for content types
For post types, Yoast SEO allows you to select which taxonomy appears in the breadcrumb path. Different content types can use different taxonomies, so review each relevant type rather than assuming one setting controls every trail. The taxonomy selected for a content type influences the intermediate item shown before the current post or page.
Also review taxonomy archive behavior when configuring taxonomy breadcrumb pages. If a path is unexpected, check the taxonomy assigned to the content and compare it with the taxonomy selected in Yoast SEO. The breadcrumb reflects the site’s content organization; it is not manually typed into the Elementor widget.
WooCommerce Product Breadcrumbs
For WooCommerce, the product path depends on the store’s taxonomy assignments and on the active theme or template configuration. The Elementor Breadcrumbs widget can be placed in the Elementor single-product template so that it appears on product pages. Yoast SEO settings then influence the hierarchy and labels used by the trail.
Configure the single-product template
Open the Elementor single-product template and insert the Breadcrumbs widget using the plus icon, then drag or click it onto the canvas. Confirm that the template’s display conditions target the intended products. Review the product categories and other relevant taxonomy assignments, because those assignments can influence the visible path.
After saving, test an individual product and compare the displayed trail with the store’s intended structure. Also check product-category, shop and archive pages. The exact product path is not universal: it depends on the taxonomies assigned to the product and on how the theme and templates are configured.
Review native WooCommerce breadcrumb replacement
If native WooCommerce breadcrumbs are already active, review the Yoast WooCommerce setting for replacing WooCommerce breadcrumbs. Yoast documents this option for stores using Yoast SEO breadcrumbs and presents it as a way to avoid competing breadcrumb systems.
Use one intended output rather than displaying both native WooCommerce and Yoast or Elementor-related breadcrumb systems together. After changing the setting, check representative product and archive pages for duplicate trails. Make this change cautiously and test on a staging site or backup-enabled environment when possible.
Style Breadcrumbs in Elementor
Once the hierarchy is correct, use Elementor to fit the breadcrumb navigation into the page design. The widget provides controls for typography and link styling, including normal and hover link colors. Alignment and spacing can also be adjusted to suit the surrounding layout.
Separate design controls from structure controls
Use Elementor for visual presentation: typography, alignment, spacing and link styling. Use Yoast SEO for the separator, homepage label, preceding anchor text and taxonomy-based hierarchy. Keeping these responsibilities separate makes configuration easier to review. If the path is wrong, inspect Yoast settings and taxonomy assignments; if the path is correct but visually unsuitable, inspect the Elementor widget settings.
Troubleshoot Missing, Incorrect or Duplicate Breadcrumbs
When breadcrumbs do not display correctly, troubleshoot in a fixed order. Start with the documented dependency, then verify template placement and content structure. On WooCommerce sites, investigate duplicate output separately from missing output, because two different systems may be active at the same time.
Run the dependency and template checks
First confirm that Yoast SEO is installed and activated. Elementor lists this as a requirement for the Breadcrumbs widget. Next confirm that the widget is actually present in the page or template being tested. If it is in a single post or single-product template, review the display conditions and ensure that they apply to the current content.
If the widget is present but invisible or visually incorrect, test practical possibilities one at a time. Theme styling, caching and plugin conflicts can affect the rendered result, but the available documentation does not establish any one of these as a universal cause. Check the current page after each controlled change so the source of the issue remains identifiable.
Check hierarchy and duplicate output
For an incorrect path or label, return to Yoast SEO > Settings > Advanced > Breadcrumbs. Review the separator, homepage label, preceding anchor text and taxonomy selection for the relevant content type. Then check whether the content has the expected taxonomy assignments.
For duplicate breadcrumbs, inspect the theme and WooCommerce output as well as the Yoast option to replace native WooCommerce breadcrumbs. Do not treat theme-file or filter edits as the default solution for general users. Advanced code-based changes require appropriate technical review, particularly when the conflict is specific to a theme or WooCommerce configuration.
Elementor breadcrumbs work best when the responsibilities are clearly divided. Elementor places and styles the widget, while Yoast SEO supplies the required dependency and controls hierarchy-related settings such as labels, separators and taxonomies. For WooCommerce, place the widget in the appropriate single-product template, review existing native output and test the relevant product and archive pages. If something is missing, check activation, template conditions and taxonomy assignments before investigating styling or conflicts. Breadcrumb configuration can prepare information for structured-data use, but search engines decide whether and how that information appears in results. Explore our WordPress plugins, WooCommerce extensions, themes and membership plans to find the right tools for your website.