在Woocommerce手持菜单中显示文本和图标

// 添加菜单图标字段
function add_menu_icon_field( $item_id, $item, $depth, $args ) {
    $icon = get_post_meta( $item_id, '_menu_item_icon', true );
    ?>
    <p class="field-icon description description-wide">
        <label for="edit-menu-item-icon-<?php echo esc_attr( $item_id ); ?>">
            <?php esc_html_e( '菜单图标', 'text-domain' ); ?><br />
            <input type="text" class="widefat code edit-menu-item-icon" id="edit-menu-item-icon-<?php echo esc_attr( $item_id ); ?>" name="menu-item-icon[<?php echo esc_attr( $item_id ); ?>]" value="<?php echo esc_attr( $icon ); ?>" />
        </label>
    </p>
    <?php
}
add_action( 'wp_nav_menu_item_custom_fields', 'add_menu_icon_field', 10, 4 );

// 保存菜单图标字段值
function save_menu_icon_field( $menu_id, $menu_item_db_id, $args ) {
    if ( isset( $_REQUEST['menu-item-icon'][ $menu_item_db_id ] ) ) {
        $icon = sanitize_text_field( $_REQUEST['menu-item-icon'][ $menu_item_db_id ] );
        update_post_meta( $menu_item_db_id, '_menu_item_icon', $icon );
    }
}
add_action( 'wp_update_nav_menu_item', 'save_menu_icon_field', 10, 3 );

// 显示菜单图标
function display_menu_icon( $item_output, $item, $depth, $args ) {
    $icon = get_post_meta( $item->ID, '_menu_item_icon', true );
    if ( ! empty( $icon ) ) {
        $item_output = '<span class="menu-icon">' . esc_html( $icon ) . '</span>' . $item_output;
    }
    return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'display_menu_icon', 10, 4 );