How to show different menu in woocommerce

[zaicom]

I need menu like this

[Prasant]

Hello @zaicom,

Thanks for asking.

You can take a look at following plugin to display page specific menu items:

Page Specific Menu Items

Or you can also use following custom code to display separate menu in WooCommerce page in child theme function.php file:

// =============================================================================
// Sets Custom Menu For WooCommerce Shop 
// =============================================================================

add_filter( 'wp_nav_menu_args', 'custom_blog_menu' );

function custom_blog_menu( $args ) {
  if ( x_is_shop() ) {
    $args['theme_location'] = 'primary';
    $args['menu'] = 'Custom Menu';
  }
  return $args;
}

Just replace “Custom Menu” with the actual menu name you want to show on the shop page.

Thanks.

[zaicom]

Thanks for your answer. I prefer the second solution.

But I have no idea to add the last part “cart icon with $0.00”. Please kindly help.

[lely]

Hi There,

To add the cart on your new custom menu, please check x_woocommerce_navbar_menu_item() function from this file wp-content\themes\x\framework\functions\global\plugins\woocommerce.php Copy the entire function on your child theme functions.php file. Then change the following line accordingly with your new menu:
if ( $args->theme_location == 'primary' ) {

Further customization from here would be getting into custom development which is outside the scope of our support. Thank you for understanding.

[zaicom]

I am not sure what codes to copy from woocommerce.php to functions.php file. Please kindly instruct me what the exact codes I should deal with. Thanks.

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Overwrite or add your own custom functions to X in this file.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Enqueue Parent Stylesheet
//   02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );



// =============================================================================
// Sets Custom Menu For WooCommerce Shop 
// =============================================================================

add_filter( 'wp_nav_menu_args', 'custom_blog_menu' );

function custom_blog_menu( $args ) {
  if ( x_is_shop() ) {
    $args['theme_location'] = 'X Demo Menu';
    $args['menu'] = 'woo';
  }
  return $args;
}


// Output Cart
// -----------

if ( ! function_exists( 'x_woocommerce_navbar_menu_item' ) ) :
  function x_woocommerce_navbar_menu_item( $items, $args ) {

    if ( X_WOOCOMMERCE_IS_ACTIVE && x_get_option( 'x_woocommerce_header_menu_enable' ) == '1' ) {
      if ( $args->theme_location == 'primary' ) {
        $items .= '<li class="menu-item current-menu-parent x-menu-item x-menu-item-woocommerce">'
                  . '<a href="' . x_get_cart_link() . '" class="x-btn-navbar-woocommerce">'
                    . x_woocommerce_navbar_cart()
                  . '</a>'
                . '</li>';
      }
    }

    return $items;

  }
  add_filter( 'wp_nav_menu_items', 'x_woocommerce_navbar_menu_item', 9999, 2 );
endif;



// AJAX
// =============================================================================

if ( ! function_exists( 'x_woocommerce_navbar_cart_ajax_notification' ) ) :
  function x_woocommerce_navbar_cart_ajax_notification() {

    if ( x_is_product_index() && get_option( 'woocommerce_enable_ajax_add_to_cart' ) == 'yes' ) {
      $notification = '<div class="x-cart-notification">'
                      . '<div class="x-cart-notification-icon loading">'
                        . '<i class="x-icon-cart-arrow-down" data-x-icon="&#xf218;" aria-hidden="true"></i>'
                      . '</div>'
                      . '<div class="x-cart-notification-icon added">'
                        . '<i class="x-icon-check" data-x-icon="&#xf00c;" aria-hidden="true"></i>'
                      . '</div>'
                    . '</div>';
    } else {
      $notification = '';
    }

    echo $notification;

  }
  add_action( 'x_before_site_end', 'x_woocommerce_navbar_cart_ajax_notification' );
endif;

[rad]

Hi there,

Add this to your child theme’s functions.php

  function x_woocommerce_navbar_menu_item( $items, $args ) {

    if ( X_WOOCOMMERCE_IS_ACTIVE && x_get_option( 'x_woocommerce_header_menu_enable' ) == '1' ) {
      if ( $args['menu'] = 'Custom Menu' ) {
        $items .= '<li class="menu-item current-menu-parent x-menu-item x-menu-item-woocommerce">'
                  . '<a href="' . x_get_cart_link() . '" class="x-btn-navbar-woocommerce">'
                    . x_woocommerce_navbar_cart()
                  . '</a>'
                . '</li>';
      }
    }

    return $items;

  }
  add_filter( 'wp_nav_menu_items', 'x_woocommerce_navbar_menu_item', 9999, 2 );

Then you must change $args['menu'] = 'Custom Menu' to the menu where you wish to implement that cart.

Thanks!