¿No te parece raro, pero sobre todo poco práctico que el menú de gestión de pedidos, el más importante en una tienda online, no esté disponible a simple vista en la administración de WordPress + WooCommerce?

Índice de contenidos

La (i)lógica de los menús y submenús de WooCommerce

En serio, es totalmente anticlimax que WooCommerce añada un menú propio para la configuración de pagos – ¡Ah no, perdona, que es para vender su propio sistema de gestión de pagos!, un lapsus mío, no me lo tengas en cuenta –; como iba diciendo… ¿no sería lógico que el menú de pedidos, el que más visita cualquier gestor de Ecommerce, tenga su propio menú?. Ahora sí, mucho mejor 🙂

Pues si quieres poner el mundo en su orden natural toca personalizarlo a tu gusto, porque WooCommerce ha decidido que los pedidos no tienen la misma importancia que la pantalla de productos – esa que utilizas de vez en cuando para actualizar precios o crear variaciones – o la de pagos – que no se usa salvo la primera vez que configuras la tienda.

En fin, no nos pongamos más intensos que es mejor arreglar las cosas que quejarse…

Pues bien, para mover el submenú «Pedidos» de WooCommerce fuera del menú WooCommerce y convertirlo en un menú independiente en la barra de administración de WordPress podemos hacerlo básicamente de 2 3 maneras:

Con un sencillo snippet de código de copiar y pegar y a funcionar.
Con un plugin desde el que cambiar de sitio los menús, este y otro que quieras cambiar.
Con un nuevo icono en la barra de admin superior de WordPress (que se me olvidaba).

Empezaremos con el fragmento de código…

Te propongo este:

/**
* Nuevo menú de pedidos de WooCommerce
*/

// Hacemos que el submenú de pedidos se convierta en menú de pedidos
add_action('admin_menu', 'ayudawp_move_orders_menu', 999);
function ayudawp_move_orders_menu() {
remove_submenu_page('woocommerce', 'edit.php?post_type=shop_order');

// Hacemos que el nuevo menú muestre el bocadillo de pedidos pendientes
$pending_count = ayudawp_get_pending_orders_count();
$menu_title = __('Orders', 'woocommerce');
if ($pending_count > 0) {
$menu_title .= ' <span class="awaiting-mod count-' . esc_attr($pending_count) . '"><span class="pending-count">' . number_format_i18n($pending_count) . '</span></span>';
}

// Y con esto ya tenemos el nuevo menú de pedidos independiente y funcional
add_menu_page(
__('Orders', 'woocommerce'), //Lo ves en inglés pero se traduce solo si tienes traducido WooCommerce
$menu_title,
'edit_shop_orders', // Quién puede verlo, por defecto de gestor de tienda para arriba
'edit.php?post_type=shop_order',
'',
'dashicons-cart', // Icono, por si quieres cambiarlo
56 // Posición (justo después del de WooCommerce), por si quieres cambiarla
);
}

// Contador de pedidos pendientes para el bocadillo
function ayudawp_get_pending_orders_count() {
if (!function_exists('wc_get_orders')) {
return 0;
}
$pending_orders = wc_get_orders(array(
'status' => 'processing',
'limit' => -1,
'return' => 'ids'
));
return count($pending_orders);
}

// Algo de CSS para que el bocadillo de pedidos pendientes se ajuste a los estilos de Woo
add_action('admin_head', 'ayudawp_orders_menu_styles');
function ayudawp_orders_menu_styles() {
?>
<style>
#adminmenu .menu-icon-shop_order .awaiting-mod {
background-color: #d63638;
color: #fff;
border-radius: 9px;
font-size: 9px;
line-height: 17px;
font-weight: 600;
margin-left: 7px;
padding: 0 6px;
min-width: 17px;
height: 17px;
text-align: center;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}

// Ocultamos el contador cuando el menú esté contraido
.folded #adminmenu .menu-icon-shop_order .awaiting-mod {
display: none;
}
</style>
<?php
}

// Actualización del contador mediante AJAX
add_action('wp_ajax_ayudawp_update_orders_count', 'ayudawp_ajax_update_orders_count');
function ayudawp_ajax_update_orders_count() {
if (!wp_verify_nonce($_POST['nonce'], 'ayudawp_orders_nonce')) {
wp_die('Security check failed');
}
$count = ayudawp_get_pending_orders_count();
wp_send_json_success($count);
}

// Pelín de JavaScript para actualizar el contador con los pedidos en curso
add_action('admin_footer', 'ayudawp_orders_count_script');
function ayudawp_orders_count_script() {
$screen = get_current_screen();
if (!$screen || $screen->id !== 'edit-shop_order') {
return;
}
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(document).on('change', 'select[name="action"], select[name="action2"]', function() {
if ($(this).val() === 'mark_processing' || $(this).val() === 'mark_completed') {
setTimeout(function() {
$.post(ajaxurl, {
action: 'ayudawp_update_orders_count',
nonce: '<?php echo wp_create_nonce("ayudawp_orders_nonce"); ?>'
}, function(response) {
if (response.success) {
var count = response.data;
var $menuItem = $('#adminmenu .menu-icon-shop_order .wp-menu-name');
var $countBubble = $menuItem.find('.awaiting-mod');
if (count > 0) {
if ($countBubble.length) {
$countBubble.find('.pending-count').text(count);
} else {
$menuItem.append(' <span class="awaiting-mod count-' + count + '"><span class="pending-count">' + count + '</span></span>');
}
} else {
$countBubble.remove();
}
}
});
}, 1000);
}
});
});
</script>
<?php
}

Cosas que hace el código:

Crea un nuevo menú para los pedidos de WooCommerce
Se muestra con un monísimo icono de carrito
Muestra un bocadillo, o burbuja, como lo llames, con un contador de pedidos pendientes que se actualiza al instante, como el submenú habitual
Te lleva a la pantalla de gestión de pedidos al hacer clic en el nuevo menú

woocommerce menu pedidos propio — Después

Cosas que NO hace el código:

Quitar el submenú de pedidos de WooCommerce: y no lo hace porque habría que añadir un montón de código más que solo complica las cosas. El código hace lo más importante: poner a la vista los pedidos.

Cosas que puedes cambiar en el código:

Cambiar el icono del carrito por otro: por defecto es dashicons-cart
Cambiar la posición del menú de pedidos: por defecto es 56, justo debajo del de WooCommerce (55), y por encima de productos (57) y marketing (58). Por ejemplo, podrías incluso ponerlo justo debajo del menú del escritorio con posición 02.

Código alternativo

A continuación de la publicación de este artículo he visto que Rodolfo Melogli ha compartido un snippet muy chulo para este mismo objetivo, así que si quieres también puedes probarlo, es este:

/**
* @snippet Move Orders Menu Item @ WordPress Dashboard
* @tutorial https://businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 10
* @community https://businessbloomer.com/club/
*/
add_action( 'admin_menu', 'bbloomer_move_orders_menu_item', 9999 );
function bbloomer_move_orders_menu_item() {
global $menu, $submenu;
if ( ! isset( $submenu['woocommerce'] ) ) {
return;
}
// REMOVE "ORDERS" SUBMENU ITEM
$orders = null;
foreach ( $submenu['woocommerce'] as $key => $item ) {
if ( isset( $item[2] ) && in_array( $item[2], [ 'edit.php?post_type=shop_order', 'wc-orders' ] ) ) {
$orders = $item;
unset( $submenu['woocommerce'][$key] );
break;
}
}
if ( ! $orders ) return;
// ADD "ORDERS" BELOW "WOOCOMMERCE"
add_menu_page(
$orders[0],
$orders[0],
$orders[1],
$orders[2],
'',
'dashicons-cart',
55.5
);

}

El resultado es muy parecido al del código anterior.

Alternativa visual (sin código)

Si prefieres no tocar código, existen plugins como Admin Menu Editor, que permiten reubicar menús y submenús de forma visual, aunque el método anterior es más directo y limpio para este caso, creo yo.

Pero lo que es funcionar funciona perfecto, de eso no hay duda, y si te gusta te permite poner orden en todos los demás menús y submenús de WordPress.

¡Ah, se me olvidaba! También puedes tener un menú de pedidos en la barra superior de admin

No había caído en que hace poco publiqué otro truco que, sin solucionar esta cosa rara de la (i)lógica de los menús de WooCommerce, te ofrece lo importante: acceso rápido y visualmente lógico a la gestión de pedidos, en este caso añadiendo un menú de pedidos en la barra de admin de WordPress, que siempre estará visible, allá donde estés.

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

A mi personalmente es el método que más me gusta, por su total disponibilidad

…Esperar

Afortunadamente comenté este asunto en Twitter y el equipo de WooCommerce ha mostrado interés en arreglar esta incongruencia, y mientras incluso un usuario ha propuesto su idea de organización de los menús, así que es posible que pronto veamos de manera nativa el menú de pedidos en un lugar visible a simple vista, y no oculto bajo el menú de WooCommerce.

A veces comentar estas cosas en redes tiene su fruto 🙂

Mientras tanto, espero que estos trucos te ayuden a gestionar de manera más eficiente tu tienda online.

¿Por qué WooCommerce tiene por defecto esa estructura de menús tan ilógica?

Supongo que atenderá más a una lógica comercial que operativa, y la entiendo, pero no tiene sentido que siga así tras – por ejemplo – la configuración inicial, donde debería primar ya la lógica de gestión de la tienda online.

¿O no? ¿tú qué opinas?