Cómo Personalizar WooCommerce con Elementor y ACF
Si buscas personalizar WooCommerce con Elementor para diferenciarte de la competencia, has llegado al lugar correcto. Si usas WooCommerce, conoces el problema: la plantilla de producto por defecto es aburrida. Imagen a la izquierda, título a la derecha, precio abajo. Fin.
Muchos desarrolladores te dirán que para agregar información extra (como un video de YouTube específico, un PDF de especificaciones o un catálogo de texturas) necesitas programar en PHP. Falso.
Hoy en Metrik Path te enseñaremos a crear un sistema de diseño dinámico utilizando tres herramientas potentes: WordPress + Elementor Pro + ACF (Advanced Custom Fields). Vamos a convertir una ficha simple en una experiencia de usuario de alto nivel.
¿Qué necesitamos?
WordPress instalado.
WooCommerce activo con productos cargados.
Elementor Pro (Necesario para el Theme Builder).
Advanced Custom Fields (ACF) (La versión gratuita sirve, la Pro es mejor para galerías).
Paso 1: Crear los «Datos Extra» con ACF
Imagina que vendes muebles. La descripción estándar de WooCommerce se queda corta. Quieres agregar un campo para «Material» y otro para «Instrucciones de Cuidado».
Ve a ACF > Grupos de Campos y crea uno nuevo llamado «Detalles de Producto».
Añade un campo tipo Texto o Select y llámalo «Material del Mueble».
Añade un campo tipo Área de Texto y llámalo «Instrucciones de Cuidado».
Reglas de ubicación: Mostrar este grupo de campos si el Tipo de contenido es igual a Producto.
Guarda los cambios.
Ahora, si entras a editar cualquier producto en WooCommerce, verás estos nuevos campos vacíos esperando tu información. ¡Llénalos en un producto de prueba!
Paso 2: Diseñar la Plantilla Maestra en Elementor
Aquí ocurre la magia. No vamos a diseñar un producto, vamos a diseñar LA plantilla que usarán todos.
Ve a Plantillas > Theme Builder.
Añade una nueva plantilla para Single Product (Producto Individual).
Elementor te ofrecerá bloques prehechos, pero ciérralos. Vamos a construir desde cero.
Arrastra los widgets obligatorios: WooCommerce Title, WooCommerce Price, Add to Cart, Product Images.
Paso 3: Conectar los Cables (Datos Dinámicos)
Aquí es donde Metrik Path marca la diferencia. Vamos a hacer que aparezcan los datos que creamos en el Paso 1.
Arrastra un widget de Encabezado o Editor de Texto donde quieras mostrar el material.
En lugar de escribir «Madera», busca el icono de Etiquetas Dinámicas (Dynamic Tags) (es un cilindro pequeño apilado).
Selecciona ACF Field.
Haz clic en la llave inglesa 🔧 que aparece y selecciona la clave: «Material del Mueble».
¡Listo! Elementor ahora «chupará» la información de ese campo automáticamente para cada producto.
Paso 4: Condiciones de Visualización
Al darle a «Publicar» en Elementor, te preguntará: ¿Dónde quieres mostrar esto? Selecciona: Incluir > Todos los productos.
Conclusión
Acabas de crear un sistema escalable. Si mañana quieres cambiar el diseño de 500 productos, solo editas la plantilla de Elementor una vez y se aplica a todos. Eso es optimización web inteligente.
¿Te atascaste en algún paso o tus datos no se muestran en el frontend? En Metrik Path somos expertos solucionando conflictos entre datos y diseño. Contáctanos para una auditoría de tu sitio.
