Cómo agregar dinámicamente una barra de código de cupón a páginas de productos específicos con Divi

Cuando esté ejecutando una tienda en línea que haya creado con Divi y WooCommerce, ocasionalmente querrá mostrar códigos de cupón en su sitio web para aumentar la sensación de urgencia. En toda la web, notará que muchas tiendas en línea comparten los códigos de cupón en una barra que está pegada en la parte superior de la página. Ahora, con Theme Builder de Divi, puede agregar automáticamente dicha barra de código de cupón a los productos que son elegibles para el código de cupón.

En este tutorial, le mostraremos exactamente cómo hacerlo. Este tutorial consta de varias partes, desde configurar el código de cupón hasta crear una plantilla de producto separada para los productos de la categoría de descuento. ¡También podrá descargar el archivo JSON de la plantilla de forma gratuita! El estilo general que usamos se basa en el diseño de página de producto audaz que hemos compartido en el pasado.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue la plantilla de la página del producto GRATIS

Para poner sus manos en la plantilla de la página del producto, 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 Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Descripción general del tutorial

• Asegúrese de tener Divi y el complemento WooCommerce instalados en su sitio web
• En la primera parte del tutorial, crearemos una nueva categoría de productos con descuento.
• Asignaremos los productos elegibles a esta nueva categoría de productos
• Luego, crearemos un nuevo código de cupón y nos aseguraremos de que el código de cupón se aplique solo a la categoría de producto que creamos.
• Dentro del generador de temas, crearemos una nueva plantilla para esa categoría de producto en particular.
• Reutilizaremos el cuerpo normal de la página del producto para esta plantilla y agregaremos una barra de código de cupón superior usando las opciones integradas de Divi

1. Cree una nueva categoría de producto con descuento

Vaya a Categorías de productos y agregue una nueva categoría de productos con descuento

Comience instalando el complemento WooCommerce en su sitio web de WordPress y agregue una nueva categoría de producto dedicada a todos los productos elegibles para el nuevo descuento. Si planea usar el código de cupón en categorías de productos existentes, puede usarlos en su lugar.

2. Asignar productos a una nueva categoría de descuento

Editar producto

Luego, abra los productos que desea incluir en la venta.

Asignar productos a una nueva categoría de descuento

E inclúyalos en la nueva categoría de productos con descuento.

3. Cree un código de cupón de WooCommerce

Vaya a Cupones y agregue un nuevo cupón

La siguiente parte de este tutorial trata sobre la creación de un nuevo código de cupón. Vaya a su panel de WordPress> Cupones> Y haga clic en 'Crear su primer cupón' .

Agregar código de cupón y datos de cupón

Agregue el código de cupón en la parte superior y seleccione la configuración general que desea aplicar a su código de cupón.

• Código de descuento: agregar código de descuento
• Tipo de descuento: porcentaje de descuento
• Monto del cupón: agregar porcentaje
• Fecha de vencimiento del cupón: seleccione la fecha

Agregar restricción de uso

Luego, pase a la restricción de uso y asegúrese de que el código de cupón funcione solo en productos dentro de su categoría de productos con descuento.

• Categorías de productos: Descuento

4. Agregar nueva plantilla para la categoría de descuento

Agregar nueva plantilla

Una vez que haya creado el código de cupón, ¡es hora de incluirlo en las páginas de productos relevantes! Para hacer eso, vaya a Divi Theme Builder y agregue una nueva plantilla.

Usar en

Utilice esta nueva plantilla en la categoría de productos con descuento.

• Usar en: Producto en una categoría de producto específica: Descuento

5. Reutilice el cuerpo de la página del producto global para una nueva plantilla

Arrastre el cuerpo de la plantilla de producto al cuerpo de la nueva plantilla

Puede reutilizar el cuerpo de la plantilla de la página de su producto normal simplemente arrastrándolo a su nueva plantilla. En este tutorial, usamos el diseño de página de producto en negrita que hemos creado en otro tutorial. Puede descargar el archivo JSON del diseño en la publicación del blog.

6. Agregue la barra de código de cupón superior al cuerpo de la nueva plantilla

Entrar en el editor de plantillas de cuerpo

Una vez que haya agregado el cuerpo de la página del producto a su nueva plantilla, puede comenzar a editarlo. Los cambios que realice en esta plantilla solo aparecerán en las páginas de productos que forman parte de la categoría de productos con descuento.

Agregar nueva sección al principio

Dentro del editor de plantillas, lo primero que haremos es agregar una nueva sección en la parte superior.

Color de fondo

Abra la configuración de la sección y cambie el color de fondo.

• Color de fondo: # e02b20

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Animación

Complete la configuración de la sección agregando una animación.

• Estilo de animación: diapositiva
• Dirección de animación: Abajo
• Duración de la animación: 1500ms
• Retraso de animación: 1000 ms
• Opacidad inicial de la animación: 100%
• Curva de velocidad de animación: Ease-In-Out
• Repetición de animación: una vez

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Abra la configuración de la fila y permita que la fila ocupe todo el ancho del contenedor de la sección.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Columna 1

Espaciado

Luego, abra la configuración de la columna 1 y agregue un poco de relleno superior e inferior.

• Acolchado superior: 25px
• Acolchado inferior: 25px

Columna 2

Color de fondo

Abra también la configuración de la columna 2 y agregue un color de fondo blanco.

• Color de fondo: #ffffff

Espaciado

Agregue un poco de relleno personalizado superior e inferior a esta columna también.

• Acolchado superior: 20px
• Acolchado inferior: 20px

Frontera

E incluya un radio de borde superior izquierdo y derecho.

• Arriba a la izquierda + Arriba a la derecha: 30px

Agregar módulo de texto a la columna 1

Agregar contenido

El primer y único módulo que necesitamos en la columna 1 es un módulo de texto. Ingrese alguna copia de su elección.

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:

• Fuente de texto: Montserrat
• Color del texto: #ffffff
• Tamaño del texto: 16px
• Alineación de texto: centro

Agregar módulo de texto a la columna 2

Agregar código de cupón al cuadro de contenido

En la segunda columna, agregue otro módulo de texto con el código de descuento que agregó en la primera parte del tutorial.

Configuración de texto

Cambie la configuración de texto del módulo de la siguiente manera:

• Fuente de texto: Montserrat
• Peso de la fuente del texto: Pesado
• Color del texto: # 000000
• Tamaño del texto: 19px
• Alineación de texto: centro

Dimensionamiento

Luego, modifique la configuración de tamaño.

• Ancho: 50%
• Alineación del módulo: centro

Espaciado

Agregue un poco de relleno en la parte inferior también.

• Acolchado inferior: 10px

Frontera

Y complete la configuración del módulo agregando un borde inferior.

• Ancho del borde inferior: 1 px
• Color del borde inferior: # 333333

7. Guarde los cambios del Creador de temas y vea el resultado

Una vez que haya completado la página del producto modificado, puede guardar los cambios de la plantilla, salir del Creador de temas y ver el resultado en las páginas del producto con descuento.

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo crear una barra de código de cupón y permitir que aparezca automáticamente en las páginas de productos que son elegibles para el código de cupón en cuestión. Esta es una excelente manera de brindar un incentivo adicional a los visitantes para que compren sus productos. ¡También pudo descargar el archivo JSON de plantilla de forma gratuita! Si tiene alguna pregunta, asegúrese de dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.