Ir al contenido principal

¿Cómo puedo editar el color del carrito de integración en mi sitio web?

Aquí te mostramos cómo cambiar el color del carrito de integración web en tu sitio.

Samantha Smith avatar
Escrito por Samantha Smith
Actualizado ayer

Para acceder a esta función, debes tener el plan Goodshuffle Pro Standard o superior.

Primero, dirígete a la sección de CSS personalizado de tu sitio web (Artículo)

A continuación encontrarás los fragmentos de código necesarios para cambiar varios colores en tu sitio web. Se recomienda copiar y pegar todo el bloque de código en tu editor de CSS y luego ajustar los colores según prefieras. No es necesario cambiar todos los colores.


Nota: Si tu sitio web utiliza un tema de color específico, puede que necesites agregar el siguiente fragmento para sobrescribir la configuración de colores de tu tema:

!important; 

Cambia el color de la fuente y el fondo del número de artículos añadidos al carrito de la lista de deseos:

/* wishlist 'cart' count badge*/
gspro-wishlist .gspro-c-wishlist__count {
background: yellow !important;
color: purple !important;
}

Cambia el color del ícono y el fondo del botón "Carrito de la lista de deseos":

/* wishlist heart icon color */
gspro-wishlist[data-mode="collapse"] use {
fill: orange;
}

/* wishlist heart 'cart' background */
.gspro-c-wishlist__trigger {
background: darkred !important;
}

Cambia el color de fondo en la parte superior del carrito de la lista de deseos:

gspro-wishlist[data-mode="expand"] {
background: hotpink;
}

Cambia el color de fondo y el color del número en el círculo que muestra la cantidad de artículos dentro de un carrito de lista de deseos activo:

gspro-wishlist[data-mode="collapse"] .gspro-c-wishlist__count {
background: black;
color: white
}

Cambia el color del botón "Contacto e información del lugar" solo cuando NO se pasa el cursor sobre él:

button.gspro-o-button--primary {
background: #1F1F1F;
}

Cambia el color del botón "Contacto e información del lugar" SOLO cuando se pasa el cursor sobre él:

button.gspro-o-button--primary:hover {
background: #3F3F3F;
}

button.gspro-o-button--warning {
background: darkorange;
color: white;
}
button.gspro-o-button--warning:hover {
background: darkred;
color: white;
}

Cambia el color de la fuente en el botón "Guardar" bajo "Seleccionar fechas":

button.gspro-o-button--reverse {
background: white;
color: hotpink;
}

Cambia el color de la fuente en el botón "Guardar" bajo "Seleccionar fechas" solo cuando se pasa el cursor sobre él:

button.gspro-o-button--reverse:hover {
background: rgba(255, 255, 255, 0.8);
color: hotpink;
}

Cambia el color del botón de cerrar bajo "Seleccionar fechas":

button.gspro-o-button--icon {
background: inherit;
}

Cambia el color del botón de cerrar bajo "Seleccionar fechas" solo cuando se pasa el cursor sobre él:

button.gspro-o-button--icon:hover {
background: rgba(255, 255, 255, 0.2);
}


¿Necesitas ayuda adicional?
Haz clic en la burbuja azul de chat en la esquina inferior de tu pantalla para enviar un mensaje a nuestro equipo de soporte. ¡Estamos para ayudarte!

Aviso: Este artículo fue traducido usando IA. Si tienes preguntas o necesitas aclaraciones, por favor contáctanos usando la burbuja de chat en la esquina inferior de tu pantalla.

¿Ha quedado contestada tu pregunta?