4.3WooCommerce Builder: tienda y ficha de producto
Lo esencial en 30 segundos
- WooCommerce es la extensión de comercio electrónico de referencia para WordPress (el motor de la tienda).
- El WooCommerce Builder (Pro) diseña visualmente las páginas de tienda y de ficha de producto.
- El recorrido de compra (tienda → producto → carrito → pago) debe ser claro y fluido.
Hilo conductor — Nadia abre una tienda
El carpintero quiere vender algunos productos en línea (muebles pequeños, accesorios). Nadia instala WooCommerce (el motor de comercio electrónico), luego usa el WooCommerce Builder de Pro para cuidar la página de tienda (rejilla de productos) y la ficha de producto (imágenes, precio, botón "Añadir al carrito"). Vela por un recorrido de compra sin fricción.
Continúa 4.2 — del contenido al comercio.
1. WooCommerce y el Builder
WooCommerce es la extensión de comercio electrónico de referencia para WordPress (gratuita): es el motor de la tienda (productos, carrito, pedidos, pago). El WooCommerce Builder de Elementor Pro permite diseñar visualmente las páginas de la tienda: la página de producto (single product) y las páginas de lista (tienda, categorías), a menudo mediante el Loop Builder (4.2).
Nadia personaliza la ficha de producto (galería de imágenes, título, precio, descripción, botón "Añadir al carrito") y la rejilla de la tienda, con la identidad del carpintero.
2. El recorrido de compra
El reto: un recorrido de compra claro — de la tienda al producto, al carrito, al pago (checkout). Cada etapa debe ser legible y sin fricción: precio visible, botón de añadir evidente, carrito y pago tranquilizadores.
Nadia mantiene el recorrido simple: pocas etapas, información clara (envío, pago), y prueba una compra de extremo a extremo antes de entregar.
🔎 Ejemplo concreto — Tienda del carpintero (caso Nadia)
WooCommerce instalado (motor: productos, carrito, pago).
WooCommerce Builder:
- Ficha de producto: galería + título + precio + "Añadir al carrito".
- Tienda: rejilla de productos (Loop) con la identidad del sitio.
Recorrido probado: tienda → producto → carrito → pago.Resultado: una tienda cuidada y coherente.
Lección: un recorrido claro, probado de extremo a extremo.
Vocabulario de la sección
- WooCommerce
- La extensión de comercio electrónico de referencia para WordPress: el motor de la tienda.
Ejemplo sencillo: gestiona productos, carrito, pedidos, pago.
Lo que no es: creer que Elementor hace el comercio solo.
Reflejo: WooCommerce = motor de comercio; Elementor = diseño.
- WooCommerce Builder (Pro)
- La herramienta de Elementor Pro para diseñar visualmente las páginas de tienda y de producto.
Ejemplo sencillo: personalizar la ficha de producto.
Lo que no es: confundirlo con WooCommerce (el motor).
Reflejo: diseñar las páginas de comercio → WooCommerce Builder.
- Página de producto (single)
- La plantilla de una ficha de producto (imágenes, título, precio, descripción, botón de añadir).
Ejemplo sencillo: ficha de un mueble pequeño con galería y precio.
Lo que no es: una ficha de producto confusa, precio oculto.
Reflejo: precio visible + botón de añadir evidente.
- Tienda / categorías
- Las páginas que listan los productos (rejillas), a menudo mediante el Loop Builder.
Ejemplo sencillo: rejilla de productos de la tienda.
Lo que no es: una lista de productos en bruto, sin cuidar.
Reflejo: lista de productos → Loop Builder.
- Recorrido de compra
- De la tienda al producto, al carrito, al pago: claro y sin fricción.
Ejemplo sencillo: pocas etapas, info clara, pago tranquilizador.
Lo que no es: un embudo de compra confuso que hace abandonar.
Reflejo: probar la compra de extremo a extremo antes de entregar.
En la práctica — Personalizar una tienda
- Instala WooCommerce (el motor de comercio) y añade un producto de prueba.
- Con el WooCommerce Builder, diseña la ficha de producto (galería, precio, botón de añadir).
- Diseña la página de tienda en rejilla (Loop) con la identidad del sitio.
- Prueba el recorrido completo: tienda → producto → carrito → pago.
Guion listo para decir — presentar la tienda al cliente (20 s)
"Su tienda en línea está lista: una rejilla clara de sus productos, una ficha detallada con fotos, precio y botón de compra, luego un carrito y un pago tranquilizadores. He probado una compra de extremo a extremo para asegurar que sus clientes puedan pedir sin ninguna dificultad."
Insistir en el recorrido probado de extremo a extremo.
Plantilla para copiar y pegar — comprobación de tienda
WOOCOMMERCE INSTALADO (motor): sí / no
FICHA DE PRODUCTO: galería ___ precio visible ___ botón de añadir ___
TIENDA: rejilla de productos (Loop) con la identidad: sí / no
RECORRIDO PROBADO (tienda→producto→carrito→pago): sí / no
INFO CLAVE (envío, pago) clara: sí / noTienda pequeña
Unos productos: ficha cuidada, recorrido ultra-simple.
Categorías
Varias familias de productos: rejillas por categoría (Loop).
Móvil
Compra probada en móvil: botón de añadir y pago fáciles con el dedo.
Confianza
Mostrar claramente envío, plazos y medios de pago.
✓ Buenas prácticas
- Distinguir WooCommerce (motor) y el Builder (diseño).
- Hacer evidentes el precio y el botón de añadir.
- Probar la compra de extremo a extremo, también en móvil.
✗ Errores frecuentes
- Confundir WooCommerce y el WooCommerce Builder.
- Un recorrido de compra confuso (abandono).
- Entregar sin probar una compra real.
Puntos clave
- WooCommerce = motor de comercio (gratuito).
- WooCommerce Builder (Pro) = diseño de las páginas.
- Ficha de producto clara (galería, precio, añadir).
- Recorrido de compra simple, probado de extremo a extremo.
Reto 48h — aplica mañana
Instala WooCommerce, añade un producto de prueba, diseña una ficha de producto con el Builder, luego prueba el recorrido tienda → producto → carrito → pago, incluido en móvil. 30 minutos.
- Distingo WooCommerce y el Builder.
- Diseño una ficha de producto clara.
- Pruebo el recorrido de compra completo.
Preguntas frecuentes
¿WooCommerce es de pago?
No: WooCommerce es una extensión gratuita (el motor de comercio). El WooCommerce Builder, que sirve para diseñar las páginas, forma parte de Elementor Pro.
¿Qué se puede personalizar?
La ficha de producto (galería, título, precio, descripción, botón de añadir) y las páginas de lista (tienda, categorías), con la identidad del sitio, a menudo mediante el Loop Builder.
¿Hay que probar la compra?
Sí, imprescindiblemente: prueba el recorrido completo (tienda → producto → carrito → pago), incluido en móvil, antes de entregar. Un embudo confuso hace abandonar.
Nadia quiere diseñar la ficha de producto del carpintero. ¿Cuál es el buen marco mental?