Cómo agregar dinámicamente una barra de código de cupón a ciertas páginas de productos con div Div

Al ejecutar una tienda en línea que creó con Div y WooCommerce, ocasionalmente querrá mostrar códigos de cupón en su sitio web para aumentar la sensación de emergencia. En la web, notará que muchas tiendas en línea comparten los códigos de cupón en un bar que está pegado a la parte superior de la página. Ahora, con el creador de temas de Div, puede agregar automáticamente dicho 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 hacer esto. Hay varias partes de este tutorial, desde la configuración del código de cupón hasta la creación de una plantilla de producto separada para productos en la categoría de descuento. ¡Podrá descargar el archivo JSON de la plantilla de forma gratuita! El estilo general que utilizamos se basa en el aspecto audaz de la página del producto que distribuimos en el pasado.
¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue la plantilla de producto de forma gratuita para poner su mano en la plantilla de página del producto, primero deberá descargarla con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
La presentación general del tutorial
Asegúrese de tener Divin 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 para 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 solo se aplique a la categoría de producto que creamos
Dentro del constructor de temas, crearemos una nueva plantilla para esa categoría de producto
Reutilizaremos el cuerpo normal de la página del producto para esta plantilla y agregaremos un código de barras de cupón superior utilizando las opciones in otorgadas de DIV
1. Cree una nueva categoría de productos de descuento Vaya a las categorías de productos y agregue una nueva categoría de productos de descuento que comience instalando el complemento de WooCommerce en su sitio de WordPress y agregue una nueva categoría de productos dedicada a todos los productos elegibles para el nuevo descuento. Si tiene la intención de usar el código de cupón para las categorías de productos existentes, puede usarlas en su lugar.
2. Permita que los productos sean una nueva categoría de descuentos Editar el producto, entonces abra los productos que desea incluir para la venta. Manee los productos a una nueva categoría de descuento e incluya en la nueva categoría de productos de descuento.

3. Cree los cupones de acceso al código de cupón de WooCommerce y agregue un nuevo cupón que la siguiente parte de este tutorial se encargue de crear un nuevo código de cupón. Vaya a los cuentos de WordPress> cupones> y haga clic en “Crear el primer cupón”.

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

Código de descuento: agregar código de reducción

Tipo de descuento: Reducción porcentual
Valor de cupón: agregue el porcentaje
Fecha de vencimiento del cupón: seleccione la fecha
Agregue las restricciones de uso y luego, cambie para usar la restricción y asegúrese de que el código de cupón solo funcione para productos en su categoría de productos de descuento.
Categorías de productos: descuento

4. Agregue una nueva plantilla para la categoría de descuento Agregue una nueva plantilla una vez que haya creado el código de cupón, ¡es hora de incluirla en las páginas de productos relevantes! Para hacer esto, vaya a la división del constructor de temas y agregue una nueva plantilla.
Use activado Use esta nueva plantilla en la categoría de producto de descuento.

Uso en: producto en la categoría de producto específico: descuento

5. Reutilice el cuerpo de la página global del producto para la nueva plantilla Tire del cuerpo de la plantilla del producto en el cuerpo de la nueva plantilla. Puede reutilizar el cuerpo habitual de la plantilla del producto, deslizándola en la nueva plantilla. En este tutorial, utilizamos el aspecto audaz de la página del producto que hemos creado en otro tutorial. Puede descargar el archivo JSON de la aparición en la publicación del blog.6. Agregue la barra superior del código de cupón al cuerpo de la nueva plantilla Ingrese el cuerpo de la plantilla del cuerpo después de haber agregado el cuerpo del producto a su nueva plantilla, puede comenzar a editarlo. Los cambios realizados en esta plantilla aparecerán solo en las páginas de productos que pertenecen a la categoría de productos con descuento.
Agregue una nueva sección a la parte superior al editor de plantillas, lo primero que haremos es agregar una nueva sección a la parte superior.

El color de fondo abre la configuración de la sección y cambia el color de fondo.


Color de fondo: # E02B20

El espacio elimina todas las deflantes predeterminadas y sin fondo.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Animación Complete la configuración de la sección agregando una animación.
Estilo de animación: diapositiva
Dirección de la animación: Down

Duración de animación: 1500 ms
Animación de retraso: 1000 ms
Opacidad de animación para comenzar: 100%
Curva de velocidad de animación: limpieza de la entrada de facilidad
Repita la animación: una vez
Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:
Dimensión Abra la configuración de la fila y permita que la fila ocupe todo el ancho del contenedor de sección.
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1

Equalalizar las alturas de la columna: Daspatie Retire todos los rellenos predeterminados y sin fondo.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Espacio de la columna 1, luego abra la configuración de la columna 1 y agregue un poco de relleno superior e inferior.

Revestimiento superior: 25 px
Finamiento inferior: 25 PX
Columna 2 Color de fondo Abierto y configuración de columna 2 y agregue un color de fondo blanco.

Color de fondo: #ffffff
Espacio agregue algunos rellenos personalizados en la parte superior e inferior y a esta columna.
Revestimiento superior: 20 px

Finamiento inferior: 20 PX
Borde e incluye un rayo de arriba y derecha.

Arriba a la izquierda + hacia arriba: 30 PX
Agregue un módulo de texto a la columna 1 Agregar contenido primero y la única forma en que necesitamos en la columna 1 es un módulo de texto. Ingrese una copia de su elección.
Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto en consecuencia:

Texto de fuente: Montserrat
Color de texto: #ffffff

Tamaño de texto: 16 PX

Alineación de texto: Centro
Agregue un módulo de texto a la columna 2 Agregue un código de cupón al cuadro de contenido a 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:
Texto de fuente: Montserrat
Texto de la fuente de peso: duro

Color de texto: # 000000

Tamaño del texto: 19 PX
Alineación de texto: Centro
Dimensión luego cambie la configuración de dimensionamiento.
Ancho: 50%
Alineación del módulo: centro
Espacio agregue un poco de relleno de fondo.

Finamiento inferior: 10 PX
Borde y complete la configuración del módulo agregando un borde inferior.
Ancho del borde inferior: 1 pxculor del Chenar inferior: # 333333

7. Guarde los cambios del fabricante y vea el resultado después de completar la página de producto modificada, puede guardar los cambios de plantilla, ¡puede salir del generador de temas y puede ver el resultado en los productos de descuento!
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio

Móvil
Pensamientos finales En esta publicación, le mostré cómo crear una barra de cupón y permitirles aparecer 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 proporcionar incentivos adicionales para comprar sus productos. Si tiene alguna pregunta, asegúrese de dejar un comentario en la sección de comentarios a continuación. Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.