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

El diseño de una página de pago de WooCommerce generalmente implica una personalización avanzada del archivo de plantilla PHP en el backend y una buena cantidad de CSS personalizado. ¡Pero con los Módulos Woo de Divi , este proceso se ha vuelto fácil y divertido! Cuando edita una página de pago de WC usando Divi, ese código abreviado de WC se transformará en un diseño estructurado de módulos de pago de Woo dinámicos que están listos para diseñarse visualmente utilizando potentes opciones de diseño integradas. Esto le da control total sobre el diseño de la página de pago.

En este tutorial, le mostraremos cómo crear una página de pago de WooCommerce completamente personalizada desde cero con Divi. Primero, diseñaremos la página de pago de WooCommerce utilizando los módulos Woo dinámicos disponibles para la página de pago. Una vez hecho esto, le mostraremos cómo agregar el diseño de la página de pago a una plantilla de página de pago en Theme Builder. Entonces, ya sea que desee personalizar la página de pago real o crear una plantilla de página de pago, Divi lo tiene cubierto. Estará en camino de diseñar impresionantes páginas de pago en muy poco tiempo.

¡Empecemos!

Vistazo

El antes y el después

Aquí hay un vistazo rápido a la página de pago predeterminada de Divi en comparación con la nueva página de pago que diseñaremos en este tutorial.

Y aquí hay una mirada más cercana al diseño de la página de Pago en computadoras de escritorio y dispositivos móviles.

También puede ver la demostración en vivo de este diseño de página de pago.

Descargue el diseño de la página de pago GRATIS

Para poner sus manos en el diseño de la plantilla de la página de pago de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: «Open Sans», Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: «Open Sans», Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}

Descárgalo gratis

Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón importar.

Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.

Descargue los conjuntos de plantillas de página de carrito y pago para Divi

Este diseño de página de pago también está disponible para su descarga como parte de nuestros conjuntos de plantillas de página de pago y carrito GRATIS para Divi .

Vayamos al tutorial, ¿de acuerdo?

Acerca de la página de pago de WooCommerce y Divi

Cada vez que instale WooCommerce en su sitio Divi, WooCommerce (WC) generará páginas clave de WC que incluyen una página de tienda, una página de carrito, una página de pago y una página de cuenta. El contenido de la página se implementa mediante el uso de un shortcode en el editor de bloques backend de WordPress.

Si activa Divi Builder en esta página de pago, cada uno de los elementos de contenido de la página de pago de WooCommerce se cargará como módulos Divi Woo que se pueden usar para diseñar la página.

Módulos Woo para diseñar una página de pago en Divi

Divi viene con una variedad de módulos que son clave para agregar contenido dinámico a una plantilla de página. Algunos de estos incluyen módulos Woo específicos para la página de pago.

Los módulos que son clave para crear la página o plantilla de Checkout incluyen:

  • Título de la publicación : esto mostrará el título de la página de pago de forma dinámica al crear una plantilla de página de pago.
  • Aviso de Woo : este módulo se puede configurar en diferentes tipos de página (página del carrito, página del producto, página de pago). Mostrará notificaciones importantes al usuario de forma dinámica según sea necesario.
  • Woo Checkout Billing : este módulo muestra el formulario de detalles de facturación utilizado durante el pago.
  • Envío de Woo Checkout : este módulo muestra el formulario de detalles de envío utilizado durante el pago.
  • Información de pago de Woo : este módulo muestra el formulario de información adicional utilizado durante el pago.
  • Detalles de pago de Woo : este módulo muestra los detalles del pedido, incluidos los productos que se compran y sus precios, durante el pago.
  • Woo Checkout Payment : este módulo muestra la selección del tipo de pago y los detalles del formulario de pago durante el pago.

Otro módulo de woo opcional:

  • Woo Breadcrumbs : esto mostrará la barra de navegación de WooCommerce Breadcrumbs.

Diseñe una página o plantilla de pago

Como se mencionó, podemos usar fácilmente los módulos Divi Woo para diseñar una página de pago de WooCommerce personalizada . Sin embargo, también puede optar por crear una plantilla de Checkout personalizada utilizando el mismo proceso de diseño. Para este tutorial, vamos a crear un diseño de página de pago personalizado para la página de pago. Luego, le mostraremos cómo usar el diseño de página de pago personalizado para crear una plantilla de página de pago usando Divi Theme Builder .

Diseño de un diseño de página de pago de WooCommerce con Divi

Para este tutorial de la página de pago de WooCommerce, el objetivo es crear un diseño de página personalizado para la página de pago de WooCommerce que se designa como la página de pago de WooCommerce en WooCommerce. Al final del tutorial, le mostraremos cómo guardar e importar fácilmente este diseño de página de pago para crear una nueva plantilla de página de pago usando Theme Builder.

Primeros pasos: Edición de la página de pago de WooCommerce

Desde el panel de WordPress, haga clic para editar la página de pago de WooCommerce. De forma predeterminada, la página solo contendrá el código abreviado utilizado para generar el contenido de la página de pago.

Haga clic en el botón Usar The Divi Builder en la parte superior del editor de páginas.

Luego haga clic en el botón Editar con Divi Builder para iniciar Divi Builder.

Borrar el diseño para comenzar desde cero

Como se mencionó anteriormente, la página se cargará con todos los módulos Divi personalizables (incluidos los módulos Woo clave) que conforman el contenido de la página de pago. Puede usar el diseño existente y comenzar a personalizar los módulos que ya están allí si lo desea. Pero para este tutorial, vamos a empezar desde cero.

Para borrar el diseño, abra el menú de configuración en la parte inferior de la página y haga clic en el botón Borrar diseño (el ícono del bote de basura) y seleccione SÍ.

Creación de una sección, una fila y una columna

Fondo de la sección

Para comenzar, agregue un color de fondo a una nueva sección regular de la siguiente manera:

  • Color de fondo: #f7f3f0

Fila y columna

A continuación, agregue una fila de una columna a la sección

Crear el título de la página de pago dinámico

Para crear el título de página dinámico necesario para la página de pago, agregue un módulo de título de publicación a la columna.

Contenido del título de la publicación

En la configuración del título de la publicación, actualice los elementos para mostrar solo el título de la siguiente manera:

  • Mostrar título: SÍ
  • Mostrar Meta: NO
  • Mostrar imagen destacada: NO

Texto del título de la publicación

Para diseñar el texto del título de la publicación, actualice lo siguiente en la pestaña de diseño:

  • Fuente del título: DM Serif Display
  • Color del texto del título: #fff
  • Tamaño del texto del título: 80 px (escritorio), 60 px (tableta), 42 px (teléfono)
  • Altura de la línea del título: 1,2 em

Diseño del módulo de notificación de Dynamic Woo para la página de pago

Siempre es una buena idea agregar el módulo Woo Notice en la parte superior de la página para que los avisos sean más visibles para los usuarios cuando interactúan con la página de pago. Tenga en cuenta que estamos diseñando avisos que se mostrarán solo cuando sea necesario.

Para agregar el módulo Woo Notice, haga clic para agregar un nuevo módulo Woo Notice debajo del módulo de título de la publicación.

Fondo y tipo de página de aviso de Woo

A continuación, actualice el tipo de página y el color de fondo del aviso de Woo de la siguiente manera:

  • Tipo de página: Página de pago
  • Color de fondo: rgba(153,158,117,0.1)

IMPORTANTE: asegúrese de seleccionar la página de pago como tipo de página para que los avisos de cortejo funcionen correctamente.

Texto del título del aviso de Woo

En la pestaña de diseño, actualice el estilo del texto del título de la siguiente manera:

  • Fuente del título: Roboto
  • Peso de la fuente del título: Medio
  • Color del texto del título: #fff
  • Tamaño del texto del título: 14px
  • Altura de la línea del título: 1,8 em

Luego seleccione la pestaña del enlace y actualice el color del texto del enlace del título:

  • Color del texto del enlace: #999e75

Texto del cuerpo del aviso de Woo

Después del texto del título, actualice el texto del cuerpo de la siguiente manera:

  • Fuente del cuerpo: Roboto
  • Color del cuerpo del texto: #fff
  • Altura de la línea del cuerpo: 1,8 em

Luego seleccione la pestaña del enlace y actualice el texto del enlace:

  • Peso de la fuente del enlace: Negrita
  • Color del texto del enlace: #999e75

Etiquetas de campo de aviso de Woo

Los avisos de la página de pago incluyen campos y etiquetas de campo para cosas como un formulario de inicio de sesión y un código de cupón. Para editar el estilo de las etiquetas de campo para estos campos, actualice lo siguiente:

  1. Color del indicador de campo obligatorio: #fff
  2. Fuente de etiqueta de campo: Roboto
  3. Peso de fuente de etiqueta de campo: Negrita

Campos de aviso de Woo

A continuación, actualice las opciones de estilo de los campos de la siguiente manera:

  1. Color del marcador de posición: #fff
  2. Color de fondo de los campos: transparente
  3. Color del texto de los campos: #fff
  4. Color de texto de enfoque de campos: #fff
  5. Relleno de campos: 12px arriba, 12px abajo
  6. Ancho del borde de los campos: 1px
  7. Color del borde de los campos: rgba(255,255,255,0.32)

Botón de aviso Woo

  1. Usar estilos personalizados para el botón: SÍ
  2. Tamaño del texto del botón: 14px
  3. Color del texto del botón: #fff
  4. Color de fondo del botón: #999e75
  5. Ancho del borde del botón: 1px
  6. Color del borde del botón: #999e75
  7. Radio del borde del botón: 0px
  8. Espaciado entre letras de botones: 1 px
  9. Fuente del botón: Roboto
  10. Peso de la fuente del botón: Negrita
  11. Estilo de fuente del botón: TT
  12. Relleno de botones: 12 px arriba, 12 px abajo, 24 px izquierda, 24 px derecha

Formulario de notificación Woo

Cada uno de los formularios de notificación se puede diseñar en el grupo de opciones Formulario. Para dar a los formularios un borde claro, actualice lo siguiente:

  1. Forma esquinas redondeadas: 0px
  2. Ancho del borde del formulario: 1px
  3. Color del borde del formulario: rgba(255,255,255,0.32)

Sombra de cuadro de aviso de Woo

Para darle a la barra de avisos de cortejo un diseño similar a un borde superior, actualice las opciones de sombra de cuadro de la siguiente manera:

  1. Sombra de caja: ver captura de pantalla
  2. Posición horizontal de la sombra del cuadro: 0px
  3. Posición vertical de la sombra del cuadro: 3px
  4. Color de sombra: #999e75

Diseño del módulo de facturación Woo Checkout

Ahora que el título de nuestra página y los avisos están en su lugar, estamos listos para agregar el contenido de Woo Checkout Billing, otro elemento clave para la página de pago.

Antes de agregar el contenido de facturación, cree una nueva fila con una estructura de columna de tres quintos y dos quintos.

En la columna 1, agregue un módulo de Facturación de Woo Checkout.

Texto del título de facturación de Woo Checkout

Podemos orientar el texto del título al personalizar las opciones de texto del título.

Abra el modal de configuración de facturación de Woo Checkout y, en la pestaña de diseño, actualice lo siguiente:

  1. Fuente del título: DM Serif Display
  2. Color del texto del título: #fff
  3. Tamaño del texto del título: 30 px (escritorio), 24 px (tableta), 18 px (teléfono)
  4. Altura de la línea del título: 1,4 em

Etiquetas de campo y campo de facturación de Woo Checkout

Al igual que el Módulo de aviso, este módulo también tiene opciones para diseñar el campo y las etiquetas de campo. Dado que queremos que todos nuestros campos y etiquetas de campo coincidan en toda la página, podemos copiar los estilos de campo y etiqueta de campo del módulo Aviso ya creado y pegar esos estilos en el módulo Facturación de Woo Checkout.

Aquí está cómo hacerlo:

  • Abra la configuración del Módulo de avisos en la parte superior de la página.
  • Haga clic con el botón derecho en el grupo de opciones Etiquetas de campo en la pestaña de diseño.
  • Seleccione «Copiar estilos de etiquetas de campo» en el menú contextual.

Con el estilo ahora copiado, abra el menú de más configuraciones en la barra de menú superior del módulo Facturación de Woo Checkout. Luego seleccione «Pegar estilos de etiquetas de campo» en el menú.

También podemos repetir el mismo proceso para copiar sobre los estilos de campo.

Aquí está cómo hacerlo:

  • Abra la configuración del Módulo de avisos en la parte superior de la página.
  • Haga clic con el botón derecho en el grupo de opciones Campo en la pestaña de diseño.
  • Seleccione «Copiar estilos de campo» en el menú contextual.

Con el estilo ahora copiado, abra el menú de más configuraciones en la barra de menú superior del módulo Facturación de Woo Checkout. Luego seleccione «Pegar estilos de campo» en el menú.

Aviso de formulario de facturación de Woo Checkout

El formulario de aviso es el que muestra de forma dinámica cualquier notificación o error que pueda surgir al rellenar el formulario. Para diseñar el aviso del formulario, abra la configuración de Facturación de Woo Checkout y actualice lo siguiente:

  • Color de fondo del aviso de formulario: #e0816b
  • Relleno de aviso de formulario: 8px arriba, 8px abajo
  • Fuente de aviso de formulario: Roboto
  • Aviso de formulario Tamaño del texto: 14px

Espaciado y borde de facturación de Woo Checkout

Para terminar el diseño, vamos a darle un poco de relleno y un borde ligero al módulo de la siguiente manera:

  • Relleno: 16 px arriba, 16 px abajo, 16 px izquierda, 16 px derecha
  • Ancho del borde: 1px
  • Color del borde: rgba(255,255,255,0.1)

Diseñar el envío de Woo Checkout y la información de Woo Checkout

Los siguientes elementos clave que necesitamos para crear la plantilla de la página de pago son el módulo de envío de Woo Checkout y el módulo de información de Woo Checkout. El módulo de envío de Woo Checkout muestra el formulario necesario para ingresar la información de envío antes de completar el pago. Y el módulo de información de pago de Woo muestra un formulario de entrada que permite a los usuarios ingresar cualquier información adicional antes del pago.

Agregue el módulo de envío Woo Checkout

Para este diseño, continúe y agregue un nuevo módulo de envío de Woo Checkout directamente debajo del módulo de facturación de Woo Checkout.

Agregue el módulo de envío Woo Checkout

En el módulo de envío de Woo Checkout, continúe y agregue un módulo de información de Woo Checkout.

Diseñar los módulos de información de Woo Checkout Shipping y Woo Checkout

Debido a que ambos módulos Woo (Envío de pago e Información de pago) deben coincidir con el diseño del módulo Facturación de pago de Woo, podemos copiar los estilos que necesitamos en cada uno.

Copiar y pegar los estilos de texto del título

Comencemos con los estilos de texto del título. Abra la configuración del módulo Facturación de Woo Checkout y copie los Estilos de texto del título usando el menú contextual.

Luego use la función de selección múltiple para seleccionar los módulos de información de pago y envío de Woo Checkout. Luego pegue los estilos de texto del título en uno de los módulos seleccionados.

Copiar y pegar estilos de etiquetas de campo

Repita el mismo proceso para copiar y pegar también los estilos de etiquetas de campo.

Abra la configuración del módulo Facturación de Woo Checkout y copie los Estilos de etiquetas de campo usando el menú contextual.

Luego use la función de selección múltiple para seleccionar los módulos de información de pago y envío de Woo Checkout. Luego pegue los estilos de etiquetas de campo en uno de los módulos seleccionados.

Copiar y pegar los estilos de los campos

Repita el mismo proceso para copiar y pegar también los estilos de los campos.

Abra la configuración del módulo Facturación de Woo Checkout y copie los Estilos de los campos usando el menú contextual.

Luego use la función de selección múltiple para seleccionar los módulos de información de pago y envío de Woo Checkout. Luego pegue los estilos de los campos en uno de los módulos seleccionados.

Copiar y pegar el relleno

Repita el mismo proceso para copiar y pegar también el relleno.

Abra la configuración del módulo Facturación de Woo Checkout y copie el relleno usando el menú contextual.

Luego use la función de selección múltiple para seleccionar los módulos de información de pago y envío de Woo Checkout y pegue el relleno en uno de los módulos seleccionados.

Copiar y pegar el borde

Repita el mismo proceso para copiar y pegar también el borde.

Abra la configuración del módulo Facturación de Woo Checkout y copie el borde usando el menú contextual.

Luego use la función de selección múltiple para seleccionar los módulos Woo Checkout Shipping y Woo Checkout Information y pegue los estilos de borde en uno de los módulos seleccionados.

Diseño del módulo de detalles de Woo Checkout

Ahora que nuestro contenido de envío e información adicional está diseñado, estamos listos para agregar el contenido Detalles de pago de Woo. Este es otro elemento clave de la página de pago que muestra los detalles de la orden de compra. Incluye la lista de productos, subtotales y el monto total de la compra. También muestra cualquier descuento de cupón que se aplique y que se pueda eliminar con un enlace.

A los detalles de pago, agregue un nuevo módulo Detalles de pago de Woo a la columna 2 en la misma fila.

Texto del título de los detalles de pago de Woo

En el modal de configuración de detalles de pago de Woo, vaya a la pestaña de diseño y actualice el texto del título de la siguiente manera:

  • Fuente del título: DM Serif Display
  • Peso de la fuente del título: Negrita
  • Color del texto del título: #fff
  • Tamaño del texto del título: 24 px (escritorio), 22 px (tableta), 18 px (teléfono)
  • Altura de la línea del título: 1,4 em

Etiqueta de columna de detalles de pago de Woo

Para diseñar las etiquetas de las columnas, actualice lo siguiente:

  • Fuente de etiqueta de columna: Roboto
  • Peso de fuente de etiqueta de columna: Negrita
  • Color de texto de etiqueta de columna: rgba(255,255,255,0.32)

Texto del cuerpo de los detalles de pago de Woo

Para diseñar el texto del cuerpo que apunta a los elementos debajo de cada columna en la lista, actualice lo siguiente:

  • Fuente del cuerpo: Roboto
  • Color del cuerpo del texto: #fff

En la pestaña del enlace, actualice el color del texto del enlace:

  • Color del texto del enlace: #e0816b

Borde de tabla de detalles de pago de Woo

Para este diseño, vamos a eliminar el borde de la mesa por completo. Para hacer esto, actualice lo siguiente:

  • Ancho del borde de la tabla: 0px

Celda de tabla de detalles de pago de Woo

Para diseñar las celdas de la tabla dentro de la tabla, actualice lo siguiente:

  • Relleno de celdas de tabla: 0px a la izquierda
  • Estilo de borde de celda de tabla: ninguno

Esto alinea el contenido dentro de las celdas de la tabla a la izquierda y elimina completamente el borde de la celda de la tabla.

Detalles de pago de Woo Acolchado y borde

Para mantener el diseño del módulo consistente con los otros módulos, actualice el relleno y el borde de la siguiente manera:

  • Relleno: 16 px arriba, 16 px abajo, 16 px izquierda, 16 px derecha
  • Ancho del borde: 1px
  • Color del borde: rgba(255,255,255,0.1)

Diseño del módulo de pago Woo Checkout

Ahora que nuestro contenido de detalles de pago está completo, estamos listos para agregar el contenido de Woo Checkout Payment. Este es el último elemento clave de la página de pago. Incluye botones de radio en los que se puede hacer clic para alternar entre diferentes opciones de pago, así como el botón principal de pago. También incluye avisos de formulario integrados.

Para agregar el contenido de pago de pago, agregue un nuevo módulo Pago de pago de Woo debajo de los detalles de pago en la columna 2.

Fondo de pago de Woo Checkout

Abre la configuración de pago de Woo Checkout y dale al módulo un fondo transparente:

  • Color de fondo: transparente

Texto del cuerpo del pago de Woo Checkout

A continuación, actualice el estilo del texto del cuerpo de la siguiente manera:

  • Fuente del cuerpo: Roboto

En la pestaña del enlace, actualice el color del texto del enlace:

  • Color del texto del enlace: #999e75

Botones de radio de pago Woo Checkout

A continuación, actualice el estilo de los botones de radio de la siguiente manera:

  • Color del texto del botón de radio: #fff
  • Fuente del botón de opción: Roboto
  • Peso de fuente del botón de radio: Negrita

Información sobre herramientas de pago de Woo Checkout

La información sobre herramientas es el cuadro de texto que se muestra cuando se abre un botón de opción.

Actualicemos los estilos de información sobre herramientas de la siguiente manera:

  • Color de fondo de información sobre herramientas: transparente
  • Margen de información sobre herramientas: -10 px arriba, 17 px a la izquierda
  • Fuente de información sobre herramientas: Roboto

Aviso de formulario de pago de Woo Checkout

Debido a que el módulo de pago de Woo Checkout comparte la misma opción de aviso de formulario, podemos copiar los estilos de aviso de formulario existentes del módulo de facturación de Woo Checkout y pegarlos en el módulo de pago de Woo Checkout.

Botón de pago Woo Checkout

Para diseñar el botón de pago para el módulo Pago de pago de Woo, copie los estilos de botón del módulo Aviso de Woo.

Luego pegue los estilos de los botones en el módulo Pago de Woo Checkout.

Relleno y borde de pago de Woo Checkout

Para finalizar el diseño, agregue relleno y borde de la siguiente manera:

  • Relleno: 16 px arriba, 16 px abajo, 16 px izquierda, 16 px derecha
  • Esquinas redondeadas: 0px
  • Ancho del borde: 1px
  • Color del borde: rgba(255,255,255,0.1)

El resultado

¡Así es como se ve nuestra página de pago ahora!

Agregue más contenido según sea necesario

En este punto, tenemos todos los elementos clave para nuestra plantilla de página de pago. Pero no tienes que parar aquí. Puede agregar cualquier contenido que desee a la página según sea necesario.

Para nuestra demostración destacada de esta plantilla de página de pago ( disponible para descargar aquí ), incluimos una barra lateral fija con algunos enlaces de navegación personalizados.

Creación de una plantilla personalizada para la página de pago

Si desea crear una plantilla de página de pago, puede usar Theme Builder para crear un diseño de plantilla de página de pago tal como lo hicimos con la plantilla de página de pago. Sin embargo, dado que ya tenemos un diseño de página diseñado a partir de este tutorial, simplemente podemos agregar este diseño a una plantilla de página de pago.

Guardar el diseño de página de WooCommerce en la biblioteca Divi

Antes de que podamos agregar el diseño de la página de pago a una plantilla de página de pago, primero debemos guardar el diseño de la página en la Biblioteca Divi.

Para hacer esto, abra el menú de configuración de Divi Builder en la parte inferior de la página de pago. Haga clic en el ícono Agregar a la biblioteca , asigne un nombre al diseño y luego haga clic en Guardar en la biblioteca .

Crear nueva plantilla de página de pago

Una vez que el diseño de la página de pago se guarda en la biblioteca, estamos listos para crear una nueva plantilla de página de pago.

Aquí está cómo hacerlo:

  1. Vaya a su panel de WordPress y navegue a Divi> Theme Builder.
  2. A continuación, haga clic en el icono Agregar nueva plantilla más dentro del área del cuadro gris vacío para agregar una nueva plantilla.
  3. En el modal de Configuración de plantilla, en la pestaña «Usar en», seleccione Pagar en la lista de páginas de WooCommerce.
  4. Finalmente, haga clic en Crear plantilla.

Agregar diseño de página de pago a la plantilla de pago

Una vez que se haya creado la nueva plantilla de Checkout, haga clic en el área «Agregar cuerpo personalizado» de la plantilla. Dentro de la lista emergente, seleccione Agregar de la biblioteca .

En la ventana emergente Cargar desde la biblioteca, en la pestaña Sus diseños guardados, seleccione el diseño de la página de pago que guardó en la biblioteca.

Una vez hecho esto, la plantilla de Checkout estará disponible en Theme Builder. Para editar la plantilla, haga clic en el icono de edición en el área del cuerpo de la plantilla.

Resultado final

Veamos el resultado final de nuestra plantilla de página de pago.

Y así es como se ve en tabletas y teléfonos.

Pensamientos finales

El proceso de diseño de una plantilla personalizada de página de pago de WooCommerce se simplifica y amplifica drásticamente con el potente creador de páginas visuales de Divi y los módulos Woo intuitivos. En este tutorial, nos concentramos en incorporar los elementos clave que componen una página de pago. Pero tenga en cuenta que todos los otros potentes módulos y funciones de Divi están a su disposición para llevar sus páginas de pago a un nivel completamente nuevo. Con suerte, esto ayudará a mejorar sus habilidades de diseño de Divi y, lo que es más importante, generará más conversiones.

Para obtener más información, consulte cómo diseñar una plantilla de página de carrito de WooCommerce en Divi o descargue nuestros increíbles conjuntos de plantillas de página de pago y carrito GRATIS para Divi .

Espero escuchar de usted en los comentarios.

¡Salud!

.inline-code{padding: 0px 4px; color: crimson; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!important} video.with-border {border-radius: 8px;box-shadow: 0 8px 60px 0 rgba(103,151,255,.11), 0 12px 90px 0 rgba(103,151,255,.11);display:block;margin: 0 auto;}