WordPress Hosting

pedidos woo en barra admin wp

Cómo añadir a la barra de admin de WordPress un enlace a los pedidos de WooCommerce con contador de los pendientes

Por / 09-07-2025 / Avanzado, Experto, Functions, WooCommerce / 6 minutos de lectura

Si tienes una tienda online con WordPress y WooCommerce ya sabrás lo habitual que es visitar la página de gestión de pedidos. ¿No crees que sería utilísimo disponer de un icono en la barra de administración superior de WordPress, esa negra que está siempre arriba, de un enlace a la gestión de los pedidos, que además te avisase de pedidos pendientes?

La solución es sencilla: ¡añadirlo!

Lo que he preparado es un par de códigos que hacen lo siguiente:

  1. Comprueba si está instalado y activo WooCommerce.
  2. Solo se muestra a usuarios con capacidad manage_woocommerce, o sea, como mínimo gestores de tienda.
  3. Muestra un contador con la suma de pedidos en estados no completados:
    • Procesando
    • Pendiente de pago
    • En espera
    • Fallido
  4. Añade un menú con enlaces a todos los distintos estados de pedido, y cada uno de los estados no completados tiene su propio contador independiente.
  5. Añade algo de CSS personalizado para mejorar la apariencia del enlace o icono.
  6. Funciona con versiones antiguas y nuevas de WooCommerce.
  7. Es compatible con HPOS.

Tienes 2 versiones del código:

  • El enlace a los pedidos es un texto (Pedidos)
  • El enlace a los pedidos es el icono de WooCommerce (W)

No añadas los dos, elige uno, sino tendrás dos enlaces en la barra de admin.

Enlace a los pedidos de WooCommerce en la barra de administración de WordPress (texto)

Aquí tienes un código para mostrar un texto que ponga «Pedidos» en la barra de administración superior de WordPress:

/* Enlace de pedidos de WooCommerce en barra de admin de WP - Texto */
function ayudawp_pedidos_barra_admin_wp_texto($wp_admin_bar) {
// Verificamos que WooCommerce esté activo y el usuario tenga permisos
if (!class_exists('WooCommerce') || !current_user_can('manage_woocommerce')) {
return;
}

// Obtenemos el número de pedidos por estado
$processing_orders = get_woocommerce_orders_count('wc-processing');
$pending_payment_orders = get_woocommerce_orders_count('wc-pending');
$failed_orders = get_woocommerce_orders_count('wc-failed');
$on_hold_orders = get_woocommerce_orders_count('wc-on-hold');

// Calculamos el total de pedidos pendientes
$total_pending_orders = $processing_orders + $pending_payment_orders + $failed_orders + $on_hold_orders;

// Creamos el texto del enlace
$title = 'Pedidos';
if ($total_pending_orders > 0) {
$title .= ' <span class="awaiting-mod count-' . $total_pending_orders . '"><span class="pending-count">' . $total_pending_orders . '</span></span>';
}

// Añadimos el enlace principal
$wp_admin_bar->add_menu(array(
'id' => 'woocommerce-orders',
'title' => $title,
'href' => admin_url('edit.php?post_type=shop_order'),
'meta' => array(
'title' => 'Ver pedidos de WooCommerce',
),
));

// Añadimos submenús
$wp_admin_bar->add_menu(array(
'parent' => 'woocommerce-orders',
'id' => 'woocommerce-orders-all',
'title' => 'Todos los pedidos',
'href' => admin_url('edit.php?post_type=shop_order'),
));

$wp_admin_bar->add_menu(array(
'parent' => 'woocommerce-orders',
'id' => 'woocommerce-orders-processing',
'title' => 'Procesando (' . $processing_orders . ')',
'href' => admin_url('edit.php?post_type=shop_order&post_status=wc-processing'),
));

$wp_admin_bar->add_menu(array(
'parent' => 'woocommerce-orders',
'id' => 'woocommerce-orders-pending',
'title' => 'Pendientes de pago (' . $pending_payment_orders . ')',
'href' => admin_url('edit.php?post_type=shop_order&post_status=wc-pending'),
));

$wp_admin_bar->add_menu(array(
'parent' => 'woocommerce-orders',
'id' => 'woocommerce-orders-on-hold',
'title' => 'En espera (' . $on_hold_orders . ')',
'href' => admin_url('edit.php?post_type=shop_order&post_status=wc-on-hold'),
));

$wp_admin_bar->add_menu(array(
'parent' => 'woocommerce-orders',
'id' => 'woocommerce-orders-failed',
'title' => 'Fallidos (' . $failed_orders . ')',
'href' => admin_url('edit.php?post_type=shop_order&post_status=wc-failed'),
));

$wp_admin_bar->add_menu(array(
'parent' => 'woocommerce-orders',
'id' => 'woocommerce-orders-completed',
'title' => 'Completados',
'href' => admin_url('edit.php?post_type=shop_order&post_status=wc-completed'),
));
}
add_action('admin_bar_menu', 'ayudawp_pedidos_barra_admin_wp_texto', 100);

// CSS personalizado para el texto
function woocommerce_admin_bar_text_styles() {
?>
<style>
#wp-admin-bar-woocommerce-orders .ab-item {
padding-right: 26px;
}

/* Estilo para el contador */
#wp-admin-bar-woocommerce-orders .awaiting-mod {
background: #d63638;
color: #fff;
display: inline-block;
font-size: 9px;
font-weight: 600;
line-height: 1.2;
padding: 2px 5px;
border-radius: 50%;
margin-left: 5px;
vertical-align: middle;
min-width: 16px;
height: 16px;
text-align: center;
box-sizing: border-box;
position: relative;
top: -1px;
}

#wp-admin-bar-woocommerce-orders .awaiting-mod .pending-count {
display: block;
line-height: 12px;
font-size: 9px;
}

/* Ajuste para números de dos dígitos */
#wp-admin-bar-woocommerce-orders .awaiting-mod[class*="count-1"],
#wp-admin-bar-woocommerce-orders .awaiting-mod[class*="count-2"],
#wp-admin-bar-woocommerce-orders .awaiting-mod[class*="count-3"],
#wp-admin-bar-woocommerce-orders .awaiting-mod[class*="count-4"],
#wp-admin-bar-woocommerce-orders .awaiting-mod[class*="count-5"],
#wp-admin-bar-woocommerce-orders .awaiting-mod[class*="count-6"],
#wp-admin-bar-woocommerce-orders .awaiting-mod[class*="count-7"],
#wp-admin-bar-woocommerce-orders .awaiting-mod[class*="count-8"],
#wp-admin-bar-woocommerce-orders .awaiting-mod[class*="count-9"] {
border-radius: 8px;
min-width: 18px;
padding: 2px 4px;
}

/* Para números de tres dígitos o más */
#wp-admin-bar-woocommerce-orders .awaiting-mod.count-100,
#wp-admin-bar-woocommerce-orders .awaiting-mod.count-999 {
border-radius: 6px;
min-width: 20px;
padding: 2px 3px;
}
</style>
<?php
}
add_action('wp_head', 'woocommerce_admin_bar_text_styles');
add_action('admin_head', 'woocommerce_admin_bar_text_styles');

// Obtenemos la cantidad de pedidos (compatible con HPOS)
function get_woocommerce_orders_count($status = 'wc-processing') {
if (function_exists('wc_get_orders')) {
$orders = wc_get_orders(array(
'status' => $status,
'limit' => -1,
'return' => 'ids',
));
return count($orders);
}

// Compatibilidad para versiones anteriores
return wc_orders_count($status);
}

El resultado es esto:

texto enlace pedidos woocommerce barra admin wordpress

Enlace a los pedidos de WooCommerce en la barra de administración de WordPress (icono)

Aquí tienes la otra versión del código, que muestra un icono en vez de texto:

/* Enlace de pedidos de WooCommerce en barra de admin de WP - Icono */
function ayudawp_pedidos_barra_admin_wp_icono($wp_admin_bar) {
// Verificamos que WooCommerce esté activo y el usuario tenga permisos
if (!class_exists('WooCommerce') || !current_user_can('manage_woocommerce')) {
return;
}

// Obtenemos el número de pedidos por estado
$processing_orders = get_woocommerce_orders_count('wc-processing');
$pending_payment_orders = get_woocommerce_orders_count('wc-pending');
$failed_orders = get_woocommerce_orders_count('wc-failed');
$on_hold_orders = get_woocommerce_orders_count('wc-on-hold');

// Calculamos el total de pedidos pendientes
$total_pending_orders = $processing_orders + $pending_payment_orders + $failed_orders + $on_hold_orders;

// Creamos el título con icono
$icon = '<span class="ab-icon dashicons-before dashicons-store" style="font-family: dashicons; font-size: 20px;"></span>';
$title = $icon;

if ($total_pending_orders > 0) {
$title .= ' <span class="awaiting-mod count-' . $total_pending_orders . '"><span class="pending-count">' . $total_pending_orders . '</span></span>';
}

// Añadimos el enlace con icono
$wp_admin_bar->add_menu(array(
'id' => 'woocommerce-orders-icon',
'title' => $title,
'href' => admin_url('edit.php?post_type=shop_order'),
'meta' => array(
'title' => 'Pedidos de WooCommerce',
'class' => 'woocommerce-orders-icon',
),
));

// Añadimos submenús
$wp_admin_bar->add_menu(array(
'parent' => 'woocommerce-orders-icon',
'id' => 'woocommerce-orders-all-icon',
'title' => 'Todos los pedidos',
'href' => admin_url('edit.php?post_type=shop_order'),
));

$wp_admin_bar->add_menu(array(
'parent' => 'woocommerce-orders-icon',
'id' => 'woocommerce-orders-processing-icon',
'title' => 'Procesando (' . $processing_orders . ')',
'href' => admin_url('edit.php?post_type=shop_order&post_status=wc-processing'),
));

$wp_admin_bar->add_menu(array(
'parent' => 'woocommerce-orders-icon',
'id' => 'woocommerce-orders-pending-icon',
'title' => 'Pendientes de pago (' . $pending_payment_orders . ')',
'href' => admin_url('edit.php?post_type=shop_order&post_status=wc-pending'),
));

$wp_admin_bar->add_menu(array(
'parent' => 'woocommerce-orders-icon',
'id' => 'woocommerce-orders-on-hold-icon',
'title' => 'En espera (' . $on_hold_orders . ')',
'href' => admin_url('edit.php?post_type=shop_order&post_status=wc-on-hold'),
));

$wp_admin_bar->add_menu(array(
'parent' => 'woocommerce-orders-icon',
'id' => 'woocommerce-orders-failed-icon',
'title' => 'Fallidos (' . $failed_orders . ')',
'href' => admin_url('edit.php?post_type=shop_order&post_status=wc-failed'),
));

$wp_admin_bar->add_menu(array(
'parent' => 'woocommerce-orders-icon',
'id' => 'woocommerce-orders-completed-icon',
'title' => 'Completados',
'href' => admin_url('edit.php?post_type=shop_order&post_status=wc-completed'),
));
}
add_action('admin_bar_menu', 'ayudawp_pedidos_barra_admin_wp_icono', 100);

// CSS personalizado para el icono
function woocommerce_admin_bar_icon_styles() {
?>
<style>
#wp-admin-bar-woocommerce-orders-icon .ab-item {
padding-right: 26px;
}

#wp-admin-bar-woocommerce-orders-icon .ab-icon:before {
content: '\f174';
font-family: dashicons;
font-size: 20px;
}

/* Estilo para el contador */
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod {
background: #d63638;
color: #fff;
display: inline-block;
font-size: 9px;
font-weight: 600;
line-height: 1.2;
padding: 2px 5px;
border-radius: 50%;
margin-left: 5px;
vertical-align: middle;
min-width: 16px;
height: 16px;
text-align: center;
box-sizing: border-box;
position: relative;
top: -1px;
}

#wp-admin-bar-woocommerce-orders-icon .awaiting-mod .pending-count {
display: block;
line-height: 12px;
font-size: 9px;
}

/* Ajuste para números de dos dígitos */
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod[class*="count-1"],
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod[class*="count-2"],
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod[class*="count-3"],
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod[class*="count-4"],
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod[class*="count-5"],
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod[class*="count-6"],
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod[class*="count-7"],
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod[class*="count-8"],
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod[class*="count-9"] {
border-radius: 8px;
min-width: 18px;
padding: 2px 4px;
}

/* Para números de tres dígitos o más */
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod.count-100,
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod.count-999 {
border-radius: 6px;
min-width: 20px;
padding: 2px 3px;
}
</style>
<?php
}
add_action('wp_head', 'woocommerce_admin_bar_icon_styles');
add_action('admin_head', 'woocommerce_admin_bar_icon_styles');

// Obtenemos la cantidad de pedidos (compatible con HPOS)
function get_woocommerce_orders_count($status = 'wc-processing') {
if (function_exists('wc_get_orders')) {
$orders = wc_get_orders(array(
'status' => $status,
'limit' => -1,
'return' => 'ids',
));
return count($orders);
}

// Compatibilidad para versiones anteriores
return wc_orders_count($status);
}

Y se ve así de bien una vez añadido el código:

icono enlace pedidos woocommerce barra admin wordpress

¿Dónde añado el código?

Al ser una funcionalidad que no es del tema no te recomiendo añadir el código que elijas al archivo functions.php del tema hijo, mejor otra opción:

¡Tengo dudas!

Pues anímate y cuéntanoslas en los comentarios, ahí abajo…

Resume el artículo con tu IA favorita o compártelo en redes

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en las estrellas para valorarlo!

Promedio de puntuación 5 / 5. Total de votos: 5

¡Todavía no hay votos! Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en las redes sociales!

Puede que también te interese…

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!


Sobre el autor

Apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y dos perritas. Vasco de nacimiento, español de corazón y ciudadano de donde me quieran. Mi último libro es WordPress - Web gratis para todos. Mi blog personal es este, donde hace años ofrezco mis visiones acerca de la Web. Sígueme en Twitter
Scroll al inicio

Utilizamos cookies para ofrecerte la mejor experiencia en la web. No se comparte tu información con nadie, simplemente queremos que navegues normalmente sin tener que rellenar formularios en cada visita.
Puedes aprender más sobre qué cookies utilizamos en este enlace, o simplemente rechazarlas.