wordpresshookhook-woocommercebreadcrumbs

How can I make the last item of the woocommerce breadcrumb clickable?


For some reasons, I need the last item of the breadcrumb be linked to the current page. I saw some examples for: woocommerce_breadcrumb_defaults, woocommerce_breadcrumb_home_url, woocommerce_breadcrumb_main_term, woocommerce_breadcrumb_product_terms_args, but non of them helped. What should I do?


Solution

  • First, you have to override the breadcrumb.php template from the plugin to your theme. follow the below steps.

    Copy breadcrumb.php file from

    wp-content/pluings/woocommerce/templates/global/breadcrumb.php
    

    and upload to this path.

    wp-content/themes/your-active-theme-name/woocommerce/global/breadcrumb.php
    

    Now you will see the code in breadcrumb.php like this

    <?php
    /**
     * Shop breadcrumb
     *
     * This template can be overridden by copying it to yourtheme/woocommerce/global/breadcrumb.php.
     *
     * HOWEVER, on occasion WooCommerce will need to update template files, and you
     * (the theme developer) will need to copy the new files to your theme to
     * maintain compatibility. We try to do this as little as possible, but it does
     * happen. When this occurs the version of the template file will be bumped and
     * the readme will list any important changes.
     *
     * @see         https://docs.woocommerce.com/document/template-structure/
     * @package     WooCommerce\Templates
     * @version     2.3.0
     * @see         woocommerce_breadcrumb()
     */
    
    if ( ! defined( 'ABSPATH' ) ) {
        exit;
    }
    
    if ( ! empty( $breadcrumb ) ) {
    
        echo $wrap_before;
    
        foreach ( $breadcrumb as $key => $crumb ) {
    
            echo $before;
    
            if ( ! empty( $crumb[1] ) && sizeof( $breadcrumb ) !== $key + 1 ) {
                echo '<a href="' . esc_url( $crumb[1] ) . '">' . esc_html( $crumb[0] ) . '</a>';
            } else {
                echo esc_html( $crumb[0] );
            }
    
            echo $after;
    
            if ( sizeof( $breadcrumb ) !== $key + 1 ) {
                echo $delimiter;
            }
        }
    
        echo $wrap_after;
    
    }
    

    Change this line

    if ( ! empty( $crumb[1] ) && sizeof( $breadcrumb ) !== $key + 1 ) {
    

    With this

    if ( ! empty( $crumb[1] ) && sizeof( $breadcrumb ) !== $key ) {
    

    Complete code will look like this

    <?php
    /**
     * Shop breadcrumb
     *
     * This template can be overridden by copying it to yourtheme/woocommerce/global/breadcrumb.php.
     *
     * HOWEVER, on occasion WooCommerce will need to update template files, and you
     * (the theme developer) will need to copy the new files to your theme to
     * maintain compatibility. We try to do this as little as possible, but it does
     * happen. When this occurs the version of the template file will be bumped and
     * the readme will list any important changes.
     *
     * @see         https://docs.woocommerce.com/document/template-structure/
     * @package     WooCommerce\Templates
     * @version     2.3.0
     * @see         woocommerce_breadcrumb()
     */
    
    if ( ! defined( 'ABSPATH' ) ) {
        exit;
    }
    
    if ( ! empty( $breadcrumb ) ) {
    
        echo $wrap_before;
    
        foreach ( $breadcrumb as $key => $crumb ) {
    
            echo $before;
    
            if ( ! empty( $crumb[1] ) && sizeof( $breadcrumb ) !== $key ) {
                echo '<a href="' . esc_url( $crumb[1] ) . '">' . esc_html( $crumb[0] ) . '</a>';
            } else {
                echo esc_html( $crumb[0] );
            }
    
            echo $after;
    
            if ( sizeof( $breadcrumb ) !== $key + 1 ) {
                echo $delimiter;
            }
        }
    
        echo $wrap_after;
    
    }
    

    Tested and works.

    enter image description here