Desarrollo de (Plugin) Personalizado con Elementor con Integración WooCommerce y Dokan para Checkout (Responsive)

Estamos buscando un desarrollador freelance altamente cualificado y con experiencia comprobada en WordPress, Elementor y WooCommerce para crear un proceso de checkout altamente personalizado y dinámico, replicando fielmente el diseño y las funcionalidades visualizadas en las imágenes adjuntas. El objetivo principal es ofrecer una experiencia de usuario fluida, optimizada y transparente para el pago, integrando diversas opciones de contacto, información domiciliaria y métodos de pago con lógica interactiva.

Es un requisito indispensable que el freelancer seleccionado firme un Acuerdo de Confidencialidad y Cesión de Propiedad Intelectual para la protección de la información y la propiedad del proyecto.

Requerimientos clave detallados:

Diseño y Maquetación con Elementor:

Replicar fielmente el diseño y la estructura del checkout mostrado en las imágenes, utilizando Elementor para la maquetación de la interfaz de usuario.

Se valorará el uso de Elementor Pro y sus funcionalidades avanzadas para lograr la interactividad y los popups.

Integración Robusta con WooCommerce:

El checkout debe estar completamente integrado con WooCommerce, asegurando que todos los datos de contacto, dirección y métodos de pago se sincronicen correctamente con los pedidos de WooCommerce.

Funcionalidad de Contacto y Domicilio (Ver Imágenes):

Información de Contacto: Implementar dos campos: "Correo electrónico" y "Número de WhatsApp".

Pueden colocarse uno al lado del otro o uno debajo del otro, según el diseño de la imagen.

Deben incluir un contador de caracteres visible, como se muestra.

Inicialmente, si el cliente no está registrado, el botón "Editar" no debe aparecer.

Después de que el usuario ingrese el correo y haga clic en "Guardar", el botón debe ponerse en verde con un visto si es exitoso, y luego aparecer el botón "Editar".

Para clientes no registrados, el tab "Información de contacto" debe mostrar un botón "Iniciar Sesión". Este botón debe ocultarse si el usuario ya ha iniciado sesión.

Debe haber una opción en la parte inferior para que el usuario decida si desea recibir publicidad por correo.

Información Domiciliaria: Los campos deben diseñarse igual a la imagen.

País de Origen: Con su respectiva bandera.

Selector de Ciudad: Debe permanecer desactivado hasta que se seleccione el país. Las ciudades deben corresponder al país seleccionado.

Código Postal: El usuario puede ingresarlo manualmente o hacer clic en un botón que redirija a https://www.codigopostal.gob.ec/.

Debe haber una opción en el plugin para cambiar esta URL en el futuro.

Antes de la redirección, debe aparecer un popup de aviso: "Está saliendo de EcuxPres, se le redireccionará a una página para localizar su código postal, cuando lo tenga regrese a EcuxPres y escriba su código postal."

Múltiples Métodos de Pago con Lógica Dinámica (Ver Imágenes):

"Paga exprés" (PayPhone, PayPal, G Pay):

Por defecto, estas opciones tendrán un recargo del 7%. Este valor se debe sumar en el resumen de valores como "Pago exprés +7%".

El plugin debe permitir manejar por separado el recargo/descuento para cada uno de estos tres métodos.

"Transferencia bancaria" (Banco Pichincha, Produbanco, Banco Bolivariano, Banco del Pacífico):

Por defecto, al seleccionar estos métodos, se aplicará un descuento del 7% (el mismo valor del recargo de "Pago exprés"). En el resumen final, debe aparecer como "Descuento 7%".

El plugin debe permitir configurar por separado el descuento (en % o valor fijo) o envío gratis para cada banco.

Interfaz de Transferencia Bancaria (Ver Imagen 8.jpg):

Al seleccionar un banco, debe aparecer su logo y el número de cuenta correspondiente.

El plugin debe permitir configurar el título ("N.º Cuenta") y el número de cuenta.

Debe haber un botón al lado del número de cuenta para copiarlo, mostrando un aviso de confirmación al usuario.

Un DIV inferior con "Información importante" (título y contenido editable desde el plugin).

Campo "Número de Orden" (opcional, si WooCommerce lo genera).

Botón para subir comprobante de pago (PNG o JPG), con un aviso importante.

Botón "Validar Pago" para enviar la orden a revisión.

"Otras formas de pago":

Binance Pay (Ver Imagen 7.jpg):

Debe estar listo para integrar la API.

Al seleccionar, se debe añadir un valor adicional del 2% (o el valor de la comisión de Binance) en el resumen.

Mostrar una guía simple y un botón "Realizar pago". La descripción e imagen deben ser editables desde el plugin o Elementor.

PeiGo (Ver Imagen 6.jpg) y Deuna! (Ver Imagen 5.jpg):

Ambos se manejan por QR. Debe haber una opción en el plugin para subir la imagen del QR.

Al seleccionar, debe aparecer el QR con el valor a pagar y un campo para subir el comprobante de pago.

El proceso debe ser similar al pago por transferencia bancaria de WooCommerce, esperando confirmación por correo.

Para PeiGo y Deuna!, la comisión adicional es 0%, es decir, se aplica un descuento del 7% como en los otros métodos.

Para Deuna!, la validación del pago es con la CÉDULA.

Al hacer clic en "Validar Pago", la orden de compra debe permanecer pendiente hasta la validación.

La descripción, título y demás deben ser editables desde el plugin.

Pago Contra Entrega (Ver Imagen 4.jpg):

Puede ser la opción estándar de WooCommerce, pero en el campo de método de pago debe aparecer un aviso con instrucciones de funcionamiento.

Esta opción solo debe estar habilitada para clientes que hayan realizado al menos 1 compra y la hayan recibido exitosamente. En caso contrario, debe mostrar un aviso explicando el motivo.

El plugin debe permitir decidir si se ofrece envío gratis o un descuento en % como regalo para esta opción.

Cálculo Interactivo de Valor Adicional y Descuento:

Los campos de "Valor adicional" y "Calcular descuento" deben ser interactivos y actualizarse dinámicamente según el método de pago seleccionado por el usuario.

Por defecto, al inicio, debe aparecer el descuento mayor si alguna opción lo tiene, para que el cliente vea el beneficio.

Se proporcionarán más detalles sobre las reglas de cálculo específicas una vez que el freelancer sea contratado.

Funcionalidades Adicionales (Ver Imágenes):

Campo para "Nombre del producto que el cliente compra" (ej: Intensive).

Campo para "Código de descuento" con botón "Aplicar".

Visualización de "Subtotal", "Envío" y "Total a pagar".

Confirmación de Pago Visual:

Al hacer clic en "Pagar":

Si el pago es exitoso: Pantalla verde con un ícono de visto (similar a Mercado Libre).

Si el pago es rechazado: Pantalla roja con un mensaje indicando el error.

Ambas pantallas deben ser responsivas para todos los dispositivos.

Guías de Ejemplo (Popups):

En cada una de las secciones del TAB y en el DIV de la parte derecha que contiene la forma de pago, debe haber un botón "Guía de Ejemplo" (Ver Imagen 8.jpg).

Al hacer clic, se debe expandir un popup con un widget de párrafo que permita agregar títulos, descripción e imágenes para explicar al cliente cómo funciona esa área.

Si es posible integrarlo con el área de popup de Elementor para mayor facilidad, mucho mejor.

Desarrollo de Plugin (Preferible):

Para garantizar la modularidad, escalabilidad y una integración robusta con Elementor y WooCommerce, se requiere la creación de un plugin personalizado de WordPress.

Este plugin debería encapsular la lógica del checkout y las integraciones, permitiendo una fácil gestión y futuras actualizaciones de todas las opciones dinámicas (valores de descuento/recargo, URLs, textos informativos, números de cuenta, QRs, etc.).

Optimización y Rendimiento:

El código debe ser limpio, bien comentado y optimizado para un rendimiento rápido y sin errores.

Diseño Responsivo:

La interfaz del checkout debe ser completamente responsiva y adaptable a diferentes dispositivos (móvil, tablet, escritorio).

Entregables:

Proceso de checkout completamente funcional y diseñado con Elementor.

Plugin de WordPress personalizado con toda la lógica de integración y configuraciones.

Documentación clara del código y del proceso de implementación.

Por favor, envíanos tu propuesta detallando tu experiencia en proyectos similares, tu enfoque para este desarrollo y un estimado de tiempo y costo.

NOTA: Si tienen conocimiento en DOKAN se le considerará para otros trabajos adicionales a este.