How to Add WooCommerce Breadcrumbs in Elementor

The Product Breadcrumb widget helps display WooCommerce breadcrumb navigation inside Elementor product templates. It gives customers a clear path back to parent categories and improves navigation across your store.

Breadcrumbs make product pages easier to use because visitors can quickly understand where they are and move back through category levels without extra clicks. This is especially useful on stores with multiple category layers.

The widget is commonly used on WooCommerce single product layouts created with Elementor.

Part of WooCommerce Elementor Widgets #

The Product Breadcrumb widget is part of the WooCommerce widget set available in Spexo Addons. It is designed to work with custom WooCommerce product layouts built in Elementor.

When to Use the Product Breadcrumb Widget #

Use this widget when you want to improve navigation on WooCommerce product pages and help users move between categories more easily.

This widget works especially well in layouts that also use the Product Title Widget and sections that display SKU and categories.

Requirements #

Before using the Product Breadcrumb widget, make sure the required setup is complete.

• WooCommerce plugin installed and activated
• Spexo Addons Pro installed and activated
• A WooCommerce single product template created in Elementor
• Products assigned to categories in WooCommerce

If you are building a custom single product layout, you can also review the Global Templates guide for reusable layout management.

How to Use the Product Breadcrumb #

The Product Breadcrumb widget improves user experience by showing a compact navigation path for the current product page.

It helps customers move back through categories and subcategories more easily, which makes browsing simpler on large WooCommerce stores.

Before you begin, make sure you have installed and activated Spexo Addons Pro on your website. Without the Pro version activated, you cannot use this widget.

How to Activate Product Breadcrumb #

To use this Spexo Addons widget, search for Product Breadcrumb from the Elementor widget panel under the Elements tab.

Drag and drop the Product Breadcrumb widget into the Elementor section where you want the breadcrumb navigation to appear.

After you add the widget, the breadcrumb navigation will appear inside your WooCommerce product layout.

How to Configure the Content Settings #

After adding the Product Breadcrumb widget in Elementor, open the Content tab to configure its display settings.

General #

From the General settings, you can choose whether to display or hide the home page link. You can also set the separator and control breadcrumb alignment.

Click to See Live Demo #

You can preview the breadcrumb layout in a live example to understand how it appears on the frontend.

How to Style Product Breadcrumb #

To customize the appearance of the Product Breadcrumb widget, open the Style tab in Elementor.

Style #

From this section, you can change the text color, hover color, and typography of the breadcrumb links.

Common Issues and Fixes #

If the breadcrumb does not appear correctly, check that the page is being viewed inside a WooCommerce single product context and that the product belongs to at least one category.

If the widget does not appear in Elementor, review the widget enable settings and confirm that the widget is enabled.

Frequently Asked Questions #

Why is the breadcrumb not showing category links? #

Breadcrumb output depends on your WooCommerce product categories. If a product is not assigned to categories, the breadcrumb path may be limited.

Can I hide the home link in the breadcrumb? #

Yes. The General settings include an option to show or hide the home page link.

Can I style breadcrumb colors and typography? #

Yes. The Style settings let you customize text color, hover color, and typography.

If you face any difficulties, feel free to contact our support team for further assistance.