WooCommerce → Ajustes → Modal COD Form → ShortcodesPara tiendas que diseñan embudos de venta y Landing Pages con Elementor, Divi, Bricks o el editor de bloques Gutenberg, Modal COD Form incluye un motor de shortcodes multi-instancia con aislamiento determinista de CSS y un Generador Visual Interactivo en el panel de administración.
1. El Shortcode Principal: [custom_add_to_cart_button]
Permite insertar el botón disparador del formulario contraentrega para cualquier producto (simple o variable) en cualquier lugar de tu sitio web. Además, en la edición Free también puedes usar sus alias equivalentes [modalcodf_custom_add_to_cart_button] y [modalcodf_add_to_cart_button].
Ejemplo Básico (Usa los estilos globales del panel)
[custom_add_to_cart_button id="123"]Ejemplo Avanzado Personalizado por Instancia
[custom_add_to_cart_button id="123" text="¡PÍDELO HOY Y PAGA EN CASA!" subtitle="Envío Gratis + Garantía de 30 Días" bg_color="#ea580c" text_color="#ffffff" text_size="1.2" width="full" border_radius="12" border_width="2" border_color="#9a3412" box_shadow="0.8" animation="pulse" sticky="yes"]2. Tabla de Referencia de los 13 Atributos Soportados
| Atributo | Alias Soportado | Tipo / Rango | Descripción y Efecto en el Botón |
|---|---|---|---|
id |
— | Entero (Obligatorio) | ID del producto de WooCommerce que se cargará en el modal al hacer clic. |
text |
button_text |
Texto | Sobrescribe el texto principal del botón únicamente para esta instancia. |
subtitle |
button_subtitle |
Texto | Sobrescribe el subtítulo inferior. Si pasas subtitle="" (vacío), oculta el subtítulo en este botón aunque exista uno global. |
bg_color |
background_color |
Color HEX (ej. #10b981) |
Color de fondo del botón (asigna la variable CSS --cod-btn-bg). |
text_color |
— | Color HEX (ej. #ffffff) |
Color del texto y del icono SVG del carrito (--cod-btn-color). |
text_size |
— | Decimal en rem (0.5 a 3.0) |
Tamaño de la fuente del botón en unidades rem (--cod-btn-fs). |
width |
button_width |
normal | full |
normal ajusta el ancho al contenido (auto); full expande el botón al 100% de su contenedor. |
border_radius |
— | Entero en px (0 a 100) |
Redondeo de las esquinas del botón en píxeles (--cod-btn-radius). |
border_width |
— | Entero en px (0 a 15) |
Grosor del borde del botón en píxeles (--cod-btn-bw). |
border_color |
— | Color HEX | Color del borde del botón (--cod-btn-bc). |
box_shadow |
— | Decimal en rem (0 a 2.0) |
Intensidad de la sombra exterior (--cod-btn-shadow). |
animation |
button_animation |
none | shake | bounce | pulse |
Aplica una animación continua para atraer la mirada hacia el llamado a la acción. |
sticky |
button_sticky |
yes | no |
Si es yes, fija el contenedor del botón en la parte inferior de la pantalla en dispositivos móviles (.cod_sticky). |
3. ¿Puedo poner varios shortcodes con diferentes colores o productos en la misma página?
Sí, sin ningún conflicto. Cuando pasas atributos de estilo a un shortcode, el motor interno (prcod_build_shortcode_button_instance_css()) calcula un hash único y genera una clase determinista .prcod-sc-btn-{hash} inyectada mediante wp_add_inline_style() (sin ensuciar el HTML con atributos style="" en línea). Además, el estado cod_continue_order está aislado por botón para que cada botón en una misma landing page opere de forma independiente.
4. Cómo usar el Generador Interactivo de Shortcodes en el Panel
No necesitas memorizar ningún atributo:
- Ve a WooCommerce → Ajustes → Modal COD Form → Shortcodes.
- Busca y selecciona tu producto en el desplegable del catálogo (el ID se completará solo).
- Ajusta colores, bordes, animaciones y ancho viendo el resultado en el panel Live Preview (Real-Time) de la derecha.
- Elige entre modo Compacto (solo incluye en el shortcode los atributos que cambiaste respecto al estilo global) o Completo, y pulsa el botón Copiar Shortcode.
5. El Shortcode de Carrito en el Menú: [cod_menu_cart]
Si deseas colocar un icono de carrito o bolsa de compras en tu cabecera (Header de Elementor o menú principal) que al pulsarlo abra directamente el formulario modal COD con los productos actuales:
[cod_menu_cart color="#055875"]Puedes personalizar el tipo de icono (cart o bag), el color por defecto y el ancho máximo en píxeles desde la pestaña Icono del Carrito (Menu Icon).
Recursos Relacionados
- 🎨 Descarga plantillas listas para importar en Elementor: Plantillas de Producto para Elementor.
- 📈 Siguiente módulo: Cómo Crear Ofertas por Cantidad (2x y 3x) en Modal COD Form PRO.