Cómo crear un equipo de página de pago de WooCommerce con div Div

El diseño de una página de pago de WooCommerce generalmente implica un archivo de plantilla PHP avanzado desde el backend y un poco de CSS personalizado. Pero con el Woo Div, ¡este proceso se ha vuelto fácil y agradable! Cuando edita una página de pago de WC con DIV, ese código corto WC se convertirá en un Módulo dinámico de pago Woo estructurado, que están listos para diseñarse visualmente utilizando potentes opciones de diseño. Esto le brinda 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 totalmente personalizada de cero con div. En primer lugar, diseñaremos la página de pago de WooCommerce utilizando los módulos Dynamic Woo disponibles para la página de compra. Una vez que haya terminado, le mostraremos cómo agregar el diseño de la página de compra a una plantilla de página de compra en el creador de tareas. Entonces, ya sea que desee personalizar la página de pago en sí o crear una plantilla de página de pago, lo cubre. Estarás a punto de diseñar casas increíbles en el menor tiempo.
¡Vamos a empezar! Mira en ayunas antes y después de aquí una mirada rápida a la página de pago predeterminada de la división en comparación con la nueva página de pago que diseñaremos en este tutorial.

Y aquí hay un vistazo más de cerca al diseño de la página de pago en escritorio y móvil.


También puede consultar la demostración en vivo del diseño de esta página de compra. Descargue la página de pago de forma gratuita para poner su mano en el diseño de la página de pago en este tutorial, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico diaria utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá aún más división de amabilidad y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar. No será “read” y no recibirá correos electrónicos adicionales. Determine los archivos
Descargue gratis únase al boletín de Divin y le enviaremos una copia del paquete de diseño de la página de buceo, además de muchos otros recursos, consejos y consejos de forma gratuita. Sigue a ti mismo y te convertirás en una división maestra en el menor tiempo. Si ya está suscrito, ingrese su correo electrónico a continuación y haga clic en Descargar para acceder al paquete de diseño.

Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a Div Free Weekly Layout Div!
Para importar la aparición de la sección en la Biblioteca de la Divica, navegue en la Biblioteca de la Divica.
Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar.
Una vez terminado, el aspecto de la sección estará disponible en Divi Builder. Descargue los conjuntos de plantillas para la página de canasta y pago para la diva que esta página de diseño también está disponible para descargar como parte de nuestro conjunto gratuito para plantillas de canasta y página de pago. Pasemos al tutorial, ¿sí? Sobre la cuenta de WooCommerce y Div. El contenido de la página se implementa utilizando un código corto en el editor de bloques de 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 Woo Divin que se pueden usar para atacar la página.

Los módulos WOO para diseñar una página de pago en Div Div vienen 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 específicos de Woo Woo.

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

Título de publicación: mostrará dinámicamente el título de la página de pago al construir una plantilla de página de pago.

Aviso de Woo: este módulo se puede establecer en diferentes tipos de páginas (página de canasta, página del producto, página de pago). Mostrará dinámicamente notificaciones importantes al usuario, según sea necesario.
Facturación de facturación de Woo: este módulo muestra el formulario de detalles de facturación utilizado durante el pago.
Entrega de pago de woo: este módulo muestra el formulario de detalles de entrega utilizado durante el pago. Información de pago de Woo: este módulo muestra el formulario de información adicional durante el pago.
Detalles de pago de WOO: este módulo muestra los detalles del pedido, incluidos los productos comprados y sus precios durante el pago.
Pago de pago Woo: este módulo muestra la selección del tipo de pago y los detalles del formulario de pago durante el pago.
Otro módulo Woo opcional:
Woo BreadRumbs: esto mostrará la barra de navegación de WooCommerce Breadcrumb.
Diseñe una página o plantilla de pago como mencionamos, podemos usar fácilmente los módulos Woo Divi para diseñar una página de pago personalizada de WooCommerce. Sin embargo, puede elegir y crear una plantilla de pago personalizada, utilizando el mismo proceso de diseño. Para este tutorial, construiremos un aspecto personalizado de la página de pago. Luego le mostraremos cómo usar la apariencia personalizada de la página de pago para crear una página de pago utilizando el constructor de temas.
Diseñando una página de pago de WooCommerce con DIV para esta página de pago de WooCommerce, el propósito es crear una página personalizada para la página de pago de WooCommerce que se designa como la página de pago de WooCommerce. Al final del tutorial, le mostraremos cómo guardar e importar fácilmente este aspecto de la finalización del pedido para crear una nueva plantilla de giro de página utilizando el generador de temas. Notiones introductorias: 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 manera predeterminada, la página solo contendrá el código corto utilizado para generar el contenido de la página de compra. Haga clic en el uso del botón Divi Builder en la parte superior del editor de la página.
Luego haga clic en el botón Editar con Divi Builder para iniciar Divi Builder.
Eliminar la apariencia para comenzar desde cero como se mencionó anteriormente, la página se cargará con todos Puede usar el aspecto existente y puede comenzar a personalizar los módulos que ya están allí si lo desea. Pero para este tutorial, comenzaremos desde cero. Para eliminar el aspecto, abra el menú Configuración en la parte inferior de la página y haga clic en el aspecto de envoltura (icono de basura) y seleccione Sí.
Creación de una sección, filas y columnas La sección de fondo para comenzar, agregue un color de fondo a una nueva sección, de la siguiente manera:
Color de fondo: #F7F3F0

Fila y columna luego agregue una fila con una sola columna a la sección

Creando el título de la página de pago dinámico para crear el título de la página dinámica para la página de pago, agregue un módulo de título a la columna.

El contenido del título de 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:
El título del espectáculo: Sí

Muestra meta: no

Muestra la imagen presentada: no

El texto del título de publicación para estilizar el texto de la publicación de publicación, actualice lo siguiente en la pestaña Diseño:
Título de la fuente: pantalla DM Serif
Color de texto del título: #fff
Título Tamaño del texto: 80px (escritorio), 60px (tableta), 42px (teléfono)

Altura de la línea de título: 1.2 em
Diseñar el módulo dinámico de aviso de WOO para la página de pago siempre es una buena idea agregar el módulo de notificación WOO a la parte superior de la página, de modo que las notificaciones son las más visibles para los usuarios al interactuar con la página de compra. Tenga en cuenta que diseñamos notificaciones que se mostrarán solo cuando sea necesario.
Para agregar el módulo de notificación WOO, haga clic para agregar un nuevo módulo de Notificación WOO en el módulo de publicación.
Tipo de página y antecedentes de aviso de WOO Luego, actualice el tipo de página y los antecedentes de Woo de la siguiente manera:
Tipo de página: Página de finalización de compra

Color de fondo: RGBA (153,158,117,0.1)
IMPORTANTE: Asegúrese de seleccionar la página de finalización como un tipo de página para que las notificaciones de WOO funcionen correctamente.

El texto del título de anuncio de WOO en la pestaña Diseño, actualice el estilo de texto del título de la siguiente manera:
Título de la fuente: Roboto
El peso de la fuente del título: promedio
Color de texto del título: #fff

Título Tamaño del texto: 14px
Altura de la línea de título: 1.8 em
Luego seleccione la pestaña Enlace y actualice el color del enlace de texto al título: Enlace de texto: #999E75
Woo Notte Body Text Después del texto del título, actualice el texto del cuerpo de la siguiente manera:
Fuente del cuerpo: Roboto
El color del texto del cuerpo: #fff
La altura de la línea del cuerpo: 1.8 em
Luego seleccione la pestaña Enlace y actualice el texto del enlace:

El peso de la fuente de enlace: en negrita
Color de texto de enlace: #999E75
Las notificaciones de etiquetas de campo de WOO en la página de finalización de compra incluyen campos de campo y etiquetas como un formulario de conexión y un código de cupón. Para editar el estilo de etiquetas de campo para estos campos, actualice lo siguiente:
El color del indicador de campo obligatorio: #fff
Campo de etiqueta de fuentes: Roboto
Peso de la etiqueta de campo Fuente: Bold
Woo Avie Fields Luego, actualice las opciones de estilo de campo de la siguiente manera:

Color sustituyente: #fff
Campos de fondo de color: transparente
Color de texto de campo: #fff
Color de texto de enfoque de enfoque: #fff

Llenado de campo: 12px hacia arriba, 12px hacia abajo
El ancho del marco de campo: 1px
Campos de color de la tarjeta: RGBA (255,255,255.0.32)
El botón de aviso de Woo
Use estilos personalizados para el botón: Sí
El tamaño de texto del botón: 14px
El color del texto del botón: #fff
Color de fondo para el botón: #999E75

El ancho del nudo del botón: 1px
El color del marco del botón: #999E75
El raspador de la mantequilla de botón: 0px
Espacio entre letras: 1px
Fuente para el botón: Roboto
El peso de la fuente del botón: en negrita
El estilo de la fuente del botón: TT
Botones: 12px hacia arriba, 12px hacia abajo, 24px a la izquierda, 24px a la derecha
Formulario de notificación Woo Cada uno de los formularios de notificación puede ser elegante en el grupo de grupo de formulario. Para dar a los formularios un borde de luz, actualice lo siguiente: Corner redondeado Formulario: 0px
El ancho de la forma de la forma: 1px
Forma de color bilis: RGBA (255,255,255.0.32)
Woo Noth Box Shadow Para proporcionar a la barra de notificaciones de WOO un diseño de borde superior, actualice las opciones de sombra de la caja de la siguiente manera:
Box Shadow: Ver captura de pantalla

Caja de sombra Posición horizontal: 0px
Posición vertical de la sombra de la caja: 3px
Shadow Color: #999E75
Diseñando el módulo de facturación de pago de WOO Ahora que nuestro título de página y notificaciones están en su lugar, estamos listos para agregar el contenido de facturación de pago de WOO, otro elemento clave en la página de compra. Antes de agregar el contenido de facturación, cree una nueva fila con una estructura de columna de tres quince y dos cinco.

En la columna 1, agregue un módulo de facturación de pago WOO.
El texto del título de facturación de pago de WOO puede ser dirigido por el título personalizando las opciones de texto del título. Abra la configuración de facturación de pago de WOO y, en la pestaña de diseño, actualice lo siguiente:
Título de la fuente: pantalla DM Serif
Color de texto del título: #fff
Título Tamaño del texto: 30px (escritorio), 24px (tableta), 18px (teléfono)

Altura de la línea de título: 1.4 em

Woo Checkout Billing Field y etiquetas de campo, así como el módulo Notic, este módulo también tiene opciones para estilo campos y campos. Debido a que queremos que todas las etiquetas de nuestros campos y campos se ajusten a lo largo de la página, podemos copiar los estilos de campo y las etiquetas de campo desde el módulo Notic ya creado y pegamos esos estilos en el módulo de facturación Woo Checkout. Aquí le mostramos cómo hacerlo: abra la configuración del módulo de notificación en la parte superior de la página.

Haga clic en el grupo de opciones de etiquetas de campo en la pestaña de diseño.
Seleccione “Copiar estilos de etiquetas de campo” en el menú de clic derecho.
Con el estilo copiado ahora, abra el menú varias configuraciones en la barra de menú superior del módulo de facturación de pago Woo. Luego seleccione “Etiquetas de campo Stick” en el menú.
Podemos repetir el mismo proceso para copiar y hacer estilos de campo. Aquí le explica cómo hacerlo:
Abra la configuración del módulo de notificación en la parte superior de la página.

Haga clic en el grupo de opciones de campo en la pestaña Diseño.
Seleccione “Copiar estilos de campo” en el menú de clic derecho.
Con el estilo copiado ahora, abra el menú varias configuraciones en la barra de menú superior del módulo de facturación de pago Woo. Luego seleccione “Pegar estilos de campo” en el menú.
La notificación del formulario de facturación de VOO es la notificación del formulario que muestra dinámicamente cualquier notificación o error que pueda surgir al completar el formulario. Para atacar la notificación en el formulario, abra la configuración de facturación de pago de WOO y actualice lo siguiente:

Color de fondo para la notificación de formulario: #E0816B


Agregar notificaciones de formulario: 8px hacia arriba, 8px hacia abajo
Formulario de notificación de fuente: Roboto
El tamaño del texto de notificación de texto: 14pxwoo Spacing y borde para la facturación para completar el diseño, dar un pequeño forro y un módulo de luz, como sigue:
Llenado: 16px arriba, 16px hacia abajo, 16px izquierda, 16px a la derecha

Ancho óseo: 1px

Color del borde: RGBA (255,255,255,0.1)
Información de entrega de diseño Woo Checkout y Woo Checkout Los siguientes elementos clave que necesitamos para crear la plantilla de página de pago son el módulo de envío de checkout woo y el módulo de información de checkout woo. El módulo de envío de pago WOO muestra el formulario requerido para ingresar la información de envío antes de completar el procesamiento. Y el módulo de información de pago WOO muestra un formulario de entrada que permite a los usuarios ingresar cualquier información adicional antes de completar. Agregue el modo de entrega de pago de WOO para esto, continúe y agregue un nuevo módulo de entrega de pago WOO en el módulo de facturación de pago WOO.
Agregue el modo de entrega de pago Woo en el módulo de envío de pago de WOO, continúe y agregue una información de pago WOO.
Módulos de información de envío de pago de WOO y COMPRESA DE WOO Debido a que tanto los módulos WOO (información de entrega y pago) deben coincidir con el módulo de facturación de checkout woo, podemos copiar los estilos que necesitamos en cada uno. Copiar y pegar los estilos de texto del título para comenzar con los estilos de título de texto. Abra la configuración para el módulo de facturación de pago de WOO y copie los estilos de texto de título utilizando el menú de clic derecho.
Luego use la función de selección múltiple para seleccionar los módulos de envío de pago de WOO y Woo Checkout. Luego pegue los estilos de texto del título en uno de los módulos seleccionados. Las etiquetas de campo de copia y pegado repiten el mismo proceso para copiar y pegar y estilos de etiquetas de campo. Abra la configuración para el módulo de facturación de pago WOO y copie las etiquetas de campo usando el menú de clic derecho.

Luego use la función de selección múltiple para seleccionar los módulos de envío de pago de WOO y Woo Checkout. Luego pegue las etiquetas de campo en uno de los módulos seleccionados.
Copiar y pegar los estilos de los campos repite el mismo proceso para copiar y pegar y estilos. Abra la configuración para el módulo de facturación de pago WOO y copie los estilos de campo usando el menú de clic derecho.
Luego use la función de selección múltiple para seleccionar los módulos de envío de pago de WOO y Woo Checkout. Luego pegue los estilos de los campos en uno de los módulos seleccionados.
Copiar y pegar el llenado Repita el mismo proceso para copiar, pegar y llenar. Abra la configuración para el módulo de facturación de pago de WOO y copie el relleno con el menú de clic derecho.

Luego, use la función de selección múltiple para seleccionar el envío de pago de WOO y el pago y el acolchado de Woo en uno de los módulos seleccionados.

Copiar y unir el borde repite el mismo proceso para copiar y pegar y el borde. Abra la configuración para el módulo de facturación de pago WOO y copie el borde utilizando el menú de clic derecho.

Luego, use la función de selección múltiple para seleccionar los módulos de envío de pago de WOO y de pago de Woo y pegue los estilos de borde en uno de los módulos seleccionados. Proyecte el módulo de detalles de pago de WOO ahora que nuestra entrega e información adicionales está diseñada, estamos listos para agregar el agregado. Woo Checkout Detalles Content. Este es otro elemento clave de la página de finalización del pedido que muestra los detalles del orden de compra. Incluye la lista de productos, subtotales y cantidad total de compra. También muestra los descuentos de cupón que se aplican y se pueden eliminar con un enlace. A los detalles del pago, agregue un nuevo Detalles de pago de WOO en la columna 2 de la misma fila.

Detalles del título de Woo Checkout en la configuración de detalles de pago de WOO, vaya a la pestaña Diseño y actualice el título de la siguiente manera:

Título de la fuente: pantalla DM Serif

El peso de la fuente del título: Bold

Color de texto del título: #fff

Título Tamaño del texto: 24px (escritorio), 22px (tableta), 18px (teléfono)

Altura de la línea de título: 1.4 em

Detalles de pago de Woo Etiqueta de columna a etiquetas de columna elegantes, actualice lo siguiente:

Etiqueta de la columna vertebral: Roboto

El peso de la fuente de la etiqueta de la columna: en negrita

Color de texto de la etiqueta de columna: RGBA (255,255,255.0.32)

Woo Detalles del texto del cuerpo para diseñar el cuerpo del texto que se dirige a los elementos en cada columna de la lista, actualice lo siguiente:
Fuente del cuerpo: Roboto
El color del texto del cuerpo: #fff
En la pestaña del enlace, actualice el color del texto del enlace:
Enlace de color de texto: #e0816b
Detalles de la tabla de pago de Woo Para este diseño, eliminaremos completamente el marco de la tabla. Para hacer esto, actualice lo siguiente: El ancho de la tabla Cenar: 0px

Woo Detalles de pago Celular de la tabla a celdas elegantes en la tabla, actualice lo siguiente:
Llenado para las celdas de la mesa: 0px izquierda
Estilo de la celda de la mesa: ninguno
Esto alinea el contenido de las tablas de la tabla a la izquierda y elimina completamente el marco de la celda del tubo.

Detalles del revestimiento y el borde Woo para mantener el diseño del módulo de acuerdo con los otros módulos, actualice el llenado y el borde de la siguiente manera:
Llenado: 16px arriba, 16px hacia abajo, 16px izquierda, 16px a la derecha
Ancho óseo: 1px
Color del borde: RGBA (255,255,255,0.1)
Diseñando el módulo de pago de checkout de WOO Ahora que el contenido de nuestros detalles de pago está completo, estamos listos para agregar el contenido de pago de checkout woo. Este es el elemento clave final de la página de finalización del pedido. Incluye botones de radio a los que se puede hacer clic para hacer diferentes opciones de pago, así como el botón de pago principal. También incluye notificaciones de formulario construidas. Para agregar el contenido de contenido de pago, agregue un nuevo módulo de pago de pago WOO en los detalles de pago en la columna 2.

Boo Checkout Pago Background Abra la configuración de pago de pago de WOO y le dé al módulo un fondo transparente:
Color de fondo: transparente

Texto de pago de pago de WOO TEXTO, actualice el estilo de 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 de texto de enlace: #999E75

Botones de radio de pago de Woo Checkout y luego actualice el estilo de la radio de la siguiente manera:
Color de texto del botón de radio: #fffont para el botón de radio: Roboto
Peso de la fuente del botón de radio: Aldine
Consejo explicativo de Tool Tool Tools de Woo Checkout es el cuadro de texto que se muestra cuando se abre un botón de radio. Actualicemos los estilos de indicaciones explicativas de la siguiente manera:

El color de fondo para indicaciones: transparente

El margen del globo: -10px arriba, 17px a la izquierda
Indicativo de fuente: Roboto

Notificación del formulario de pago de pago de WOO Debido a que el módulo de pago de checkout de WOO tiene la misma opción de notificación de formulario, podemos copiar los estilos de notificación de formulario existentes del módulo de facturación de checkout de WOO y podemos pegarlos al módulo de pago de checkout woo.
Botón de pago de Woo para ver el botón de pago para el módulo de pago de checkout woo, copie los estilos de botón del módulo de notificación WOO.
Luego pegue los estilos de botones al módulo de pago de checkout Woo.
Woo Checkout plano y borde para completar el diseño, agregue el revestimiento y el borde de la siguiente manera:

Llenado: 16px arriba, 16px hacia abajo, 16px izquierda, 16px a la derecha
Esquinas redondeadas: 0px
Ancho óseo: 1px
Color del borde: RGBA (255,255,255,0.1)

¡El resultado es cómo se ve nuestra página de pago ahora!
Agregue más contenido según sea necesario en este momento, 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 en la página según sea necesario. Para nuestra demostración especial 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 el generador de tareas para crear una plantilla de página de pago, como lo hemos hecho con la plantilla de página de finalización. Sin embargo, debido a que ya tenemos un aspecto de la página diseñado en este tutorial, simplemente podemos agregar esto a una plantilla de página de pago. Guarde la apariencia de la página de WooCommerce en la biblioteca de la Divica antes de que pueda agregar la página de finalización a una plantilla de página de finalización, primero debemos guardar la apariencia de la página en la biblioteca de la Divic. Para hacer esto, abra el menú de configuración de Div Div Builder en la parte inferior de la página de pago. Haga clic en el icono Agregar a la biblioteca, dale un nombre al nombre, luego haga clic en Guardar en la biblioteca. Cuida una nueva plantilla de página de pago Una vez que se guarda la apariencia de la página de pago en la biblioteca, estamos listos para crear una nueva plantilla de página. Aquí le explica cómo hacerlo:
Vaya al tablero de WordPress y navegue en Divin> Temor Builder.

Luego haga clic en el icono Agregue una nueva plantilla Plus desde el interior de la casa gris vacía para agregar una nueva plantilla.

En la configuración de la plantilla, en la pestaña “Uso activado”, seleccione el pago de la lista de páginas de WooCommerce.

Finalmente, haga clic en Crear plantilla.

Agregue la página de pago a la plantilla de pago Una vez que se haya creado la nueva plantilla de pago, haga clic en el área de “cuerpo personalizado” de la plantilla. En la lista emergente, seleccione Agregar de la biblioteca.
Desde la ventana de carga emergente en la biblioteca, en la pestaña de los aspectos guardados, seleccione la apariencia de la página de finalización que guardó en la biblioteca. Para editar la plantilla, haga clic en el icono de edición en el cuerpo de la plantilla.
Resultado final para verificar el resultado final de nuestra plantilla de página de pago.
Y así es como se ve en tabletas y dispositivos telefónicos.
Pensamientos finales El proceso de diseño de una plantilla de página de pago de WooCommerce personalizada se simplifica drásticamente y se amplifica con el potente generador de páginas visuales y los módulos Woo intuitivos. En este tutorial, nos centramos en incorporar los elementos clave que componen una página de pago. Pero, tenga en cuenta que todos los demás módulos y funciones poderosos están a su disposición para llevar sus páginas de pago a un nivel completamente nuevo. Esperamos que esto lo ayude a mejorar sus habilidades de diseño de la Divica y, lo que es más importante, lo lleva a más conversiones. Para obtener más información, consulte cómo diseñar una plantilla de página para el carrito de compras de WooCommerce en Div o descargue nuestras maravillosas plantillas para compras y cesta de pago. Espero con ansias las noticias tuyas en los comentarios. ¡Suerte!