Cómo configurar una página de pago de WooCommerce con Divi

Publicado: 2022-08-28

La etapa más importante en un viaje de compras en línea es la finalización de una compra. No importa cuánto tiempo pase un usuario navegando por su tienda en línea, si no se traduce en venta, entonces no es relevante.

Es crucial hacer que el proceso de pago sea lo más sencillo posible para sus clientes. Entonces, ¿cómo crea una página de pago fácil de usar en su tienda WooCommerce? En esta publicación, veremos cómo configurar una página de pago personalizada de WooCommerce con Divi.

¿Por qué necesita una página de pago personalizada de WooCommerce?

Ningún cliente tiene que lidiar con un engorroso proceso de pago. La verdad es que sus clientes no se quedarían si su página y proceso de pago son estresantes. Si actualmente experimenta carritos abandonados en su sitio de comercio electrónico, puede ser una buena idea revisar su página de pago.

Debe brindar a sus clientes un efecto “wow” desde el comienzo de su experiencia de compra hasta la etapa final. Si elige la página de pago tradicional de WooCommerce, no logrará este efecto.

Debe crear un proceso de pago único, fluido y fácil de usar para brindar una experiencia de compra fluida a sus clientes. Algunas de las ventajas de crear una página de pago personalizada son las siguientes:

• Reducción en Abandono de Carritos

Las oportunidades de venta perdidas a menudo son causadas por el abandono del carrito. Es una situación en la que los clientes ya colocan artículos en su carrito, pero en algún momento abandonan el sitio sin completar la compra. Una página de pago complicada a menudo resulta en el abandono del carrito.

Si su cliente tiene que pasar por un proceso largo o siente que el proceso no es seguro, es probable que pierda interés en completar la transacción. Con una página de pago personalizada, existe una alta probabilidad de que sus clientes encuentren el proceso más fácil y seguro.

• Transacciones rápidas y fáciles

Su embudo de ventas debe ser lo más corto y rápido de completar posible. Cuando configura y personaliza su página de pago de WooCommerce, elimina fácilmente la carga innecesaria y se enfoca solo en los detalles importantes en el proceso de transacción.

Al tener un proceso de pago con varias páginas para completar, es probable que los clientes se cansen y abandonen su sitio. Sin embargo, cuando se agiliza todo el proceso, puede ayudar a sus clientes a completar el proceso de compra de forma más rápida y sencilla.

Cómo configurar una página de pago personalizada de WooCommerce

Su página de WooCommerce viene con una página de pago predeterminada. Puede editar esto con un complemento de terceros o un código abreviado. Si es un usuario nuevo, puede que le resulte difícil editar su página de pago usando estas opciones. Aquí es donde entra en juego el uso de un complemento como Divi Builder.

Divi Builder tiene un módulo Divi Shop que le permite crear una impresionante tienda en línea con una página de pago personalizada. En esta sección, veremos la guía paso a paso para configurar su página de pago personalizada de WooCommerce.

Antes de eso, es crucial comprender la importancia de los certificados SSL, la protección de datos y la seguridad en su sitio. Necesita un certificado SSL para una capa adicional de seguridad para cifrar los datos almacenados en su plataforma.

Un certificado SSL muestra a sus clientes que su sitio es seguro para proporcionar detalles de tarjetas de crédito. Ahora que hemos aclarado esta parte, profundicemos en los detalles de la creación de una página de pago personalizada de WooCommerce.

Paso uno: configure su página de pago en la configuración del complemento WooCommerce antes de usar el complemento Divi Builder. Para hacer esto, vaya a su panel de control de WooCommerce y haga clic en "Configuración".

A continuación, haga clic en la pestaña "Avanzado" y busque la página de pago. Seleccione la opción "Pagar" del menú desplegable y desplácese hasta el final de la página para hacer clic en el botón "Guardar" para guardar los cambios.

tablero

Paso dos: con la página de pago ya configurada, el siguiente paso es instalar el complemento Divi Shop Builder. Entonces, navegue al sitio web oficial de Elegant Theme para comprar el complemento Divi Shop Builder. Haga clic en el enlace de descarga de su "Página de mi cuenta" para descargar.

constructor de tienda divi

Después de la descarga, instale y active el complemento. el complemento aparecerá en el menú Divi después de completar la instalación. Antes de continuar, asegúrese de autenticar el complemento para su compra.

Para hacer esto, vaya a "Mi página de cuenta" en el sitio web de Elegant Theme para copiar la clave de licencia. Cuando haya autenticado el complemento, puede comenzar a usarlo. Divi Shop Builder funciona en el complemento Divi Builder, lo que hace que construir su tienda WooCommerce sea una tarea muy sencilla.

Paso tres: el siguiente paso es crear su página de pago personalizada de WooCommerce. Para hacer esto, haga clic para abrir la página de pago y habilite el Divi Builder comprado. A continuación, abra el complemento Divi Builder y comience a agregar módulos.

módulo

Encontrará cinco nuevos módulos (facturación de pago, cupón de pago, pedido de pago, envío de pago y avisos de carrito/pago) agregados a Divi Builder. Estos módulos lo ayudarán a configurar su página de pago personalizada en su tienda WooCommerce. Así es como funcionan estos módulos.

Checkout Billing: Esto permite personalizar todos los campos de entrada del formulario donde los clientes pueden ingresar sus detalles de facturación. Puede editar las etiquetas de los campos según corresponda.

ordenar

Envío de pago: esto permite a sus clientes especificar una dirección secundaria. Al igual que la facturación de Checkout, también puede editar los campos del formulario según corresponda.

Envío

Cupón de pago: esto permite a sus clientes ingresar un código de promoción único que se les ha asignado para reclamar un descuento especial. Debe colocar el módulo Cupón de pago separado de otros módulos para que funcionen. Si tiene limitaciones de espacio, reduzca el espacio entre las filas y las secciones para crear más espacio.

cupón

Checkout Order: Aquí es donde tu cliente establece y confirma el pedido antes de proceder a la opción de pago. También puede editar esta parte según corresponda usando la función de arrastrar y soltar.

orden de pago

Aviso de pago: si desea agregar una nota a otras páginas de pago, puede usar este módulo. Puede ser tan elaborado o simple en su diseño como desee.

aviso de pago

Al usar los módulos de Checkout, debe asegurarse de que no estén en las mismas secciones que otros módulos de formulario. Si los coloca juntos, no funcionarían. Debe colocar el módulo de formulario de contacto, el módulo de formulario de suscripción, el módulo de comentarios y el módulo de inicio de sesión en secciones separadas al crear la página de pago para que funcionen correctamente.

Al igual que otros módulos dentro del tema Divi, puede personalizar el estilo de sus módulos de pago con Divi Builder. Para hacer esto, siga los pasos a continuación:

• Haga clic para abrir los módulos de Checkout

• Haga clic en la pestaña "Diseño"

• Use los diferentes elementos para darle estilo a su página de una manera que coincida con su diseño e identidad de marca

• También puede agregar más personalización a través de la pestaña Avanzado. En la pestaña Avanzado, puede configurar los efectos de desplazamiento, las transiciones, el posicionamiento y la configuración de visibilidad para un dispositivo. También puede agregar ID y clases personalizados para secuencias de comandos CSS avanzadas.

Conclusión

Divi elimina el estrés de configurar una página de pago de WooCommerce. Le permite editar su página de pago actual y también crear una página de carrito personalizada. El complemento divi viene con numerosas características para hacer que su tienda sea tan atractiva para los clientes como pueda imaginar. También hace que las compras y el proceso de pago sean muy fluidos.

¿Puedo usar Divi con WooCommerce?

Sí tu puedes. Divi está diseñado para ser compatible con WooCommerce. Cuando haya habilitado WooCommerce en su Divi Page Builder, verá una nueva sección de "Producto" y WooCommerce agregada a su panel de WordPress. Desde aquí, puede editar su configuración de comercio electrónico, crear una página de producto de WooCommerce personalizada y publicar nuevos productos.

¿Divi Theme es bueno para mi sitio de comercio electrónico?

Sí, Divi es versátil y perfecto para sitios web de comercio electrónico. Se integra fácilmente con WooCommerce y otros sitios de comercio electrónico. Ayuda a crear diseños de página de tienda y páginas de productos sin problemas con herramientas y características de estilo interesantes.

¿Divi Builder es un complemento?

Sí, Divi Builder es un complemento independiente y también está integrado en el tema Divi. Es un generador de páginas de arrastrar y soltar que es compatible con cualquier tema de WordPress.

¿Cómo personalizo mi página de pago de WooCommerce con Divi?

Primero debe configurar su página de Pago dentro de la configuración del complemento WooCommerce navegando a WooCommerce y la Configuración. A continuación, haga clic en la pestaña "Avanzado" y seleccione la opción Pagar en el menú desplegable. Arrastre y suelte los elementos para personalizar su página de pago.

Umaír
Umair Khan