Delivery Modal for WooCommerce
Guía integral y demostración interactiva para implementar el sistema definitivo de pedidos rápidos por WhatsApp y llamadas telefónicas en tiendas WooCommerce y páginas de WordPress.
¿Por qué usar Delivery Modal?
Diseñado meticulosamente para maximizar la tasa de conversión y eliminar la fricción en el proceso de compra.
Sin Fricción de Checkout
Permite a los usuarios ordenar en segundos sin tener que rellenar formularios extensos o crear cuentas obligatorias.
100% Vanilla JavaScript
Cero dependencias pesadas de jQuery en el frontend. Carga ultra veloz que protege tu puntuación en Google PageSpeed.
HPOS & Modo Catálogo
Compatible con el nuevo almacenamiento HPOS de WooCommerce y con plugins de Catálogo (como YITH Catalog Mode).
Instalación y Requisitos del Sistema
Comienza a recibir pedidos en tu sitio en menos de 3 minutos.
Requisitos Mínimos
Asegúrate de contar con WordPress 6.0 o superior y PHP 7.4 o superior (PHP 8.0, 8.1, 8.2 y 8.3 están totalmente soportados). WooCommerce es opcional si solo usas el plugin con shortcodes o la burbuja global.
Subir y Activar el Plugin
En tu panel de WordPress, dirígete a Plugins > Añadir nuevo > Subir plugin. Selecciona el archivo delivery-modal-for-woocommerce.zip y haz clic en Instalar ahora y posteriormente en Activar plugin.
Acceso a los Ajustes
Verás el nuevo menú Delivery Modal directamente en tu barra lateral de WordPress (o en la lista de plugins bajo el enlace Ajustes). ¡Listo para configurar!
Panel de Control White-Label
Haz clic en las pestañas a continuación para explorar cómo se administra el plugin en vivo sin datos privados de clientes.
Delivery Modal
Configura la mejor experiencia de pedidos por WhatsApp y llamadas para tus clientes.
📞 General y Contacto
⚡ Modo de Acción y Botones
🛍️ Integración con WooCommerce
💬 Mensaje Automático de WhatsApp
✍️ Textos del Modal (Personalización Total)
🎨 Estilos y Degradados de Botones
How would you like to place your order?
Choose an option below to reach us directly
💬 Burbuja Flotante Global
🧩 Shortcode Universal
Inserta los botones de pedido en cualquier lugar de tu web (Elementor, Divi, Gutenberg, Bricks, Blog o Landing Pages):
Si se inserta en una entrada o página general, tomará automáticamente el título y enlace actual para enviarlo a WhatsApp.
🎨 Personalización CSS Adicional
General y Tienda (WooCommerce)
Controla los canales de comunicación, el modo de acción y la integración con la ficha de producto de WooCommerce.
Ajustes Principales de Contacto
Número de WhatsApp: Debe incluir siempre el prefijo internacional sin espacios ni signos especiales adicionales (por ejemplo +573150000000 o +15551234567).
Teléfono de Respaldo: Es el número al que llamará el usuario cuando pulse el botón "LLAMA YÁ!" o el botón telefónico directo.
Modo de Acción: Puedes elegir entre desplegar la ventana emergente (*Popup Modal*) o mostrar los botones directos de WhatsApp y llamada sin popup.
Modal Design & Styling (Textos y Apariencia)
Personaliza cada texto, título, botón, color y logotipo con previsualización en vivo continua.
Personalización de Textos (Versión 1.0.2)
En esta sección cuentas con campos dedicados para editar cada texto del popup:
- Main Title: E.g. How would you like to place your order? or How do you prefer to order?
- Subtitle: If left empty, it automatically generates smart dynamic copy based on active buttons.
- WhatsApp Button Text: E.g. ORDER VIA WHATSAPP or ORDER NOW.
- Phone Button Text: E.g. CALL US NOW! or ORDER BY PHONE.
- Divider ("OR ALSO"): The separator label displayed between both action buttons.
- Trust Badges: The two footer micro-labels with shield (Safe order) and heart (Handcrafted with care) icons.
Acabado plano sin sombras: En la versión 1.0.2 se eliminaron las sombras pronunciadas de los botones para integrarse con elegancia en cualquier tema moderno.
Burbuja Flotante Global (WhatsApp)
Botón persistente en pantalla para resolver dudas y canalizar ventas directas en cualquier momento.
Ajustes y Posicionamiento Responsive
Posición en pantalla: Puedes ubicar la burbuja en la esquina Inferior Derecha (estándar) o Inferior Izquierda.
Desplazamientos independientes (PC vs Móviles): Permite ajustar la distancia inferior en píxeles. Por ejemplo, en móviles puedes configurar 85px o 90px para que la burbuja no tape la barra de navegación fija o el botón de carrito móvil de tu tema.
Tooltip descriptivo: Texto que flota al lado del botón invitando al usuario a iniciar la conversación.
Uso de Shortcodes con 1 Clic
Copia y pega estos ejemplos directamente en Elementor, Divi, WPBakery, Bricks o Gutenberg.
1. Shortcode Estándar (Automático)
Úsalo dentro de la plantilla de producto o en cualquier post. Detectará automáticamente el título y precio si existe.
2. Shortcode con Parámetros Personalizados
Ideal para páginas de aterrizaje (Landing pages) o cotizaciones de servicios específicos que no son productos de WooCommerce.
Variables del Mensaje de WhatsApp
Personaliza el mensaje automático que llega a tu teléfono cuando el cliente pulsa el botón.
| Etiqueta | Descripción | Ejemplo de salida |
|---|---|---|
{producto} |
Exact name of the WooCommerce product or page title. | Deluxe 24 Red Rose Bouquet |
{precio} |
Formatted price with currency symbol configured in WooCommerce. | $45.00 USD / €40.00 EUR |
{url} |
Direct link to the product page for instant order verification. | https://store.com/product/deluxe-bouquet/ |
{sku} |
Unique product inventory SKU code. | FL-2026-ROSAS |
{categoria} |
Primary product category assigned in the store. | Floral Arrangements |
Preguntas Frecuentes (FAQ)
Respuestas claras a las consultas más comunes al desplegar el plugin.
¿Funciona en sitios sin WooCommerce instalado?
Sí. Tanto la burbuja flotante global como el shortcode [wcdm_buttons] funcionan de forma autónoma en cualquier instalación estándar de WordPress sin necesidad de tener WooCommerce activado.
¿Por qué los botones no tienen sombras pronunciadas?
A partir de la versión 1.0.2 se adoptó una estética moderna y limpia (flat design) eliminando las sombras pesadas (box-shadow: none !important;), lo cual garantiza una integración visual armónica y profesional con cualquier tema de WordPress.
¿Es compatible con caché de páginas y plugins de optimización?
Totalmente. Al estar construido en JavaScript vainilla puro sin frameworks pesados, es 100% compatible con WP Rocket, LiteSpeed Cache, Cloudflare y las reglas de minificación estándar de WordPress.