Cómo agregar un módulo de notificación WOO a la plantilla de página del producto

La confirmación y la retroalimentación son elementos importantes para cualquier página de comercio electrónico. El usuario quiere saber qué sucedió después de hacer clic en un botón para comprar un producto. También quiero una manera fácil de ver qué hay en su cochecito. El módulo Divic Divic Woo Nottic ofrece estas características exactas para sus páginas de productos WooCommerce. En este artículo, veremos cómo estilizar y agregar un módulo de Notificación de Woo a su página de productos de la Divica. También discutiremos por qué necesita uno y la mejor ubicación para agregarlo. Vamos a empezar. Vista previa primero, veamos lo que construiremos.
Módulo de notificación Woo en el escritorio

Módulo de notificación Woo en móvil

Descargar plantilla para la página de productos de WooCommerce

Primero, obtengamos una plantilla de producto de WooCommerce para el constructor de temas. Puede construir uno desde cero o descargar uno del blog elegante de temas. Busque en el blog “Plantilla de página del producto” y descargue el archivo archivado. Utilizo la plantilla de página de producto gratuita para la tienda de ropa de la Divic.

Luego descomprima el archivo. Para importarlo en el creador de temas Divin, vaya a Div> Temo Builder en el tablero de WordPress, seleccione Portabilidad, haga clic en la pestaña Importar, navegar y seleccione su archivo JSON y haga clic en Importar plantillas de Builder Divic. Guarde su configuración, el archivo se asigna automáticamente a todas las páginas de productos.
Div
Creador de temas
Portabilidad
Importar
Seleccione su archivo
Plantillas impretas divide temas constructor
ahorrar
¿Qué hace el módulo de notificación Woo?

El módulo de aviso WOO hace dos cosas importantes: 1: le da al usuario retroalimentación de que ha introducido con éxito el artículo en el carrito de compras. 2 – Proporciona un enlace al carrito de compras donde pueden ver los artículos en su carrito. El módulo de notificación WOO tiene opciones para las páginas de productos WOO, la página de canasta y la página de compra. La segunda opción muestra la condición de la canasta y la información sobre el cupón. El tercero muestra un campo de conexión junto con un campo de cupón. Usaremos la primera opción: la página del producto.

Puede mostrarlo para el producto actual, el producto más reciente o para cualquier producto que elija de la lista.

A diferencia de otros módulos WOO, el módulo de notificación WOO se muestra en la página solo en ciertas condiciones. Solo es visible si el usuario agrega el producto al carrito. Este ejemplo muestra la página del producto cuando el producto no se agrega al carrito.

Una vez que el producto se agrega a la canasta, aparece el módulo. Agregue el módulo de notificación WOO

Como todos los módulos Woo en Divi Builder, el módulo de aviso WOO es solo una opción si tiene WooCommerce instalado. Para agregar el módulo, haga clic en el icono Gray Plus, busque aviso de woo y seleccione el módulo. Muchas de las plantillas de la página del producto incluyen el módulo de notificación WOO.

Dónde colocar el módulo de notificación Woo
La mejor ubicación para el módulo de Notificación de WOO es en la parte superior de la página, debajo de las migas de pan. Esto se destacará al usuario y es la ubicación que esperaría ver este tipo de información.

Podemos ver la estructura de alambre en esta vista que el módulo se coloca sobre la información del producto. Cómo estilo módulo de notificación Woo con estilo

La plantilla que uso ya tiene el módulo estilizado. Veremos este estilo si desea agregarlo y luego lo peinaremos de una manera diferente, utilizando las colas de diseño en el paquete de apariencia y el encabezado y el sótano para la ropa del paquete de apariencia. Incluye un botón que cambia su color cuando pasa el cursor. Primero, haga el fondo blanco.

Antecedentes: #ffffff

Pestaña de diseño
Elija la pestaña de diseño y seleccione Didact Gothic para la fuente de título. Haga la fuente negra y la altura de la línea de ajuste a 2EM.
Título de la fuente: Didact Gothic

De color negro
Altura de línea: 2em
Estilos de Butry
Desplácese hacia abajo hasta el botón y active estilos personalizados. Establezca el tamaño de texto en 12 px. Para las opciones de escritorio, configure el color del texto en blanco y el fondo en negro.
Use el botón: Sí

Tamaño de texto: 12px
Color de texto: #ffffff
Color de fondo: #000000
Elija opciones de desplazamiento y configure el color de texto en color negro y de fondo en #F8Ded5.
Color de texto con mouse: #000000

El color de fondo colocado: #f8ded5
Establezca el ancho y el rayo del borde a 0px, espaciando las letras a 3px, el peso de la fuente en Bold y el estilo de fuente en TT.
Ancho óseo: 0px

Chenar Radius: 0px
Espacio entre letras: 3px
Peso de fuente: en negrita
Estilo de fuente: TT
Seleccione para mostrar el icono del botón, elija una flecha a la derecha y elija mostrar la flecha al cruzar el cursor.
Muestra el icono del botón: Sí


Icono: flecha a la derecha a la derecha
Solo muestre el icono cuando el cursor pasa para el botón: Sí
Luego tendremos que agregar un poco de botón para darle un poco de espacio alrededor del texto. Agregue 15 px a la parte superior e inferior y 30 px al lado izquierdo y derecho. Recuerde, este no es el relleno para el modo. Lo agregaremos en un minuto. BUTS: 15 PX (arriba, abajo), 30 PX (izquierda, derecha)
Desplácese hacia abajo hasta el espacio. Agregue el margen 0EM en todos los lados y el acolchado de 15 px por todos los lados. Estas son la configuración predeterminada. Cierre la configuración.

Marja: 0em (todas las partes)
Llenado: 15px (todas las piezas)

Configuración de fila
A continuación, tenemos que hacer algunos ajustes a la configuración de la fila. Abra la configuración y seleccione la pestaña Diseño. Elija usar el ancho de canalones personalizado. Establezca el ancho de la canaleta en 1 y el ancho al 94%.
Use el ancho de canaleta personalizado: sí
El ancho de la canaleta: 1

Ancho: 94%
Finalmente, desplácese hacia abajo hasta el espacio y agregue un relleno de 20 px a la parte superior y 10 PX en la parte inferior. Cierre su configuración y guarde su trabajo.
Revestimiento: 20px desde arriba, 10px desde abajo
Otro estilo personalizado para el módulo de notificación Woo

Luego agregue y estille un módulo de notificación Woo desde cero. Para esto, eliminaremos el original y agregaremos el nuestro. Haga clic en el icono Gray Plus, busque el aviso de Woo y agréguelo a la fila superior debajo del módulo Woo BreadRumbs. Para diseñarlo, utilizaremos ideas de la apariencia. Usaremos la misma fila que la original, por lo que su configuración es la misma que en el ejemplo anterior.
En la configuración de aviso de WOO, desplácese hacia abajo hasta la configuración de fondo y elija el gradiente. Establezca el primer color en blanco y el segundo color en #F8D5. La dirección del gradiente debe establecerse en 90 grados, y las posiciones de inicio y finalización establecidas en 50%. Esto le dará un diseño de color que es el producto de espejo de sección. El primer gradiente: #ffffff
Segundo gradiente: #f8ded5

Dirección de gradiente: 90 grados

Posición de inicio: 50%
Posición final: 50%
Pestaña de diseño
Luego seleccione la pestaña Diseño y elija Enseñar gótico para la fuente de título. Haga la fuente negra, el tamaño del escritorio 20px, el tamaño del teléfono 15px y la altura de la línea 2EM.
Título de la fuente: Didact Gothic
Color: #000000
Tamaño de texto: 20px (15px para el teléfono)

Altura de línea: 2em
Estilos de Butry
Desplácese hacia abajo hasta el botón y seleccione usando estilos personalizados. Establezca el tamaño de texto en 12 PX para el escritorio y el tamaño de texto del teléfono en 10 PX. Para opciones de escritorio, configure el color de texto en negro y fondo en #F7EEE8.
Use estilos personalizados para el botón: Sí
Tamaño de texto: 12px (10px para el teléfono)
Color de texto: #000000

Color de fondo: #F7EEE8
Elija la opción de desplazamiento para el color de fondo y configúrelo en #D8DAD5.
El color de fondo colocado: #d8dad5
Frontera
Coloque el ancho del borde en 1px, radio a 30 px, espaciando las letras a 3 px, el peso de la fuente en el estilo en negrita y el estilo de fuente en TT. Deje la configuración del icono de su botón en predeterminado. Esto mostrará el icono al pasar el cursor e incluirá la flecha predeterminada a la derecha.

Ancho óseo: 1px
Chenar Radius: 30px
Espacio entre letras: 3px

Peso de fuente: en negrita
Estilo de fuente: TT
Muestre el icono del botón: dapictograma: săgeat a la derecha a la derecha
Solo muestre el icono cuando el cursor pasa para el botón: Sí
Luego necesitaremos agregar un poco de botón para aumentar el tamaño del botón alrededor del texto del botón. Agregue 15 px a la parte superior e inferior y 30 px al lado izquierdo y derecho.
Botones: 15 px (arriba, abajo), 30 px (izquierda, derecha)
Finalmente, desplácese hacia abajo hasta la frontera. Agregue 40px en todos los lados. Esto nos da un modo redondeado que coincida con el diseño del aspecto. Cierre su configuración y guarde su trabajo.
Esquina redondeada: 40 PX (todas las partes)
Resultados Así es como se ve nuestro módulo de aviso WOO tanto en escritorio como en dispositivos móviles. Módulo de notificación Woo en el escritorio

Módulo de notificación Woo en móvil
Pensamientos finales Esta es nuestra apariencia sobre cómo estilizar y agregar un módulo de notificación WOO a la plantilla de página del producto de la Divic. Este módulo agrega mucha información al usuario y el usuario esperará ver esta información. Esto les da los comentarios que están esperando. Sabrán de inmediato que se ha agregado un producto a su carrito y tendrá una manera fácil de ver su canasta. Este módulo es fácil de usar y debe incluirse en la parte superior de cada plantilla de producto de la división de WooCommerce. Queremos escuchar de ti. ¿Utiliza el módulo de notificación WOO en las plantillas de la página del producto de la Divic? Dinos en los comentarios.