El bloque Carrito te permite integrar sin problemas un carrito de compras de WooCommerce en cualquier página de SeedProd. Muestra los artículos que un cliente ha añadido, proporciona actualizaciones del carrito en tiempo real y te da control total sobre el estilo visual del carrito, desde los colores de los campos y el diseño de los botones hasta la tipografía y la configuración de los bordes.
Utiliza este bloque para crear una página de carrito de WooCommerce totalmente personalizada que coincida con tu marca, sin tocar ningún código. Una vez publicada tu página, simplemente designarla como tu página de carrito en la configuración de WooCommerce para que los clientes sean dirigidos a ella automáticamente.
Añadir el bloque Carrito a tus páginas
Sigue estos pasos para añadir un bloque Carrito a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques > WooCommerce, arrastra y suelta el bloque Carrito en la sección deseada de tu página.
Paso 2: Configurar los ajustes de estilo
Una vez añadido, haz clic en el bloque Carrito para abrir sus ajustes. En la pestaña Estilos, los ajustes están organizados en cinco secciones.
Encabezados:
- Color del encabezado: Establece el color del texto para los encabezados de sección dentro del carrito.
Botones:
- Estilo del botón: Elige un estilo visual para los botones del carrito: Plano, 2D, Vintage, Fantasma o Enlace.
- Color del botón: Establece el color de fondo para los botones de acción del carrito.
- Radio del borde: Ajusta la redondez de las esquinas de los botones del carrito usando un deslizador.
Campos:
- Color de fondo del campo: Establece el color de fondo de los campos de entrada dentro del carrito (como los campos de código de cupón y cantidad).
- Color del texto del campo: Establece el color del texto dentro de los campos de entrada.
- Color del borde del campo: Establece el color del borde de los campos de entrada.
- Ancho del borde del campo: Establece el grosor del borde en cada lado de los campos de entrada.
Alertas:
- Color de resaltado de información: Establece el color utilizado para los mensajes de alerta informativos.
- Color de resaltado de error: Establece el color utilizado para los mensajes de alerta de error.
- Color de resaltado de éxito: Establece el color utilizado para los mensajes de alerta de éxito.
Carrito:
- Color del borde del carrito: Establece el color del borde del contenedor del carrito.
- Ancho del borde del carrito: Establece el grosor del borde en cada lado del contenedor del carrito.
- Radio del borde: Ajusta la redondez de las esquinas del contenedor del carrito usando un deslizador.
- Color de fondo: Establece el color de fondo del contenedor del carrito.
- Color del texto: Establece el color general del texto dentro del carrito.
- Familia de fuentes: Elige la fuente utilizada para el texto del cuerpo del carrito.
- Color de fondo del encabezado: Establece el color de fondo de la fila del encabezado del carrito.
- Familia de fuentes del encabezado: Elige la fuente utilizada para el texto del encabezado del carrito.
- Color de encabezado: Establece el color del texto de la fila de encabezado del carrito.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes personalizar aún más el diseño y el comportamiento de tu bloque de Carrito.
Espaciado:
- Margen: Establece el espaciado exterior alrededor del bloque en los cuatro lados, con controles independientes para escritorio, tableta y móvil.
- Relleno: Establece el espaciado interior dentro del contenedor del bloque en los cuatro lados, con controles por dispositivo.
Atributos:
- Clase personalizada: Añade una o más clases CSS personalizadas al contenedor del bloque para una estilización específica.
- ID CSS: SeedProd genera automáticamente un ID CSS único para este bloque. Puedes usarlo para referenciar el bloque en CSS o JavaScript personalizado.
- Atributos personalizados: Añade atributos HTML personalizados al elemento contenedor del bloque. Introduce cada atributo en una línea nueva usando el formato clave|valor.
Visibilidad del Dispositivo:
- Ocultar en escritorio: Activa para ocultar el bloque cuando se ve en pantallas de escritorio.
- Ocultar en tableta: Activa para ocultar el bloque cuando se ve en pantallas de tableta.
- Ocultar en móvil: Activa para ocultar el bloque cuando se ve en pantallas móviles.
Efectos de Animación:
- Efecto de desplazamiento: Aplica una animación activada por desplazamiento al bloque, incluyendo opciones de Desplazamiento Vertical y Desplazamiento Horizontal con controles de dirección, velocidad y desplazamiento de la ventana gráfica.
- Efecto del ratón: Aplica un efecto de paralaje impulsado por el movimiento del ratón al bloque.
Paso 4: Establecer como tu página de carrito de WooCommerce
Después de publicar tu página, navega a WooCommerce > Ajustes > Avanzado y establece tu nueva página de SeedProd como la página de carrito designada. Esto asegura que los clientes sean enviados a tu página de carrito personalizada cuando hagan clic en el icono del carrito o procedan desde una página de producto.
Paso 5: Guardar tus cambios
Una vez que hayas terminado de configurar el bloque de Carrito y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Carrito a tu página! Con control total sobre los estilos de los botones, los colores de los campos, la tipografía y el estilo del contenedor del carrito, puedes crear una experiencia de carrito de WooCommerce que se sienta completamente nativa de tu marca. No olvides asignar la página como tu página de carrito en la configuración de WooCommerce para que tus clientes siempre aterricen en el lugar correcto.