Estamos en la última etapa de la construcción de nuestro dashboard para restaurantes. Ya hemos configurado estas páginas en nuestro dashboard:

• Código QR
• Ventas
• Comidas
• Equipo

Y ahora te enseñaremos cómo añadir las páginas necesarias para que los usuarios puedan gestionar los ajustes del restaurante desde el dashboard en el frontend. Más concretamente, configuraremos las siguientes secciones en la página de “Ajustes” en el frontend:

• Pasarelas de pago
• Estilo de menú
• Selector de logotipo y colores para el sitio del usuario
• Página de membresía
• Página de impuestos de WooCommerce
• Diseñador de facturas por correo electrónico
• Sistema de autorefresco para la página de pedidos

Para ello, tienes que seguir estos pasos:

1- CREA UNA NUEVA PÁGINA Y CONFIGURA LA PLANTILLA DEL DASHBOARD EN EL FRONTEND

Esta nueva página debe ser creada en el sitio del dashboard 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.

Ahora ve a Páginas > Añadir nueva para crear una nueva página.

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

Una vez que estés en el editor de Elementor, ve a Ajustes de la página, en Estructura de página selecciona en el desplegable la opción Elementor Canvas.

Ahora tienes que hacer clic en el botón Añadir Plantilla para importar la plantilla del dashboard de restaurantes.

En la biblioteca de Elementor, tienes que ir a Mis plantillas y hacer clic en Insertar en la plantilla que estás usando para construir este dashboard para restaurantes.

Ahora tenemos que eliminar la sección de contenido de la página porque no usaremos un editor de texto en esta sección. En su lugar, usemos un elemento Pestañas para mostrar varias páginas de wp-admin en la misma página.

Solo tienes que hacer clic en el botón Borrar Sección para eliminar la sección de la página.

Después de eso, necesitas añadir un elemento de Pestañas en una nueva sección.

Para ello solo tienes que ir a Elementos, buscar Pestañas y arrastrar el elemento Pestañas al contenido de la página.

Para esta página, necesitaremos al menos cinco pestañas, así que puedes añadir nuevas pestañas haciendo clic en el botón Añadir elemento en la sección de Pestañas.

Ahora es el momento de cambiar los colores de las pestañas. Para ello, ve a Estilo en el elemento Pestañas, y selecciona:

• Color: #000000
• Color activo: #E53F31

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

Ahora que has configurado la plantilla del dashboard en el frontend, puedes proceder a añadir algo de contenido a las pestañas.

3- MUESTRA LAS SECCIONES DE “AJUSTES” EN EL FRONTEND

Después de configurar la plantilla para añadir las pestañas necesarias, debes añadir el contenido de las pestañas.

Es necesario añadir los títulos y el contenido de las pestañas como explicaremos a continuación:

Ajustes del restaurante:

[vg_display_admin_page page_url="admin.php?page=wc-settings"]

Estilo de menú:

Puedes añadir algo como “Selecciona el estilo de menú a continuación” justo encima del shortcode.

[vg_display_admin_page page_url="options-reading.php"]

Marca:

Puedes añadir algo como “Selecciona tu logo y colores” justo encima del shortcode.

[vg_display_admin_page page_url="customize.php"]

Membresía:

Si usas WP Ultimo 2, necesitas usar este código corto:

[vg_display_admin_page page_url="admin.php?page=wu-account"]

Si usas WP Ultimo 1, necesitas usar este código corto.

[vg_display_admin_page page_url="admin.php?page=wu-my-account"]

Diseñador de facturas:

[vg_display_admin_page page_url="Pega aquí la URL del Personalizador de correo electrónico"]

¿Cómo sabes la URL de la página del personalizador de correo electrónico?

Ve a WooCommerce > Personalizador de correo electrónico.

Ahora copia la URL de la página del Personalizador de correo electrónico y pégalo entre las comillas en el shortcode:

[vg_display_admin_page page_url="Pega aquí la URL del Personalizador de correo electrónico"]

4- CONFIGURA LA PÁGINA DE “AJUSTES” EN EL FRONTEND

Una vez que hayas configurado el contenido de todas las pestañas, tienes que hacer clic en Previsualizar cambios para ver el contenido de administración que se muestra en el frontend y configurar la página de “Ajustes”.

Verás el panel de Opciones rápidas en la parte izquierda de la pantalla.

Puedes empezar a configurar tu página seleccionando la siguiente información básica:

• Título de página: Ajustes
• URL slug: ajustes
• Plantilla: Elementor Canvas
• Añadir a menú: Selecciona el menú de navegación que has creado para el dashboard en el frontend.

A) CONFIGURA LA PESTAÑA “AJUSTES DEL RESTAURANTE” EN EL FRONTEND

Necesitas ocultar algunos elementos de la pestaña de Ajustes del Restaurante. Por ejemplo, necesitas ocultar las siguientes pestañas de la página de ajustes de WooCommerce:

• Productos
• Envío
• Cuentas y privacidad
• Correos electrónicos
• Integración
• Avanzado

Solo tienes que hacer clic en el botón Ocultar elemento y haz clic en el elemento que quieras ocultar.

Por lo tanto, las únicas pestañas que se mantendrán en esta página son estas:

• General
• Impuesto
• Pagos
• Auto Refresh

Una vez que hayas eliminado todas las pestañas innecesarias de la página de ajustes de WooCommerce, debes guardar los cambios haciendo clic en Guardar en el panel de Opciones Rápidas.

Ahora necesitas ocultar cualquier elemento innecesario de la pestaña General. Te recomendamos que mantengas estos campos:

• Dirección de la tienda
  • Dirección, línea 1
  • Dirección, línea 2
  • Ciudad
  • País / Provincia
  • Código postal
• Opciones generales
  • Activar impuestos
• Opciones de moneda
  • Moneda
  • Posición de la moneda
  • Separador de miles
  • Separador decimal
  • Número de decimales

La pestaña de Impuestos mostrará todos los ajustes para que los usuarios configuren los impuestos de la comida del restaurante; no ocultaremos ningún campo.

En la pestaña Pagos, los usuarios verán las diferentes pasarelas de pago que pueden activar y configurar para recibir pagos en línea. No ocultaremos ningún campo.

La pestaña Auto Refresh permitirá a los usuarios establecer un número específico de segundos tras los cuales la página de pedidos se actualizará automáticamente. No ocultaremos ningún campo.

Puedes hacer clic en Guardar para aplicar los cambios en la pestaña Ajustes del Restaurante.

B) CONFIGURA LA PESTAÑA “ESTILO DEL MENÚ” EN EL FRONTEND

La pestaña Estilo del Menú mostrará los ajustes de lectura de WordPress en el frontend para que los usuarios puedan seleccionar la página de inicio del sitio. Esto será útil para que los usuarios seleccionen el estilo de menú del restaurante.

Es necesario ocultar los siguientes elementos de esta página:

• Ajustes de la lectura
• Tus últimas Entradas
• Página de entradas
• Número máximo de entradas a mostrar en el sitio
• Número máximo de entradas a mostrar en el feed
• Para cada entrada en el feed, incluir
• Visibilidad en los motores de búsqueda

Una vez que hayas terminado de ocultar todos los elementos innecesarios, simplemente haz clic en Guardar para aplicar los cambios.

C) CONFIGURA LA PESTAÑA “MARCA” EN EL FRONTEND

Ahora es el momento de configurar la página en la que los gerentes de los restaurantes podrán subir su propio logotipo y colores para su restaurante.

Para ello, necesitarán tener acceso al personalizador del tema en el frontend. Como estamos usando el tema Kadence, tendremos que ocultar todas las pestañas y elementos innecesarios.

Por ejemplo, puedes ocultar las siguientes pestañas:

• Diseño de la página
• Entradas de blog
• Tipos de entradas personalizadas
• Resultados de la búsqueda
• Menús
• Widgets
• Ajustes de la página web
• etc.

Los únicos elementos que mantendremos en esta página son estos:

• General: Donde los usuarios seleccionarán los colores y las tipografías de su sitio.
• Identidad del sitio: Donde los usuarios seleccionarán el logotipo de su sitio.

IMPORTANTE: Por defecto, WP Frontend Admin muestra la página del personalizador en ancho completo, pero puedes revertir esa configuración.

Ve al Administreador de la Red, y ahora en WP Frontend Admin > Ajustes > Solución de errores.

Ahora simplemente ingresa “customize.php” en el campo Deshabilitar pantalla completa para estas páginas. Asegúrate de omitir las comillas.

Finalmente, guarda los cambios.

D) CONFIGURA LA PESTAÑA “DISEÑADOR DE FACTURAS” EN EL FRONTEND

Puedes ocultar cualquier elemento innecesario de la página Diseñador de facturas.

Una vez que hayas terminado, haz clic en Guardar para aplicar los cambios de esta pestaña.

E) CONFIGURA LA PÁGINA DE “MEMBRESÍA” DE WP ULTIMO EN EL FRONTEND

Dado que el sitio del dashboard global no tiene ningún plan de membresía asignado, no serás capaz de ver el contenido de esta página.

Sin embargo, puedes crear un nuevo sitio y asociarlo con un plan de WP Ultimo, y podrás ver la página de la cuenta en el frontend.

Los usuarios que han comprado un plan podrán ver la página de su cuenta.

Por ultimo, haz en Guardar y ve a la siguiente pestaña.

5- AÑADE BONITOS ICONOS AL MENÚ DEL DASHBOARD

Ahora que hemos terminado de construir nuestro dashboard, es el momento de hacer que se vea más bonito añadiendo algunos iconos a los elementos del menú.

Para ello, vamos a usar el plugin WP Menu Icons, así que tenemos que abrir el sitio del dashboard en el frontend, ahora ve a Apariencia > Menús.

Una vez allí, añade un icono a cada elemento haciendo clic en el signo +.

Una vez que elijas el icono que quieres añadir al elemento, haz clic en Guardar y continúa con los demás elementos del menú.

Después de añadir los iconos a todos los elementos del menú, solo tienes que hacer clic en Guardar menú para aplicar los cambios al menú de navegación de tu dashboard.

6- SELECCIONA LA PÁGINA DE INICIO PARA EL DASHBOARD EN EL FRONTEND

Por último, tenemos que seleccionar la primera página que nuestros usuarios verán cuando abran el dashboard para gestionar sus sitios. En este caso, seleccionaremos la página de Ventas porque queremos que conozcan sus informes de ventas tan pronto como se conecten al dashboard.

Ve a Ajustes > Lectura y selecciona la página de Ventas (o la página que quieras) en el desplegable de Portada.

ESTA ES LA PÁGINA DE “AJUSTES” EN EL FRONTEND

Una vez publicada la página de “Ajustes” en tu dashboard, los usuarios podrán ver y gestionar los ajustes generales del restaurante, las pasarelas de pago, los impuestos del restaurante, el tiempo que tarda la página de pedidos en actualizarse automáticamente, etc.

También podrán seleccionar el diseño del menú de comida del restaurante, seleccionar los colores y su propio logotipo, diseñar bonitas facturas que se enviarán por correo electrónico a los clientes y gestionar las opciones de afiliación.