Como Construir un Dashboard Moderno de Administracion de Productos WooCommerce

Un cliente mío ejecuta bigsales.ro, una tienda WooCommerce con un catalogo de productos grande. Seguian diciendome lo mismo: gestionar productos en el admin de WooCommerce predeterminado es doloroso. Cargas de pagina lentas, demasiados clics para cambiar un precio, ninguna vista movil apropiada, y el editor masivo apenas califica como “masivo”.

Mire las opciones existentes, no encontre ninguna genial para lo que necesitabamos, y termine construyendo un dashboard personalizado desde cero. Ahora es de codigo abierto y puedes usarlo para tu propia tienda.

Woo Admin en GitHub

El problema con la gestion de productos en WooCommerce

Si has gestionado mas de un punado de productos en WooCommerce, ya sabes. El admin de WordPress fue disenado para posts de blog, y WooCommerce agrego gestion de productos encima de eso. Funciona, pero no funciona bien.

Puntos de dolor especificos que mi cliente seguia encontrando:

• Editar un solo producto significa cargar el editor completo de WordPress, esperar todos esos metaboxes, guardar y esperar de nuevo. En un plan de hosting compartido, eso puede tomar 5-10 segundos por carga de pagina.
• La funcion de edicion masiva te permite cambiar algunos campos a la vez, pero esta enterrada en un dropdown, la UI es estrecha y se ahoga en selecciones grandes.
• Ninguna interfaz movil utilizable. Si necesitas actualizar stock desde tu telefono mientras estas en un almacen, buena suerte con el admin de WP en una pantalla pequena.
• Buscar y filtrar productos es basico. No puedes ordenar por estado de stock o encontrar rapidamente productos que faltan imagenes.
• Cada plugin que agregas para mejorar el admin agrega mas carga a una pagina ya pesada.

Que existe ya

Antes de construir algo personalizado, pase por las opciones existentes. Hay algunas categorias:

Plugins de WordPress para edicion masiva

Plugins como Smart Manager by StoreApps, WooCommerce Bulk Edit by iThemeland y YITH Bulk Product Editing agregan edicion estilo hoja de calculo dentro del admin de WordPress. Funcionan, y para actualizaciones simples de precio o stock pueden ser suficientes.

Las desventajas: todavia se ejecutan dentro de WordPress, asi que heredas toda la hinchazon. Agregan mas procesamiento PHP a paginas de admin ya pesadas. Algunos son gratuitos para funciones basicas pero bloquean cosas utiles (como ediciones programadas o gestion de variaciones) detras de niveles de pago. Y todavia no te dan una interfaz independiente y rapida.

Plataformas alojadas

Shopify, BigCommerce y plataformas similares tienen mejores dashboards de admin listos para usar. Pero si ya estas en WooCommerce, cambiar toda tu plataforma de comercio electronico no es una solucion rapida. Elegiste WooCommerce por una razon (flexibilidad, sin cuotas mensuales, ecosistema WordPress), y esas razones probablemente todavia aplican.

Paneles de admin personalizados

Unos pocos desarrolladores han construido frontends personalizados React o Vue que hablan a la API REST de WooCommerce. La mayoria estan abandonados o a medio terminar, y los que funcionan son propietarios. No pude encontrar una opcion open source mantenida que hiciera bien lo basico.

Eso es lo que me empujo a construir Woo Admin.

Que hace Woo Admin

Woo Admin es una app React independiente que se conecta a tu tienda WooCommerce a traves de la API REST. Se ejecuta en su propio contenedor Docker, completamente separado de WordPress, asi que tu tienda no se vuelve mas pesada.

El conjunto de funciones actual:

El stack tecnologico

El frontend es React 18 con TypeScript y Vite. Use Ant Design para los componentes UI porque tiene componentes solidos de tabla, formulario y diseno que no queria construir yo mismo. Encima de eso, use Refine (@refinedev/core + @refinedev/antd), que es un framework especificamente para paneles de admin. Te da patrones de proveedor de datos y hooks CRUD, asi que pase mi tiempo en logica especifica de WooCommerce en lugar de cablear paginacion y estado de formularios por centesima vez.

Para solicitudes HTTP use Axios. En produccion, la app compila a archivos estaticos servidos por Nginx, que tambien maneja el proxy inverso a la API de WooCommerce. Todo se envia como una imagen Docker con una construccion multi-etapa: Node compila el TypeScript, luego la salida se copia en una pequena imagen Nginx Alpine.

Como se conecta a WooCommerce

La app habla con la API REST de WooCommerce (v3) y la API REST de WordPress (para subidas de medios). Hay dos modos de conexion:

Modo proxy (recomendado)

En modo proxy, el frontend hace solicitudes a rutas relativas como /api/wc y /api/wp. El contenedor Nginx sentado frente a la app hace proxy de esas a tu sitio WooCommerce e inyecta encabezados de autenticacion.

Esta es la configuracion que recomiendo porque:

• Tus credenciales de API de WooCommerce nunca aparecen en solicitudes del navegador
• No necesitas configurar CORS en tu sitio WordPress
• Funciona detras de cualquier proxy inverso (Traefik, Caddy, otro Nginx)

Las rutas del proxy se ven asi:

/api/wc/*  →  https://tu-tienda.com/wp-json/wc/v3/*
/api/wp/*  →  https://tu-tienda.com/wp-json/wp/v2/*

Modo API directa

Si no quieres usar el proxy integrado, el frontend puede llamar a la API de WooCommerce directamente. Configura VITE_WC_API_BASE a la URL API completa de tu tienda y proporciona la clave y secreto del consumidor. Esto requiere que CORS este configurado apropiadamente en tu instalacion WordPress.

Estructura del proyecto

El codigo es pequeno y enfocado:

src/
├── components/
│   ├── ProductAttributesInput.tsx    # Selector de atributo global
│   ├── ProductCategoriesInput.tsx    # Selector de categoria jerarquico
│   ├── ProductImagesInput.tsx        # Gestor de imagenes subida + URL
│   ├── ProductVariationsManager.tsx  # CRUD de variaciones
│   └── ProductVariationsTable.tsx    # Visualizacion de variaciones
├── pages/products/
│   ├── list.tsx     # Listado de productos con vistas tabla/tarjeta
│   ├── create.tsx   # Formulario de nuevo producto
│   ├── edit.tsx     # Formulario de edicion con soporte de variaciones
│   └── show.tsx     # Vista de detalle del producto
├── providers/
│   └── wooDataProvider.ts   # Proveedor de datos Refine personalizado
├── App.tsx          # Enrutamiento y configuracion Refine
└── main.tsx         # Punto de entrada React

El proveedor de datos personalizado (wooDataProvider.ts) es donde vive la logica especifica de WooCommerce: normalizar payloads, formatear precios, limpiar objetos de imagen y mapear entre como Refine espera datos y como la API de WooCommerce realmente funciona.

Normalizacion de precios

Una cosa que me tropee al principio: WooCommerce es exigente con los formatos de precio en la API, y los usuarios escriben precios de todo tipo de formas. El proveedor de datos normaliza precios antes de enviarlos:

• Acepta tanto . como , como separadores decimales
• Elimina simbolos de moneda y espacios en blanco
• Redondea a dos lugares decimales
• Si alguien llena solo el precio de oferta, se promueve al precio regular (un error comun)

Como desplegarlo

Requisitos previos

Necesitas:

• Una tienda WooCommerce con la API REST habilitada
• Claves API de WooCommerce (ve a WooCommerce → Settings → Advanced → REST API)
• Docker y Docker Compose en tu servidor
• Opcionalmente, una contrasena de aplicacion WordPress para subidas de medios

Paso 1: Clonar el repositorio

git clone https://github.com/bitdoze/woo-admin.git
cd woo-admin

Paso 2: Crear tu archivo .env

VITE_WC_API_BASE=/api/wc
VITE_WC_URL=https://tu-tienda.com
VITE_WC_CONSUMER_KEY=ck_tu_clave_aqui
VITE_WC_CONSUMER_SECRET=cs_tu_secreto_aqui
VITE_WP_USERNAME=tu_usuario_wp
VITE_WP_APP_PASSWORD=tu_contrasena_aplicacion
ACCESS_PASS=elige_una_contrasena_fuerte

Paso 3: Crear la red Docker e iniciar el contenedor

docker network create web
docker compose up -d --build

Eso construye el frontend, lo empaqueta en un contenedor Nginx y empieza a servir. El script de punto de entrada genera la configuracion en tiempo de ejecucion y la configuracion de proxy Nginx automaticamente desde tus variables de entorno.

Paso 4: Configurar un proxy inverso

El contenedor expone el puerto 80 internamente. Ponlo detras de tu proxy inverso existente (Traefik, Caddy, Nginx) con terminacion SSL. Si estas ejecutando apps Docker con un panel, puedes revisar mi guia sobre desplegar apps Docker Compose con Dokploy.

Si tienes WordPress ejecutandose en Docker tambien, revisa mi guia de instalacion de WordPress con Docker para la configuracion completa.

Desarrollo local

Si quieres contribuir o personalizarlo para tu tienda:

npm ci
npm run dev

El servidor de desarrollo inicia en el puerto 3000. Crea un archivo .env con las credenciales de tu tienda y la app se conecta directamente a tu API de WooCommerce. Asegurate de que tu tienda tenga encabezados CORS configurados para localhost:3000, o usa modo proxy.

npm run build      # Construccion de produccion
npm run preview    # Previsualizar la construccion de produccion localmente

Como se ve el dashboard en la practica

La queja principal de mi cliente era “solo quiero ver mis productos y cambiar un precio sin esperar 10 segundos.” Asi que la lista de productos es lo primero que ves. En escritorio es una tabla ordenable con miniaturas de imagen, insignias de stock y botones de accion. En un telefono cambia a tarjetas, que era la parte que mi cliente realmente usa mas ya que revisan stock desde su almacen.

El formulario de edicion agrupa campos relacionados en lugar de dispersarlos a traves de metaboxes como hace WooCommerce. Precios estan cerca de la parte superior, luego stock, luego categorias y atributos, luego imagenes, luego variaciones. Cada seccion obtiene datos bajo demanda, asi que el formulario no se ahoga incluso con miles de productos en el catalogo.

Un detalle con el que estoy feliz: la asignacion de categorias muestra la ruta completa (como “Electronicos > Telefonos > Smartphones”) asi que inmediatamente sabes donde se ubica un producto. En el editor predeterminado de WooCommerce, las categorias anidadas son solo casillas de verificacion indentadas que se confunden pasado dos niveles.

Preguntas frecuentes

¿Esto reemplaza el admin de WordPress completamente?

No. Woo Admin se enfoca solo en gestion de productos. Todavia necesitas el admin de WordPress para pedidos, clientes, configuracion, envio, impuestos y todo lo demas que hace WooCommerce. Piensa en ello como una herramienta dedicada para la unica tarea que el admin predeterminado maneja mal.

¿Pueden multiples personas usar el dashboard al mismo tiempo?

Si. Cada sesion de usuario habla con la API de WooCommerce independientemente. No hay estado de sesion del lado del servidor. Solo ten en cuenta que si dos personas editan el mismo producto simultaneamente, el ultimo guardado gana.

¿Esto relentecera mi tienda WooCommerce?

No. El dashboard se ejecuta en su propio contenedor y solo habla con la API REST de WooCommerce. No agrega ningun codigo PHP, plugins o consultas de base de datos a tu tienda. Las llamadas a la API REST son las mismas que cualquier integracion externa haria.

¿Puedo ejecutar esto sin Docker?

Puedes construir los archivos estaticos con npm run build y servir la carpeta dist/ desde cualquier servidor web. Necesitaras configurar el proxy tu mismo (o usar modo API directa). Docker solo hace que el despliegue y la configuracion del proxy sean llave en mano.

¿Es seguro?

En modo proxy, las credenciales de API de WooCommerce se quedan en el servidor. Nunca llegan al navegador. La ACCESS_PASS opcional agrega HTTP Basic Auth al dashboard mismo, asi que personas aleatorias no pueden tropezar con el. Para produccion, siempre ejecutalo detras de HTTPS.

¿Que pasa con pedidos y clientes?

Todavia no. La version actual esta enfocada en productos. Gestion de pedidos y clientes podria venir despues, pero la prioridad fue resolver el punto de dolor de edicion de productos primero. Si quieres contribuir, el repositorio esta abierto.

Que sigue

El repositorio esta en github.com/bitdoze/woo-admin bajo licencia MIT. Lo estoy ejecutando en produccion para bigsales.ro y mi cliente dejo de quejarse sobre gestion de productos, lo que considero un exito. Seguire agregando funciones a medida que surjan necesidades reales en lugar de adivinar que podria querer la gente.

Si tu experiencia con el admin de WooCommerce es tan frustrante como la mia fue, clona el repositorio y pruebalo. Toma como cinco minutos ponerlo en funcionamiento con Docker. Issues y pull requests son bienvenidos.