Documentación de SeedProd

Documentación, materiales de referencia y tutoriales para SeedProd

Bloque Menú Carro

El bloque «Menú Carrito» 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 que indica el número de artículos, lo que facilita a los compradores ver lo que hay en su carrito y navegar hasta la página de pago desde cualquier página que crees.

Opcionalmente, puede 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 imagen de marca de su tienda.

Requisitos:El bloque Menu Cart requiere que WooCommerce esté instalado y activo. Está disponible en elplan de licencia Elite.

Ejemplo de bloque de carrito de menú

Añadir el bloque de menú de carrito a tus páginas

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

Paso 1: Añadir el bloque

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

Arrastrar el bloque «Menu Cart» a una página de SeedProd.

Paso 2: Configurar los ajustes de contenido

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

  • Ocultar cuando esté vacío: activa esta opción para ocultar completamente el icono del carrito cuando el carrito del comprador no contenga ningún artículo.
  • Mostrar subtotal: activa esta opción para mostrar el subtotal del carrito junto al icono del carrito.
  • Alineación: Establece la alineación horizontal del icono del carrito: izquierda, centro o derecha.
Configuración del contenido del bloque del carrito del menú

Paso 3: Personalizar el diseño

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

Estilos:

  • Tipografía: ajusta la familia tipográfica, el grosor de la fuente, el tamaño, la altura de línea, el espaciado entre letras y la transformación del texto para el subtotal y cualquier texto que se muestre con el icono del carrito. Admite valores por dispositivo para ordenadores de sobremesa, tabletas y móviles.
  • Color: Establece el color del icono del carrito y del texto del subtotal.
  • Color de la insignia: Establece el color de fondo de la insignia que indica el número de artículos y que aparece en el icono del carrito.
  • Color del texto de la insignia: Establece el color del texto del número de elementos que se muestra dentro de la insignia.

Espaciado:

  • Margen: controla el espacio exterior alrededor del bloque Menú Carrito (superior, derecho, inferior, izquierdo). Admite valores por dispositivo para ordenadores de sobremesa, tabletas y móviles.
  • Relleno: Ajusta el espacio interior dentro del bloque Menú Carrito (Arriba, Derecha, Abajo, Izquierda). Admite valores por dispositivo para ordenadores de sobremesa, tabletas y móviles.

Atributos:

  • CSS ID: Muestra el identificador único generado automáticamente para tu bloque Menu Cart, creado automáticamente por SeedProd para personalizar el estilo o la orientación de JavaScript.
  • Clase personalizada: añade clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
  • Atributos personalizados: añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una nueva línea utilizando el formato: nombre-del-atributo|valor.

Visibilidad del dispositivo:

  • Ocultar en el escritorio: Ocultar el bloque del carrito del menú en las pantallas de escritorio.
  • Ocultar en tableta: Ocultar el bloque del carrito del menú en dispositivos tablet.
  • Ocultar en dispositivos móviles: Ocultar el bloque del carrito del 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 del menú carrito aparezca en pantalla, como Rebotar, Aparecer gradualmente, Acercar, Girar y muchos más.
Configuración avanzada del bloque del carrito del menú

Paso 4: Guarde los cambios

Una vez que haya terminado de configurar el bloque Menú Carrito y personalizar su apariencia, asegúrese de guardar su trabajo.


¡Has añadido correctamente un bloque de carrito de menú a tu página! Colocar un icono de carrito en el encabezado o en el área de navegación ayuda a los compradores a realizar un seguimiento de sus selecciones y los anima a finalizar la compra. Utiliza la configuración de color de la insignia para resaltar el recuento de artículos y la opción Mostrar subtotal para que los compradores puedan ver de un vistazo el total de su pedido.

Artículos relacionados