Your Dedicated Partner for All Things WordPress

How to Change Breadcrumb Separator for WooCommerce

Table of Contents

WooCommerce has become one of the most widely used e-commerce platforms. One of the great features of WooCommerce is that it offers users a breadcrumb trail navigation system, making it easier for customers to browse through your website. The breadcrumb trail is a series of links that appear at the top of a page and shows users the path that they have taken to get to that page. However, by default, the WooCommerce breadcrumb separator is the forward slash (/), but what if you want to change it? In this blog post, we’ll show you how you can change the WooCommerce breadcrumb separator.

Step 1: Getting Started

Before you can begin changing the WooCommerce breadcrumb separator, you need to make sure that you have full admin access to your WooCommerce site. You will also need to have the latest version of WooCommerce installed and activated. If everything is in order, you can proceed to the next step.

Urgent WordPress Assistance

Facing a critical WordPress issue? Don’t panic. Our Emergency Service is here to swiftly resolve any urgent website problems.

Step 2: Log into WordPress Dashboard

To begin, you need to log into your WordPress dashboard. Once you have access, hover over Appearance on the left-hand side menu and click on Editor. This will bring up a page with a list of files on the right-hand side.

Step 3: Edit functions.php File

Now, locate and click on the functions.php file. The file should be located under the Theme Functions section of the list. Make sure that the file is writable by changing its access permissions or contacting your hosting provider to give you access to it.

Step 4: Insert the Code

Next, you will need to insert the code snippet below into the functions.php file.

//Changing Breadcrumbs Separator

add_filter( ‘woocommerce_breadcrumb_separator’, ‘custom_breadcrumb_separator’ );

function custom_breadcrumb_separator( $separator ) {

$separator = ”;

return $separator;


Step 5: Save the Changes

After you have inserted the code snippet, save the changes and test the breadcrumbs on your site. The separator should have changed from the default forward slash to empty space.


In conclusion, changing the WooCommerce breadcrumb separator is a simple process that can be done with just a few steps. By following our guide above, you can easily change the separator and customize it to your preference. This can be useful if you want to make your website reflect your brand identity or you simply want to give it a unique look. Remember to always save changes and test the breadcrumb trails to make sure that everything is working as expected.

Tailored WordPress Solutions

Elevate your online presence with our custom WordPress development services.

How to get started?

Learn more

WooCommerce Maintenance

Save 33% with our Annual pricing plan.

Get Started

Coupon Code Applied!

Take your time and continue browsing our services.

Alexey Seryapin
Founder of WPServices