En este tutorial queremos enseñarte cómo crear un dashboard en el frontend para tiendas con WooCommerce. Puedes integrar este dashboard con el plugins WP Ultimo para crear una red multisitio para que tus clientes creen sus propias tiendas WooCommerce.
Además del plugin WooCommerce, necesitas instalar el plugin WP Frontend Admin, que te permite mostrar cualquier página wp-admin en el frontend. Puedes crear un dashboard en el frontend, aplicaciones web, etc.
Tú puedes probar el plugin premium en tu sitio web gratis por 7 días.
Como ejemplo te enseñaremos cómo mostrar la lista de productos de WooCommerce en el frontend, y luego puedes seguir los mismos pasos para mostrar todas las páginas de WooCommerce en el frontend y completar tu dashboard. Después de instalar el plugin tienes que seguir estos sencillos pasos para crear las páginas del dashboard en el frontend:
(Si está usando una red multisitio, puedes crear un sitio para el dashboard y crear las páginas del dashboard).
Paso 1. Crear una nueva página
Es necesario crear una nueva página en el sitio del dashboard; esta página mostrará el contenido de wp-admin en el frontend con un simple shortcode.
- Ve a Páginas > Añadir nueva.
A continuación, debes ingresar el título de la página e ingresar el siguiente shortcode en el contenido de la página:
[vg_display_admin_page page_url="wp-admin URL"]
Solo tienes que ingresar la URL de la lista de productos de WooCommerce entre las comillas del shortcode. Por ejemplo:
[vg_display_admin_page page_url="edit.php?post_type=product"]
Después, haz clic en Vista previa para ver el contenido de wp-admin en el frontend y configura tu página
Paso 2. Configura la página de WooCommerce en el frontend
Una vez que puedas ver el contenido de wp-admin en el frontend, puedes empezar a configurar tu página en vivo usando el panel de Configuración Rápida en el lado izquierdo de tu pantalla.
Primero, selecciona la información básica de la página.
- Título de página: Ingresa aquí el título de la página.
- URL Slug: Ingresa un slug de URL usando solo palabras clave.
- Plantilla: Selecciona la misma plantilla para todas las páginas del dashboard.
- Añadir a menú: Aquí selecciona el menú de tu dashboard.
En segundo lugar, oculta los elementos innecesarios.
WP Frontend Admin te permite simplificar tus páginas en el frontend de WooCommerce ocultando cualquier elemento innecesario:
- Clic en Ocultar elemento.
- Haz clic en el elemento que quieras ocultar.
- Repite esta operación con todos los elementos que quieras eliminar de la página en el frontend.
- Opcional. Marca la casilla Ocultar notificaciones añadidas por otros plugins o temas.
Tercero, edita cualquiera de los textos de tu página de WooCommerce.
Puedes personalizar mucho más tu página editando los textos, solo tienes que seguir estos pasos:
- Clic en Editar textos.
- Edita todos los textos que quieras.
- Haz clic en Edición terminada.
En cuarto lugar, desactiva las columnas innecesarias y guarda.
También puedes activar la opción que solo mostrará los productos del usuario, o desactivarlo para mostrar los productos de otros usuarios del mismo sitio.
Por último, puedes Guardar los cambios para publicar tu página.
Nota: También puedes abrir el formulario Añadir nuevo y ocultar todos los campos y metaboxes que no sean esenciales para crear productos. Estos mismos ajustes se aplicarán al formulario Editar producto.
Este es el aspecto de la página de productos de WooCommerce en el frontend.
Y este es el aspecto de la página de creación de nuevos productos en el frontend.
Paso 3. Continúa creando tu dashboard siguiendo los mismos pasos
Si aplicas los mismos pasos a las demás páginas de WooCommerce, podrás crear tu dashboard en el frontend rápidamente.
Aquí está la lista de shortcodes que necesitarás para mostrar cada una de las páginas de WooCommerce en el frontend:
Lista de productos de WooCommerce
[vg_display_admin_page page_url="edit.php?post_type=product"]
Añadir nuevo producto de WooCommerce
[vg_display_admin_page page_url="post-new.php?post_type=product"]
Categorías de WooCommerce
[vg_display_admin_page page_url="edit-tags.php?taxonomy=product_cat&post_type=product"]
Etiquetas de WooCommerce
[vg_display_admin_page page_url="edit-tags.php?taxonomy=product_cat&post_type=product"]
Atributos de WooCommerce
[vg_display_admin_page page_url="edit.php?post_type=product&page=product_attributes"]
Pedidos de WooCommerce
[vg_display_admin_page page_url="edit.php?post_type=shop_order"]
Clientes de WooCommerce
[vg_display_admin_page page_url="admin.php?page=wc-admin&path=%2Fcustomers"]
Informes de WooCommerce
[vg_display_admin_page page_url="admin.php?page=wc-reports"]
Ajustes de WooCommerce
[vg_display_admin_page page_url="admin.php?page=wc-settings"]
Sección de estado de WooCommerce
[vg_display_admin_page page_url="admin.php?page=wc-status"]
Curso gratuito: Cómo crear una plataforma como Shopify usando WooCommerce entre bastidores
Hemos creado un completo curso gratuito en el que aprenderás a crear una plataforma similar a Shopify, en la que tus usuarios podrán registrarse pagando una membresía en tu red multisitio. Después de darse de alta, podrán crear y gestionar tiendas WooCommerce mediante un dashboard en el frontend que te enseñaremos a crear fácilmente.
Puedes realizar el curso en este enlace.
También disponemos de una colección de bonitas plantillas para tu dashboard en el frontend que te ahorrarán el esfuerzo de tener que crear un dashboard de aspecto profesional e intuitivo.
Puedes previsualizar y descargar las plantillas.
Tú puedes probar el plugin premium en tu sitio web gratis por 7 días.
