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 cupones en una barra que está pegada en la parte superior de la página. Ahora, con Divi’s Theme Builder, 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.

¡Hagámoslo!

Avance

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

Escritorio

barra de código de cupón

Móvil

barra de código de cupón

 

Resumen del tutorial

  • Asegúrese de tener Divi y el complemento WooCommerce instalado 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 producto.
  • 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 productos 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.

barra de código de cupón

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

Editar producto

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

barra de código de cupón

Asignar productos a una nueva categoría de descuento

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

barra de código de cupón

3. Crear código de cupón de WooCommerce

Ir a cupones y agregar nuevo cupón

La siguiente parte de este tutorial maneja 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’ .

barra de código de 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
  • Cantidad de cupón: Agregar porcentaje
  • Fecha de vencimiento del cupón: seleccione la fecha

barra de código de cupón

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 descuento.

  • Categorías de productos: descuento

barra de código de cupón

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 al Divi Theme Builder y agregue una nueva plantilla.

barra de código de cupón

Usar en

Use esta nueva plantilla en la categoría de producto de descuento.

  • Uso en: Producto en Categoría de producto específica: Descuento

barra de código de cupón

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

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

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

barra de código de cupón

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

Entrar al 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 de descuento.

barra de código de cupón

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.

barra de código de cupón

Color de fondo

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

  • Color de fondo: # e02b20

barra de código de cupón

Espaciado

Elimine todos los rellenos superiores e inferiores predeterminados a continuación.

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

barra de código de cupón

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: 1500 ms
  • Retraso de animación: 1000 ms
  • Opacidad de inicio de animación: 100%
  • Curva de velocidad de animación: facilidad de entrada y salida
  • Repetición de animación: una vez

barra de código de cupón

Agregar nueva fila

Estructura de columna

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

barra de código de cupón

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 personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí

barra de código de cupón

Espaciado

Elimine todos los rellenos superiores e inferiores predeterminados a continuación.

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

barra de código de cupón

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

barra de código de cupón

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

barra de código de cupón

Espaciado

Agregue también algunos rellenos superiores e inferiores personalizados a esta columna.

  • Relleno superior: 20px
  • Relleno inferior: 20px

barra de código de cupón

Frontera

E incluya un radio de borde superior izquierdo y derecho.

  • Superior izquierda + Superior derecha: 30px

barra de código de cupón

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 una copia de su elección.

barra de código de cupón

Configuraciones de texto

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

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

barra de código de cupón

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.

barra de código de cupón

Configuraciones de texto

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

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

barra de código de cupón

Dimensionamiento

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

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

barra de código de cupón

Espaciado

Agregue un poco de relleno inferior también.

  • Relleno inferior: 10px

barra de código de cupón

Frontera

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

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

barra de código de cupón

7. Guardar los cambios del generador de temas y ver el resultado

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

barra de código de cupón

barra de código de cupón

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!