En esta lección te enseñaremos cómo mostrar la página de productos de WooCommerce en el frontend para permitir que los usuarios de tu plataforma puedan crear y editar comidas.

La mejor parte es que los campos mostrados en el formulario de creación/edición de productos no serán los campos normales de WooCommerce.

En su lugar, usaremos el plugin WooCommerce Food para que el formulario contenga campos adecuados para crear comidas y añadir información nutricional, opciones de comida para acompañar el plato actual, etc.

Solo debes seguir estos sencillos pasos:

1- Abre el sitio del dashboard global

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.

2- Crea una nueva página

Ve a Páginas > Añadir nueva.

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

3- Configura la plantilla de la página

Ve a la Configuración de la página y selecciona Elementor Canvas en el campo Estructura de página.

Ahora haz clic en el botón de Añadir Plantilla para insertar la plantilla del dashboard que estamos usando en este curso para construir nuestra interfaz de usuario de gestión de restaurantes.

Ve a Mis plantillas y haz clic en Insertar para añadir la plantilla de Elementor a la nueva página.

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

Luego de importar la plantilla de la página, elimina la sección de contenido de la página porque no necesitas un elemento de texto.

En lugar de un elemento de texto, añadiremos un elemento de Pestañas. Usaremos dos pestañas: una para los productos / comidas y otra para las categorías.

Una vez que hayas añadido el elemento Pestañas, cambia los colores:

Ve a Estilo en el elemento Pestañas, y selecciona estos colores recomendados:

• Color: #000000
• Color activo: #E53F31

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

Ahora debemos cambiar los títulos de las pestañas y añadir el siguiente contenido:

Comidas:

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

Categorías:

[vg_display_admin_page page_url="edit-tags.php?taxonomy=product_cat&post_type=product"]

Luego de eso, hay que hacer clic en Previsualizar cambios para ver el contenido de las pestañas en el frontend.

5- Configura el creador de comidas en el frontend

Una vez que estés en el frontend, comienza a configurar tu página en el frontend usando el panel de Opciones Rápidas de WP Frontend Admin.

Puedes empezar seleccionando la siguiente información:

• Título de página: Ingresa aquí algo como “Comidas”.
• URL Slug: Podemos ingresar “comidas” como slug de la URL.
• Plantilla: Elementor Canvas
• Añadir a menú: Selecciona el menú de navegacións que has designado para el panel de control frontend.

WP Frontend Admin te permite simplificar tus páginas en el frontend para dar a los usuarios una mejor experiencia.

Para simplificar tus páginas en el frontend, puedes ocultar cualquier elemento innecesario de tus páginas. Es importante mantener los campos, metaboxes, y cualquier otro elemento esencial.

1. Haz clic en Ocultar elemento.
2. Haz clic en el elemento que quieras ocultar.
3. Repite estos dos pasos con cada elemento que quieras ocultar de tu página en el frontend.

Además de ocultar cualquier elemento innecesario de tus páginas en el frontend, puedes editar cualquier texto para hacerlo más claro para tus usuarios:

Cuando tus páginas en el frontend muestran una lista de productos, entradas, páginas o cualquier otro tipo de contenido, puedes desactivar algunas columnas innecesarias para que la tabla sea más limpia.

Puedes marcar las columnas que quieras ocultar en la sección Columnas desactivadas.

Puedes restringir las páginas del dashboard en función del plan de WP Ultimo adquirido por el usuario. Puedes marcar el plan de WP Ultimo para el cual esta página estará disponible. Nosotros no marcaremos ningún plan porque estamos usando un solo plan en este curso. La captura de pantalla es solo un ejemplo.

Finalmente, haz clic en Guardar para aplicar los cambios en la página de comidas.

Una vez que hayas editado la lista de comidas, puedes abrir el formulario de añadir/editar comidas para ocultar cualquier elemento innecesario de la misma y editar los textos.

Este formulario mostrará los campos normales de WooCommerce, así como los campos añadidos por WooCommerce Food.

Por eso debemos ocultar los campos y metaboxes innecesarios del formulario de añadir/editar comida.

Por ejemplo, podemos ocultar los siguientes campos y metaboxes:

• Botones de información del producto
• En Publicar vamos a ocultar:
  • Estado
  • Visibilidad
  • Visibilidad del catálogo
  • Copiar en un nuevo borrador
• Etiquetas del producto
• Campos del generador Kaya QR
• Todos los campos y casillas de verificación de la sección
• Datos del producto. Solo vamos a mantener los campos Precio normal y Precio rebajado.
• Descripción corta del producto
• Y cualquier campo que consideres que tus usuarios no necesitarán

No olvides hacer clic en Guardar en el panel de Opciones Rápidas una vez que hayas ocultado todos los elementos innecesarios.

Nota. También puedes editar cualquier texto para cambiar el nombre de los campos.

Después de editar la página de productos, ve a la pestaña Categorías y sigue los mismos pasos para ocultar los elementos innecesarios o editar los textos.

Crear comidas y categorías en el frontend

Cuando las páginas de creación de comidas y categorías se publican en el dashboard, tus clientes podrán crear un número ilimitado de comidas para vender en sus restaurantes.

Esta es la página que muestra la lista de productos/comidas en el frontend.

Esto es lo que los usuarios verán al crear o editar comidas en el frontend. Como verás, WooCommerce Food modifica el formulario de creación y edición de productos para que puedas añadir información relevante para las comidas.

Además, los usuarios podrán añadir categorías de alimentos como bebidas, entradas, alimentos nacionales, etc. Para ello, hemos mostrado la página de categorías de productos en el dashboard.

Cuando los usuarios quieran editar las categorías de productos, esto es lo que verán en el formulario en el frontend.

En la próxima lección te enseñaremos cómo mostrar la página de usuarios de WordPress en el frontend para que los administradores manejen el equipo del restaurante como meseros, cocineros, etc.