La creación de una página de pago de WooCommerce generalmente implica una personalización sustancial del archivo de plantilla PHP en el backend y una cantidad significativa de CSS personalizado. Sin embargo, este procedimiento se ha vuelto entretenido y sencillo gracias a los módulos Woo de Divi . Cuando usa Divi para actualizar una página de pago de WC, el código abreviado de WC se transforma en un diseño estructurado de módulos de pago de Woo dinámicos que están listos para ser diseñados visualmente utilizando sofisticadas opciones de diseño integradas. Esto le proporciona un control total sobre el diseño de la página de pago.
Esta guía le enseñará cómo usar Divi para crear una página de pago de WooCommerce completamente única. Primero, crearemos la página de pago de WooCommerce utilizando los módulos dinámicos de Woo accesibles para la página de pago. Luego, cuando haya terminado, le mostraremos cómo aplicar el diseño de la página de pago a una plantilla de página de pago en Theme Builder. Por lo tanto, ya sea que desee modificar la propia página de pago o desarrollar una plantilla de página de pago, Divi lo tiene cubierto. Estarás en camino de crear páginas de pago visualmente atractivas en poco tiempo.
Vista previa del diseño
Así será nuestro diseño.
WooCommerce Chceck Out Page y Divi
Cuando instale WooCommerce en su sitio Divi, creará páginas WC primarias, como una página de carrito de compras, una página de carrito, un proceso de pago y una página de cuenta. Luego, el contenido de la página se implementa mediante un código corto en el editor de bloques backend de WordPress.
Create Amazing Websites
Con el mejor generador de páginas gratuito Elementor
Empezar ahora
Si habilita Divi Builder en esta página de pago, cada uno de los componentes de contenido de la página de pago de WooCommerce se cargará como módulos Divi Woo que se pueden utilizar para personalizar la página.
Módulos Woo para diseñar una página de pago en Divi
Divi tiene varios módulos esenciales para agregar contenido interactivo a una plantilla de página. Algunos de estos contienen módulos Woo adaptados a la página de pago.
Los siguientes módulos son esenciales para crear la página o plantilla de Checkout:
Título de la publicación: Â al crear una plantilla de página de pago, esto mostrará dinámicamente el título de la página de pago.
Notificación de Woo: Este módulo se puede asignar a muchos tipos de páginas (carrito, producto y pago). Mostrará dinámicamente notificaciones importantes al usuario según sea necesario.
Facturación de Woo Checkout: este módulo muestra el formulario de detalles de facturación que se utiliza durante el proceso de pago.
Envío de Woo Checkout: este módulo muestra el formulario de detalles de envío que aparece durante el proceso de pago.
Información de Woo Checkout: Este módulo muestra el formulario de información adicional que se utiliza durante todo el proceso de pago.
Detalles de Woo Checkout: este módulo muestra los detalles del pedido durante el pago, incluidos los productos que se están comprando y sus precios.
Pago de Woo Checkout: este módulo muestra las opciones de tipo de pago y los detalles del formulario de pago durante el pago.
Otra opción de módulo woo:
Woo Breadcrumbs: se mostrará la barra de navegación de WooCommerce Breadcrumb.
Crear una página de pago o una plantilla
Como se dijo anteriormente, podemos crear fácilmente una página de pago personalizada de WooCommerce utilizando los módulos Divi Woo. Sin embargo, puede utilizar el mismo proceso de diseño para crear una plantilla de pago personalizada. Este tutorial creará un diseño de página de pago personalizado para la página de pago. Luego, utilizando Divi Theme Builder, le mostraremos cómo aprovechar el diseño de página de pago personalizado para crear una plantilla de página de pago.
Uso de Divi para crear un diseño de página de pago de WooCommerce
El propósito de este tutorial de la página de pago de WooCommerce es desarrollar un diseño de página personalizado para la página de pago de WooCommerce, que se denomina Página de pago de WooCommerce en WooCommerce. Al final de la lección, le mostraremos cómo guardar e importar sin esfuerzo este diseño de página de pago en el Generador de temas para crear una nueva plantilla de página de pago.
Edición de la página de pago de WooCommerce
Haga clic para editar la página de pago de WooCommerce desde el panel de WordPress. La página contendrá el código abreviado utilizado para producir el contenido de la página de pago de forma predeterminada.
Haga clic en la opción Usar Divi Builder en la parte superior del editor de página.
Seleccione editar con el constructor Divi.
Empezar desde el principio
Como se indicó anteriormente, la página se cargará con todos los módulos Divi personalizables (incluidos los módulos Woo cruciales) que comprenden el contenido de la página de pago. Por supuesto, si lo desea, puede usar el diseño existente y comenzar a cambiar los módulos que ya están allí. Pero para esta guía, comenzaremos desde cero.
Ingrese al menú de opciones en la parte inferior de la página y seleccione SÍ para el botón Borrar diseño (el icono de la papelera) para borrar el diseño.
Antecedentes de la sección
Para comenzar, agregue un color de fondo a una nueva sección regular de la siguiente manera:
- Color de fondo: # 264653
Fila y columna
El siguiente paso será agregar una fila de una columna a esta sección.
Creación del título de la página de pago dinámico
Para hacer que el título de la página sea dinámico para la página de pago, agregue un módulo de título de la 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: # e9c46a
- Tamaño del texto del título: 80 px (escritorio), 60 px (tableta), 42 px (teléfono)
- Altura de la línea de título: 1.2em
Módulo de aviso dinámico de Woo
Siempre es una buena idea colocar el módulo Woo Notice en la parte superior de la página para ver los avisos al interactuar con la página de pago. Tenga en cuenta que estamos creando avisos que solo se mostrarán cuando sea necesario.
Para agregar el módulo de notificación de Woo, vaya al módulo de título de la publicación y haga clic para agregar un nuevo módulo de notificación de Woo.
Tipo de página y fondo 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: # 2a9d8f
Texto del título
Desde la pestaña de diseño, actualice la siguiente configuración.
- Fuente del título: Roboto
- Peso de la fuente del título: Medio
- Color del texto del título: # e9c46a
- Tamaño del texto del título: 14px
- Altura de la línea de título: 1.8em
- Color del texto del enlace: # f4a261
Campos de aviso de cortejo
Los campos y nombres de campo para elementos como un formulario de inicio de sesión y un código de cupón se incluyen en los Avisos de la página de pago. Para cambiar el estilo de las etiquetas de campo para estos campos, realice los siguientes cambios:
- Color del indicador de campo obligatorio: # e9c46a
- Fuente de etiqueta de campo: Roboto
- Peso de la fuente de la etiqueta de campo: negrita
- Color del marcador de posición: # e9c46a
- Color de fondo de los campos: transparente
- Color del texto de los campos: # e9c46a
- Color de texto de enfoque de campos: # e9c46a
- Relleno de campos: 12px superior, 12px inferior
- Ancho del borde de los campos: 1 px
- Color del borde de los campos: rgba (255,255,255,0.32)
Botón Woo Notice
Es hora de personalizar los botones.
- Usar estilos personalizados para el botón: SÍ
- Tamaño del texto del botón: 14px
- Color del texto del botón: # e9c46a
- Color de fondo del botón: # 2a9d8f
- Ancho del borde del botón: 1 px
- Color del borde del botón: # e9c46a
- Radio del borde del botón: 0px
- Espacio entre letras de los botones: 1 px
- Fuente del botón: Roboto
- Peso de la fuente del botón: negrita
- Estilo de fuente del botón: TT
- Relleno de botones: 12px en la parte superior, 12px en la parte inferior, 24px a la izquierda, 24px a la derecha
Formulario de notificación de cortejo
En el grupo de opciones Formulario, se puede aplicar estilo a cada uno de los formularios de notificación. Actualice lo siguiente para dar a los formularios un borde claro:
- Forma esquinas redondeadas: 0px
- Ancho del borde del formulario: 1 px
- Forma Color del borde: rgba (255,255,255,0.32)
Sombra de caja de aviso de Woo
Para agregar un diseño similar a un borde superior en la barra de avisos de cortejo, actualice las opciones de sombra de cuadro de la siguiente manera:
- Box Shadow: ver captura de pantalla
- Posición horizontal de la sombra del cuadro: 0px
- Posición vertical de la sombra del cuadro: 3px
- Color de sombra: # 999e75
Módulo de facturación de Woo Checkout
Ahora que tenemos el encabezado de nuestra página y los avisos en su lugar, podemos agregar el contenido de Woo Checkout Billing, que es otro componente esencial de la página de pago.
Cree una nueva fila con una disposición de columnas de tres quintos-dos quintos antes de agregar el material de facturación.
Agregue un módulo de venta de Woo Checkout en la columna 1.
Texto del título de facturación de Woo Checkout
Desde el módulo de facturación de Woo Checkout, abra la configuración y ajuste 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: 30 px (escritorio), 24 px (tableta), 18 px (teléfono)
- Altura de la línea de título: 1.4em
Campo de facturación de Woo Checkout y etiquetas de campo
Al igual que el módulo de notificación, este módulo incluye opciones para aplicar estilo al campo y a las etiquetas de campo. Debido a que queremos que todos nuestros campos y etiquetas de campo sean consistentes en toda la página, podemos copiar el campo y los estilos de etiqueta de campo del módulo Aviso y pegarlos en el módulo Facturación de Woo Checkout.
He aquí cómo hacerlo:
- Abra la configuración del Módulo de notificación en la parte superior de la página.
- En la pestaña de diseño, haga clic con el botón derecho en el grupo de opciones Etiquetas de campo.
- En el menú contextual, seleccione "Copiar estilos de etiquetas de campo".
Pegue el estilo copiado en el módulo recién agregado.
Y se verá algo así.
Aviso del formulario de facturación de Woo Checkout
El aviso del formulario es responsable de mostrar dinámicamente cualquier notificación o error al completar el formulario. Para diseñar el aviso del formulario, navegue hasta la configuración de Facturación de Woo Checkout y realice los siguientes cambios:
- Formulario de aviso de color de fondo: # e58991
- Relleno de notificación de formulario: 8 píxeles en la parte superior, 8 píxeles en la parte inferior
- Aviso de formulario Fuente: Roboto
- Tamaño del texto del aviso del formulario: 14px
Espacio y borde de facturación de Woo Checkout
Para rematar el diseño, agreguemos un poco de relleno y un borde claro al módulo de la siguiente manera:
- Relleno: 16 px arriba, 16 px abajo, 16 px a la izquierda, 16 px a la derecha
- Ancho del borde: 1 px
- Color del borde: rgba (255,255,255,0.1)
Información de envío de Woo Checkout y de Woo Checkout
El módulo de envío de Woo Checkout y el módulo de información de Woo Checkout son componentes esenciales para crear la plantilla de la página de pago. Antes de finalizar el pago, el módulo de envío de Woo Checkout muestra el formulario requerido para ingresar los detalles de envío. Además, el módulo Woo Checkout Information muestra un formulario de entrada que permite a los usuarios proporcionar información adicional antes de realizar el pago.
Agregar módulos
Ahora, vaya y agregue un módulo de envío de pago de Woo.
También agregue un módulo de información de Woo Checkout.
Cada módulo de Woo (Checkout Shipping and Checkout Information) debe parecerse al módulo de Facturación de Woo Checkout. Podemos copiar los estilos que necesitemos para cada uno a cada uno. Copiemos y peguemos el diseño aquí.
Módulo de detalles de pago de Woo
Ahora que hemos diseñado nuestro contenido de envío e información adicional, estamos listos para agregar el contenido de Detalles de pago de Woo. Este es otro componente importante de la página de pago que muestra los detalles de la orden de compra. Contiene una lista de productos, subtotales y el precio total de la compra. También muestra los cupones de ahorro que se han aplicado y se pueden retirar a través de un enlace.
Agregue un nuevo módulo de Detalles de pago de Woo a los detalles de pago en la columna 2 de la misma fila.
Texto del título de los detalles de la compra de Woo
Actualice la configuración del 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: # e9c46a
- Tamaño del texto del título: 24px (escritorio), 22px (tableta), 18px (teléfono)
- Altura de la línea de título: 1.4em
Etiqueta de columna de detalles de pago de Woo
Diseñemos las etiquetas de las columnas:
- Fuente de etiqueta de columna: Roboto
- Peso de fuente de la etiqueta de columna: negrita
- Color de texto de etiqueta de columna: # ddb17c
Woo Checkout Details Cuerpo del texto
Para aplicar estilo al texto del cuerpo que apunta a los elementos de cada columna de la lista, actualice lo siguiente:
- Fuente del cuerpo: Roboto
- Color del texto del cuerpo: #fff
Debajo de 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 celda de tabla: 0px a la izquierda
- Estilo de borde de celda de tabla: ninguno
Detalles de Woo Checkout 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 a la izquierda, 16 px a la derecha
- Ancho del borde: 1 px
- Color del borde: rgba (255,255,255,0.1)
Módulo de pago Woo Checkout
Estamos listos para agregar el contenido de Woo Checkout Details ahora que hemos creado nuestro contenido de envío e información adicional. Esta es otra parte crucial de la página de pago que muestra los detalles de la orden de compra. Incluye una lista de productos, subtotales y el precio de compra final. También muestra los cupones de ahorro que se han aplicado y se pueden retirar haciendo clic en un enlace.
Agregue un nuevo módulo de Detalles de pago de Woo a los detalles de pago en la columna 2 de la misma fila.
Realice los siguientes ajustes.
- Color de fondo del aviso de formulario: # E58991
- Tipo de letra del aviso de formulario: Roboto
- Peso de la fuente del aviso del formulario: Negrita
- Tamaño de fuente del aviso del formulario: 16px
- Configuración del botón: como el anterior
- Espaciado: 0px (superior, inferior, izquierda, derecha)
Resultado final
Así es como se ve nuestra página de pago final.
Terminando
Con el robusto creador de páginas de Divi y los intuitivos módulos Woo, la creación de una plantilla personalizada de página de pago de WooCommerce se simplifica y amplifica enormemente. Este tutorial se centró en incorporar las partes esenciales que componen una página de pago. Sin embargo, tenga en cuenta que todos los demás módulos y funciones exclusivos de Divi están disponibles para llevar sus páginas de pago al siguiente nivel. Esto debería ayudarlo a mejorar sus habilidades de diseño de Divi y, lo que es más importante, conducir a más conversiones.
