How To Add And Customize WooCommerce Breadcrumb?

Woocommerce Breadcrumbs is a basic Woocommerce piece that permits you to include the Woocommerce breadcrumbs. It likewise provides for you the capacity to impair them totally so they probably won’t show. By changing the HTML encompassing your breadcrumbs, you’re ready to give better choices to styling your breadcrumbs in diverse ways. For instance, the default breadcrumbs just show joins with a separator character. Utilizing Woocommerce Breadcrumbs, you can transform them to show as an unsorted rundown of connections.

So now from the below snippet, you can add your desired styled Woocommerce Breadcrumbs anywhere wherever you want it and also make any changes to it default setting easily so that it an match with your codes or designs. So for this purpose, no plugin needed as all customization can be done by codes that is much better then to suggest a plugin. So now without any more preface, just move forward to the real article about Woocommerce Breadcrumbs.

Features:

• WooCommerce Breadcrumbs customization can gives you the following settings to change from default.
• Breadcrumb separator: This is the separator to use between each breadcrumb
• Wrap before: The opening HTML tag to wrap before all your breadcrumbs
• Wrap after: The closing HTML tag to wrap after all your breadcrumbs
• Before: The opening HTML tag to wrap before each individual breadcrumb
• After: The closing HTML tag to wrap after each individual breadcrumb
• Home text: The text to use for the ‘Home’ breadcrumb
• Home URL: The URL that the ‘Home’ breadcrumb links to

How To Add WooCommerce Breadcrumb Manually?

If you are designing a custom WooCommerce theme and want to add breadcrumb then you can simple do it by adding the below code in your woocommerce.php page. Rest all setting will be default as by WooCommerce provided in core files.

<?php woocommerce_breadcrumb(); ?>

How To Customize WooCommerce Breadcrumb Manually?

Now if you want to edit and change its default setting with your own desired setting then you can do it also. YOu just have to use the below code in your Theme Function(functions.php) page.

add_filter( 'woocommerce_breadcrumb_defaults', 'jk_woocommerce_breadcrumbs' );
function jk_woocommerce_breadcrumbs() {
 return array(
 'delimiter' => ' / ',
 'wrap_before' => '<ul class="woocommerce-breadcrumb" itemprop="breadcrumb">',
 'wrap_after' => '</ul >',
 'before' => '<li>',
 'after' => '</li>',
 'home' => _x( 'Shop', 'breadcrumb', 'woocommerce' ),
 );
}
add_filter( 'woocommerce_breadcrumb_home_url', 'woo_custom_breadrumb_home_url' );
function woo_custom_breadrumb_home_url() {
    return 'http://www.example.com';
}

Customization:

In upper Theme Function(functions.php)code, you can change all things. Now we will explain whats are there to change and what they will effect. If you will change delimiter value then it will change the character of between categories names. If you will change wrap_before then it will change before breadcrumb HTML code in the breadcrumb. If you will change wrap_after then it will change the after HTML code in the breadcrumb. If you will change before then it will change before HTML code of every category in the breadcrumb. If you will change after then it will change after HTML code of every category in the breadcrumb. If you will change home value Shop then it will change the first link name in the breadcrumb. And also change http://www.example.com with your new Shop link URL whatever you want.

Theme Files Editing Warning:

Keep in mind that every code that you will add in your themes files will be removed when you will change the theme. So after changing your theme, you have to follow this article again and you will get everything back same as it is now.

Last Words:

This is what we have and shared in easy steps for newbies so that they can easily know how it works. Stay with us because we are going to share a whole guide step by step about WordPress and make it easy for you. If you liked it then share it and be with us to get next tutorial. If you have any problem then feel free to ask us. We will help you with what we can or have.