Cuando ejecuta una tienda en línea que ha 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 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. Hay varias partes en este tutorial, desde la configuración del código de cupón hasta la creación de una plantilla de producto separada para los productos en la categoría de descuento. ¡También podrá descargar el archivo JSON de la plantilla de forma gratuita! El estilo general que estamos usando se basa en el diseño de página de producto en negrita que hemos compartido en el pasado.
¡Hagámoslo!
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 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.
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!
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. Crear nueva categoría de producto con descuento
Vaya a Categorías de productos y agregue una nueva categoría de producto con descuento
Comience instalando el complemento WooCommerce en su sitio web de WordPress y agregue una nueva categoría de productos 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 la nueva categoría de descuento
Editar producto
Luego, abre los productos que deseas incluir en la venta.
Asignar productos a la nueva categoría de descuento
E incluirlos en la nueva categoría de productos con descuento.
3. Crear 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
- Importe del cupón: Añadir porcentaje
- Fecha de caducidad del cupón: Seleccionar 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. Agregue una 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, ve a Divi Theme Builder y agrega una nueva plantilla.
Usar en
Utilice esta nueva plantilla en la categoría de productos con descuento.
- Usar en: Producto en Categoría de producto específica: Descuento
5. Reutilice el cuerpo de la página del producto global para la nueva plantilla
Arrastre el cuerpo de la plantilla del 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, estamos usando 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
Introduzca 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 a la parte superior
Dentro del editor de plantillas, lo primero que haremos será 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
Elimine todo el relleno superior e inferior predeterminado a continuación.
- Relleno superior: 0px
- Relleno 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
- Retardo de animación: 1000ms
- Opacidad inicial de animación: 100%
- Curva de velocidad de animación: Facilidad de entrada y salida
- Repetición de animación: una vez
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila a la sección utilizando 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 del canalón: 1
- Igualar alturas de columna: Sí
Espaciado
Elimine todo el relleno superior e inferior predeterminado a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
columna 1
Espaciado
Luego, abra la configuración de la columna 1 y agregue un poco de relleno superior e inferior.
- Relleno superior: 25px
- Relleno inferior: 25px
columna 2
Color de fondo
Abra la configuración de la columna 2 también y agregue un color de fondo blanco.
- Color de fondo: #ffffff
Espaciado
Agregue también un relleno superior e inferior personalizado a esta columna.
- Relleno superior: 20px
- Relleno inferior: 20px
Borde
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. Introduzca alguna copia de su elección.
Configuración de texto
Pase a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:
- Fuente del 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, agrega otro módulo de texto con el código de descuento que agregaste en la primera parte del tutorial.
Configuración de texto
Cambie la configuración de texto del módulo de la siguiente manera:
- Fuente del texto: Montserrat
- Peso de fuente de 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 inferior también.
- Relleno inferior: 10px
Borde
Y complete la configuración del módulo agregando un borde inferior.
- Ancho del borde inferior: 1px
- Color del borde inferior: #333333
7. Guarde los cambios del generador de temas y vea el resultado
Una vez que haya completado la página del producto modificado, puede guardar los cambios en la plantilla, salir del Generador de temas y ver el resultado en las páginas de productos 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 dar un incentivo adicional a los visitantes para que compren sus productos. ¡También pudo descargar el archivo JSON de la 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 regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.