En esta lección añadiremos una segunda página a nuestro dashboard global de administración de restaurantes.

La llamaremos “Ventas”, y contendrá todo lo que tiene que ver con los pedidos, los informes de ventas, los cupones de descuento y los clientes del restaurante.

1- Crea una nueva página en el sitio del dashboard

Esta página llamada “Ventas” tendrá varias secciones, por lo que usaremos un elemento de pestañas de Elementor.

Estas son las páginas que vamos a desplegar en el frontend:

1. Pedidos de WooCommerce
2. Informes de ventas de WooCommerce
3. Cupones de WooCommmerce
4. Clientes de WooCommerce

Para eso, necesitas crear una nueva página en el sitio que has designado para el escritorio de administración global en el frontend.

WP ULTIMO 1.X

Si estás utilizando WP Ultimo 1.x, ve a Sitios > Todos los sitios, y haz clic en Escritorio en el sitio que has creado para el dashboard global.

WP ULTIMO 2.X

Si estás utilizando WP Ultimo 2.x, ve a Administrador de la Red > WP Ultimo > Sitios, y abre el escritorio del sitio que has designado para el escritorio de administración global.

Luego de abrir el sitio del dashboard frontend, ve a Páginas > Añadir nueva.

Ingresa el título de la página y haz clic en Editar con Elementor.

Ve a los Ajustes de la página y selecciona Elementor Canvas en Estructura de página.

2- Importa la plantilla de Elementor para esta página

Ahora necesitamos importar la plantilla que configuramos en lecciones anteriores a esta página.

Para ello, haz clic en Añadir plantilla.

En la Biblioteca de Elementor, ve a Mis plantillas y haz clic en Insertar en la plantilla que añadirás a esta página.

Una vez que hayas insertado la plantilla, haz clic con el botón derecho del ratón sobre la sección de contenido de la página y haz clic en Borrar para eliminar ese elemento de la página.

Añade un elemento de Pestañas a tu página:

Ahora cambia los colores de las pestañas para que sean similares a los de la plantilla.

Ve a Estilo en el elemento Pestañas, y selecciona estos colores si estás usando la plantilla Elementor 18:

• Color: #000000
• Color activo: #E53F31

Nota. Estos son los colores sugeridos, pero tú puedes elegir los colores que quieras para tu dashboard.

3- Añade el contenido de la página

Para esta página necesitas 4 pestañas, y estos son los títulos y el contenido de cada pestaña:

Pedidos:

[vg_display_admin_page page_url="edit.php?post_type=shop_order"]

Informes de ventas:

[vg_display_admin_page page_url="admin.php?page=wc-admin&path=%2Fanalytics%2Foverview"]

Cupones:

[vg_display_admin_page page_url="edit.php?post_type=shop_coupon"]

Clientes:

[vg_display_admin_page page_url="admin.php?page=wc-admin&path=/customers"]

4- Configura la página en el frontend

Una vez que hayas añadido los títulos y shortcodes, haz clic en el botón de Vista Previa para ver los cambios y el contenido de wp-admin en el frontend y configurar la página.

Puedes usar el panel de Opciones Rápidas en el lado izquierdo de la pantalla. Este panel añadido por WP Frontend Admin te permite configurar tus páginas en el frontend.

Comienza por seleccionar la siguiente información básica:

• Título de página: Ingresa un título corto como “Ventas”.
• URL Slug: Puedes ingresar “ventas” como slug de la URL de la página.
• Plantilla: Elementor Canvas
• Añadir a menú: Selecciona el menú de navegación que creaste en las lecciones anteriores para el dashboard en el frontend.

Después de eso, configura cada pestaña para ocultar cualquier elemento innecesario, editar cualquier texto en de tu página en el frontend, etc.

En primer lugar, vamos a ocultar cualquier botón innecesario, metaboxes, textos, etc.

• Haz clic en Ocultar elemento.
• Haz clic en el elemento que quieras ocultar.
• Repite el proceso para cada elemento que quieras ocultar de la página en el frontend.

Una vez hayas ocultado todos los elementos innecesarios, puedes cambiar cualquier texto de la página de pedidos:

1. Haz clic en Editar textos.
2. Edita todos los textos que quieras cambiar.
3. Haz clic en Edición terminada.

Además de ocultar los elementos innecesarios y editar los textos, puedes hacer lo siguiente:

• Marca la casilla ¿Ocultar notificaciones añadidas por otros plugins o temas?.
• Marca cualquier columna en la sección Columnas desactivadas para ocultarlas de tu página de Pedidos.
• Si tu plataforma vende más de un plan de membresía, puedes restringir las páginas del dashboard basándote en el plan WP Ultimo adquirido por el usuario. No marcaremos ningún plan porque estamos usando un solo plan.
• Haz clic en Guardar para aplicar los cambios.

Una vez que hayas editado la página de pedidos, puedes configurar el formulario de añadir/editar pedidos para ocultar cualquier elemento innecesario o cambiar cualquier texto del mismo.

Haz clic en el botón Añadir pedido para abrir el formulario y ocultar los siguientes campos:

• Campos personalizados
• Permisos de productos descargables

Una vez que hayas editado el formulario de añadir/editar pedido, haz clic en Guardar para aplicar los cambios.

Después, puedes continuar editando las otras pestañas siguiendo los mismos pasos. Solo recuerda guardar los cambios cada vez que apliques cambios a una pestaña.

Pedidos, ventas, cupones, y clientes en el frontend

Esta es la página de pedidos del restaurante. Los usuarios verán el registro de todos los pedidos que se han realizado.

Nota – En futuras lecciones te enseñaremos cómo configurar un sistema de actualización automática para la página de pedidos.

Cuando los usuarios abran los detalles de un pedido, verán el formulario de edición de pedidos. Además, así es como verán el formulario de creación de pedidos cuando quieran crearlos manualmente en el dashboard en el frontend.

Esta es la página de informes de ventas de WooCommerce, donde los administradores del restaurante podrán ver los detalles de las ventas realizadas en el restaurante. Tendrán acceso a gráficos que muestran las ventas por mes, semana, etc.

Si los usuarios de tu plataforma quieren crear Cupones de descuento para aumentar las ventas y dar un descuento a sus clientes, podrán hacerlo fácilmente usando la página de cupones de WooCommerce en el frontend.

Cuando los usuarios crean o editan un cupón, este es el aspecto que tendrá el formulario de creación/edición de cupones en el frontend.

Esta es la página que muestra la lista de clientes del restaurante. Los administradores del restaurante tendrán acceso a toda esta información fácilmente desde el frontend, sin tener que usar el escritorio normal de WordPress.

En la próxima lección te enseñaremos cómo añadir la página donde los usuarios podrán crear comidas para vender en el restaurante y cómo integrar esa página al dashboard en el frontend que estamos creando.