Elementor y uso dinámico
El plugin fue diseñado pensando en su uso junto con Elementor Pro, aprovechando tanto los widgets de contenido como las etiquetas dinámicas para mostrar datos personalizados de los productos.
Esta integración permite que los administradores puedan diseñar páginas de producto ricas y adaptadas sin necesidad de escribir código, utilizando los campos que el plugin proporciona.
Campos personalizados en Elementor
Una vez definidos los campos mediante post_meta, Elementor Pro permite acceder a ellos mediante etiquetas dinámicas:
- Añade un widget de texto, encabezado, botón, etc.
- Haz clic en el icono de etiqueta dinámica (⚙️).
- Selecciona Campo personalizado (ACF / Post meta).
- Introduce el nombre exacto del campo (por ejemplo:
codigo_producto).
Esto mostrará el contenido correspondiente al producto actual.
Uso con shortcodes
En campos donde no puedes usar directamente etiquetas dinámicas (como enlaces o condiciones), puedes insertar un shortcode personalizado del plugin, como:
[mostrar_codigo_producto]
O para obtener una URL dinámica:
[url_ficha_pdf]
Esto es útil en widgets como:
- Botones (campo de enlace)
- Iconos con acción
- Campos HTML
Mostrar/ocultar elementos condicionalmente
Puedes ocultar un botón u otro elemento visual si no hay contenido dinámico, usando CSS. Por ejemplo:
#boton-ficha:not([href]) {
display: none;
}
Esto oculta el botón si el atributo href está vacío (porque no hay PDF asignado al producto).
Integración con estilos y clases
También puedes utilizar clases CSS o IDs únicos para aplicar estilos personalizados o condicionar comportamiento JavaScript, como copiar al portapapeles, cambiar color tras la acción, o mostrar un mensaje flotante con "Copiado".
Ejemplo:
<span class="codigo-copiable">123456</span>
<i id="boton-copiado" class="boton-copiar eicon-copy"></i>