filters - Add a counter beside menu item label

admin管理员组

文章数量:1295745

I'm using the following code to add a panel to the admin menu screen, so the users are able to add a Cart link to their menus:

function my_add_meta_box() {
    add_meta_box( 'custom-meta-box', __( 'Cart' ), 'my_nav_menu_item_link_meta_box', 'nav-menus', 'side', 'default' );
}
add_action( 'admin_init', 'my_add_meta_box' );

function my_nav_menu_item_link_meta_box() {
    global $_nav_menu_placeholder, $nav_menu_selected_id;
    $_nav_menu_placeholder = 0 > $_nav_menu_placeholder ? $_nav_menu_placeholder - 1 : -1;
    ?>
    <div id="posttype-cart" class="posttypediv">
        <div id="tabs-panel-cart" class="tabs-panel tabs-panel-active">
            <ul id="cart-checklist" class="categorychecklist form-no-clear">
                <li>
                    <label class="menu-item-title">
                        <input type="checkbox" class="menu-item-checkbox" name="menu-item[<?php echo (int) $_nav_menu_placeholder; ?>][menu-item-object-id]" value="-1"> <?php esc_html_e( 'Cart' ); ?>
                    </label>
                    <input type="hidden" class="menu-item-type" name="menu-item[<?php echo (int) $_nav_menu_placeholder; ?>][menu-item-type]" value="post_type">
                    <input type="hidden" class="menu-item-object" name="menu-item[<?php echo (int) $_nav_menu_placeholder; ?>][menu-item-object]" value="page">
                    <input type="hidden" class="menu-item-object-id" name="menu-item[<?php echo (int) $_nav_menu_placeholder; ?>][menu-item-object-id]" value="<?php echo get_option( 'woocommerce_cart_page_id' ); ?>">
                    <input type="hidden" class="menu-item-title" name="menu-item[<?php echo (int) $_nav_menu_placeholder; ?>][menu-item-title]" value="<?php esc_html_e( 'Cart' ); ?>">
                </li>
            </ul>
        </div>
        <p class="button-controls">
            <span class="add-to-menu">
                <input type="submit" <?php disabled( $nav_menu_selected_id, 0 ); ?> class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e( 'Add to Menu' ); ?>" name="add-post-type-menu-item" id="submit-posttype-cart">
                <span class="spinner"></span>
            </span>
        </p>
    </div>
    <?php
}

My question is, is it possible to dynamically add a counter that shows the number of items in cart beside the Cart menu item label in the frontend? If so, how? I think that the wp_get_nav_menu_items filter might be useful for this, but how can I identify the Cart menu item in there to be able to modify its label in the frontend on the fly?

function my_get_nav_menu_items( $items ) {
    foreach ( $items as $item ) {
        if ( is_cart_menu_item( $item ) ) {
            // add a counter beside the Cart menu item label    
        }
    }
    return $items;
}
add_filter( 'wp_get_nav_menu_items', 'my_get_nav_menu_items', 20 );

I'm using the following code to add a panel to the admin menu screen, so the users are able to add a Cart link to their menus:

function my_add_meta_box() {
    add_meta_box( 'custom-meta-box', __( 'Cart' ), 'my_nav_menu_item_link_meta_box', 'nav-menus', 'side', 'default' );
}
add_action( 'admin_init', 'my_add_meta_box' );

function my_nav_menu_item_link_meta_box() {
    global $_nav_menu_placeholder, $nav_menu_selected_id;
    $_nav_menu_placeholder = 0 > $_nav_menu_placeholder ? $_nav_menu_placeholder - 1 : -1;
    ?>
    <div id="posttype-cart" class="posttypediv">
        <div id="tabs-panel-cart" class="tabs-panel tabs-panel-active">
            <ul id="cart-checklist" class="categorychecklist form-no-clear">
                <li>
                    <label class="menu-item-title">
                        <input type="checkbox" class="menu-item-checkbox" name="menu-item[<?php echo (int) $_nav_menu_placeholder; ?>][menu-item-object-id]" value="-1"> <?php esc_html_e( 'Cart' ); ?>
                    </label>
                    <input type="hidden" class="menu-item-type" name="menu-item[<?php echo (int) $_nav_menu_placeholder; ?>][menu-item-type]" value="post_type">
                    <input type="hidden" class="menu-item-object" name="menu-item[<?php echo (int) $_nav_menu_placeholder; ?>][menu-item-object]" value="page">
                    <input type="hidden" class="menu-item-object-id" name="menu-item[<?php echo (int) $_nav_menu_placeholder; ?>][menu-item-object-id]" value="<?php echo get_option( 'woocommerce_cart_page_id' ); ?>">
                    <input type="hidden" class="menu-item-title" name="menu-item[<?php echo (int) $_nav_menu_placeholder; ?>][menu-item-title]" value="<?php esc_html_e( 'Cart' ); ?>">
                </li>
            </ul>
        </div>
        <p class="button-controls">
            <span class="add-to-menu">
                <input type="submit" <?php disabled( $nav_menu_selected_id, 0 ); ?> class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e( 'Add to Menu' ); ?>" name="add-post-type-menu-item" id="submit-posttype-cart">
                <span class="spinner"></span>
            </span>
        </p>
    </div>
    <?php
}

My question is, is it possible to dynamically add a counter that shows the number of items in cart beside the Cart menu item label in the frontend? If so, how? I think that the wp_get_nav_menu_items filter might be useful for this, but how can I identify the Cart menu item in there to be able to modify its label in the frontend on the fly?

function my_get_nav_menu_items( $items ) {
    foreach ( $items as $item ) {
        if ( is_cart_menu_item( $item ) ) {
            // add a counter beside the Cart menu item label    
        }
    }
    return $items;
}
add_filter( 'wp_get_nav_menu_items', 'my_get_nav_menu_items', 20 );

• menus
• filters
• hooks
• navigation

Share Improve this question edited Apr 11, 2021 at 13:56 leemon asked Mar 24, 2021 at 20:30 leemonleemon 2,03244 gold badges2323 silver badges5151 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

You can wp_nav_menu_objects filter hook and you can compare your menu label with the condition and append your cart count. check below code. code will go active theme functions.php file. tested and works.

function modify_cart_label_in_nav_menu_objects( $items, $args ) {
    if($args->theme_location == 'primary'){ 
        foreach ( $items as $key => $item ) {
            if ( $item->title == 'test'  ) {
                $item->title .= '('.WC()->cart->get_cart_contents_count().')';
            }
        }
    }
    return $items;
}
add_filter( 'wp_nav_menu_objects', 'modify_cart_label_in_nav_menu_objects', 10, 2 );

Based on Bhautik answer, I've found a solution to identify the cart menu link using the woocommerce_cart_page_id option:

function modify_cart_label_in_nav_menu_objects( $items, $args ) {
    foreach ( $items as $key => $item ) {
        if ( $item->object_id == (int) get_option( 'woocommerce_cart_page_id' ) ) {
            if ( WC()->cart->get_cart_contents_count() > 0 ) {
                $item->title .= ' ('. WC()->cart->get_cart_contents_count() . ')';
            }
        }
    }
    return $items;
}
add_filter( 'wp_nav_menu_objects', 'modify_cart_label_in_nav_menu_objects', 10, 2 );

本文标签： filtersAdd a counter beside menu item label