Reposition WooCommerce breadcrumb outside of wrapper content

I currently have this code in my functions file for the WooCommerce plugin..

function my_theme_wrapper_start()
{
  echo the_breadcrumb();
  echo '<section role="main"><div class="wrap">';
}

function my_theme_wrapper_end()
{
  echo '</div></section>';
}

function mytheme_prepare_woocommerce_wrappers()
{
  remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
  remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

  add_action( 'woocommerce_before_main_content', 'my_theme_wrapper_start', 10 );
  add_action( 'woocommerce_after_main_content', 'my_theme_wrapper_end', 10 );
}

add_action( 'wp_head', 'mytheme_prepare_woocommerce_wrappers' );

add_theme_support( 'woocommerce' );

Now I would like to reposition the WooCommerce breadcrumb outside of the section.main class, yet I cannot see how to do this. Is there a way to do this?

Read More

This is the code I have for the WooCommerce breadcrumb…

function woocommerce_breadcrumb( $args = array() ) {

    $defaults = apply_filters( 'woocommerce_breadcrumb_defaults', array(
        'delimiter'   => ' / ',
        'wrap_before' => '<nav class="bcrumb" itemprop="breadcrumb">',
        'wrap_after'  => '</nav>',
        'before'      => '',
        'after'       => '',
        'home'        => _x( 'Home', 'breadcrumb', 'woocommerce' ),
    ) );

    $args = wp_parse_args( $args, $defaults );

    woocommerce_get_template( 'shop/breadcrumb.php', $args );
}

I have tried putting the section.main tag in the ‘before’ line, but this only adds a section tag in the breadcrumb, it does not reposition the breadcrumb.

Related posts

2 comments

  1. Ok I seem to have got it working. I added this in the functions file…

    //Reposition WooCommerce breadcrumb 
    function woocommerce_remove_breadcrumb(){
        remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );
    }
    add_action( 'woocommerce_before_main_content', 'woocommerce_remove_breadcrumb' );
    
    function woocommerce_custom_breadcrumb(){
        woocommerce_breadcrumb();
    }
    
    add_action( 'woo_custom_breadcrumb', 'woocommerce_custom_breadcrumb' );
    

    Then added…

    do_action('woo_custom_breadcrumb'); 
    

    …where I wanted the breadcrumb to show.

  2. Tried your code but it would not work.

    Instead I removed the action on the page targeted.

    function wc_remove_storefront_breadcrumbs() {
        if ( is_single() ){
            remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 
    10 );
        }
      }
    add_action( 'wp', 'wc_remove_storefront_breadcrumbs');  
    

    And included it thanks to a hook where I wanted to with :

    <?php woocommerce_breadcrumb();?>
    

Comments are closed.