Documentación de SeedProd

Documentación, Materiales de Referencia y Tutoriales para SeedProd

Bloque de carrito del menú

El bloque Carrito de Menú te permite añadir un icono de carrito de la compra de WooCommerce a cualquier página de SeedProd. Este bloque muestra un icono de carrito con una insignia de recuento de artículos, lo que facilita a los compradores ver lo que hay en su carrito y navegar al pago desde cualquier página que crees.

Opcionalmente, puedes mostrar el subtotal del carrito junto al icono, controlar su alineación y personalizar completamente el color del icono, el color de la insignia y el color del texto de la insignia para que coincida con la marca de tu tienda.

Requisitos: El bloque Carrito de Menú requiere que WooCommerce esté instalado y activo. Está disponible en el plan de licencia Elite licencia.

Ejemplo de bloque Carrito de menú

Añadir el Bloque Carrito de Menú a tus Páginas

Sigue estos pasos para añadir un bloque Carrito de Menú a tu página de SeedProd:

Paso 1: Añadir el Bloque

En Diseño > Bloques, arrastra y suelta el bloque Carrito de Menú en la sección deseada de tu página.

Arrastrar el bloque Carrito de menú a una página de SeedProd

Paso 2: Configurar los Ajustes de Contenido

Una vez añadido, haz clic en el bloque Carrito de Menú para abrir su configuración. En la pestaña Contenido, configura cómo se muestra el icono del carrito.

  • Ocultar si está vacío: Activa esta opción para ocultar completamente el icono del carrito cuando el carrito del comprador no contenga artículos.
  • Mostrar subtotal: Activa esta opción para mostrar el importe del subtotal del carrito junto al icono del carrito.
  • Alineación: Establece la alineación horizontal del icono del carrito: Izquierda, Centro o Derecha.
Ajustes de contenido del bloque Carrito de menú

Paso 3: Personaliza el Diseño

En la pestaña Avanzado, puedes personalizar la apariencia y el espaciado de tu bloque Carrito de Menú.

Estilos:

  • Tipografía: Ajusta la familia de fuentes, el grosor, el tamaño, la altura de línea, el espaciado entre letras y la transformación del texto para el subtotal y cualquier texto mostrado con el icono del carrito. Admite valores por dispositivo para escritorio, tableta y móvil.
  • Color: Establece el color del icono del carrito y el texto del subtotal.
  • Color de la insignia: Establece el color de fondo de la insignia de recuento de artículos que aparece en el icono del carrito.
  • Color del texto de la insignia: Establece el color del texto del número de recuento de artículos mostrado dentro de la insignia.

Espaciado:

  • Margen: Controla el espaciado exterior alrededor de tu bloque Carrito de Menú (Superior, Derecho, Inferior, Izquierdo). Admite valores por dispositivo para escritorio, tableta y móvil.
  • Relleno: Ajusta el espaciado interior dentro de tu bloque Carrito de Menú (Superior, Derecho, Inferior, Izquierdo). Admite valores por dispositivo para escritorio, tableta y móvil.

Atributos:

  • ID de CSS: Muestra el identificador único autogenerado para tu bloque Carrito de Menú, creado automáticamente por SeedProd para estilos personalizados o para apuntar con JavaScript.
  • Clase Personalizada: Agregue clases CSS personalizadas para aplicar estilos específicos de su tema o CSS personalizado.
  • Atributos Personalizados: Agregue cualquier atributo HTML al elemento contenedor del bloque. Ingrese cada atributo en una nueva línea usando el formato: nombre-atributo|valor.

Visibilidad del Dispositivo:

  • Ocultar en escritorio: Oculta el bloque Carrito de Menú en pantallas de escritorio.
  • Ocultar en tableta: Oculta el bloque Carrito de Menú en dispositivos tableta.
  • Ocultar en móvil: Oculta el bloque Carrito de Menú en dispositivos móviles.

Efectos de Animación:

  • Animación de entrada: Elige un efecto de animación que se reproduzca cuando el bloque Carrito de Menú aparezca en la vista, como Rebote, Fundido de entrada, Zoom de entrada, Girar de entrada y muchos más.
Ajustes avanzados del bloque Carrito de menú

Paso 4: Guarde sus Cambios

Una vez que hayas terminado de configurar el bloque Carrito de menú y personalizado su apariencia, asegúrate de guardar tu trabajo.


¡Has añadido con éxito un bloque Carrito de menú a tu página! Colocar un icono de carrito en tu encabezado o área de navegación ayuda a los compradores a hacer un seguimiento de sus selecciones y los dirige al pago. Utiliza los ajustes de color de la insignia para que el recuento de artículos destaque, y la opción Mostrar subtotal para dar a los compradores una vista rápida del total de su pedido.

Artículos Relacionados