Diseño, Botón de Pago y TextosEn el comercio electrónico contraentrega, cada campo innecesario en el formulario reduce la tasa de conversión entre un 4% y un 8%. Modal COD Form te permite controlar con precisión milimétrica qué campos se muestran, qué textos o placeholders tienen, cómo se ven los botones y qué banners de confianza acompañan la compra.
1. Gestión de Campos del Formulario (Mostrar, Ocultar y Personalizar)
En WooCommerce → Ajustes → Modal COD Form → Diseño (Design) encontrarás el selector múltiple Deshabilitar campos del formulario (cod_form_disable_form_fields) con estilo moderno de etiquetas (pills/chips). Puedes activar o desactivar cualquiera de los siguientes campos:
| Campo del Formulario | ID del Input en el DOM | Recomendación para Mayor Conversión en COD |
|---|---|---|
| Nombre (First Name) | #first_name |
Obligatorio. En la pestaña Textos puedes cambiar la etiqueta a «Nombre completo» si decides ocultar el campo Apellido. |
| Apellido (Last Name) | #last_name |
Opcional. Muchas tiendas de alta conversión lo deshabilitan para pedir «Nombre y Apellido» en un solo campo. |
| Teléfono / WhatsApp | #phone |
Obligatorio. En PRO puedes activar el prefijo internacional automático (ej. +57, +52, +593) mediante cod_form_phone_country_code_check, que ajusta dinámicamente el minlength y maxlength del campo. |
| Departamento / Provincia / Estado | #state |
Obligatorio para envíos. Dispara automáticamente la carga de ciudades y el cálculo de tarifas de envío por AJAX. |
| Ciudad / Municipio / Comuna | #city |
Obligatorio para envíos. Se despliega automáticamente en cascada al elegir el departamento. |
| Distrito (Perú PEV2 / Barrio) | #district |
Se muestra automáticamente en cascada cuando seleccionas el dataset de 3 niveles de Perú (PEV2: Departamento → Provincia → Distrito), guardándose en billing_district y shipping_district. |
| Dirección Exacta y Referencia | #address y #address_2 |
Usa el placeholder de #address para pedir calle/carrera y número, y #address_2 para «Barrio, Conjunto, Torre o Punto de referencia» (clave para evitar devoluciones). |
| Documento de Identidad (Cédula / DNI / RUT) | #document |
Exclusivo PRO. Se almacena en el metadato del pedido _billing_document y _shipping_document, y se envía en los Webhooks y a Dropi (indispensable en Colombia, Perú, Chile y Ecuador). |
| Código Postal (Postcode) | #postcode |
Desactívalo en países como Colombia o Ecuador donde no se usa; mantenlo activo en México, España o Chile. |
| Correo Electrónico (Email) | #email |
Requerido si utilizas la captura temprana de Carritos Abandonados. |
| Notas del Pedido y Casilla de Términos | #order_comments / #terms_checkbox |
Opcional. Permite añadir una casilla de aceptación de políticas de privacidad con enlace personalizable. |
2. Diseño Visual del Modal y Banners de Confianza
Dentro de la pestaña Diseño puedes configurar:
- Imagen Superior (
cod_form_image_url_top) e Imagen Inferior (cod_form_image_url_bottom): Tarjetas interactivas de carga multimedia (.cod-media-uploader-card) con vista previa instantánea para subir sellos de garantía, logos de transportadoras (Servientrega, Interrapidísimo, Coordinadora, Envia, Estafeta) o banners de «Pago 100% Seguro en Casa». - Color de Resalte (
cod_form_highlight_color): Define el color principal de bordes activos, encabezados de resumen y elementos destacados del modal. - Diseño Horizontal (
cod_form_horizontal_layout) y Ocultar Etiquetas (cod_form_disable_labels): Permite compactar la altura del formulario en pantallas móviles mostrando solo los iconos e input placeholders.
3. Personalización del Botón Disparador y Vista Previa en Tiempo Real
En la pestaña Botón de Pago (Payment Button) cuentas con un escenario de Vista Previa en Tiempo Real (#cod_live_preview_stage) que actualiza el botón al instante mientras mueves los selectores de color Iris o cambias los textos:
- Texto y Subtítulo del Botón: Por ejemplo: «¡PÍDELO AHORA Y PAGA EN CASA!» con subtítulo «Envío rápido a todo el país».
- Animaciones de Atención (
cod_form_button_animation): Elige entrenone,shake(vibración),bounce(rebote) opulse(latido) para captar la atención del comprador. - Botón Flotante Móvil (
cod_form_button_sticky = 'yes'): Fija automáticamente el botón en la barra inferior del teléfono mientras el usuario hace scroll leyendo la página de ventas.
Siguientes Pasos
- 📑 Descubre cómo configurar el botón secundario en Flujo de Checkout y Botón Secundario con Descuento.
- 🧩 Inserta botones personalizados en cualquier página con Shortcodes [custom_add_to_cart_button] y sus 12 Atributos.