Cambiar color botón...
Avisos
Vaciar todo

Cambiar color botón añadir a carrito  

 
mari_hermy
 mari_hermy
Usuario experto

Hola, tengo una tienda en Prestashop 1.6.1.18 que utiliza el tema default-bootstrap.

Mi consulta es ¿cómo puedo cambiar el color del botón "añadir al carrito" en la página de producto?
Por defecto viene en color azul, aunque deseo mantener los efectos hoover, el color no me gusta. (Adjunto captura)

He tratado intentado editar el archivo /themes/default-bootstrap/css/product.css pero no consigo gran cosa.

Quizá pueda hacerse con algún código css? Agradeceré muchísimo vuestra ayuda

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 01/06/2018 1:00 am
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

Prueba a crear un fichero llamado customuser.css en el directorio css de tu plantilla e insertar el siguiente código:

.box-info-product .exclusive:hover {
	background-image: linear-gradient(#007ab7,#009ad0);
}

Tendrás que cambiar los colores #007ab7 y #009ad0 que son el hexadecimal en azul.

ResponderCitar
Respondido : 01/06/2018 3:25 am

Cursos Gratuitos WordPress

mari_hermy
 mari_hermy
Usuario experto

Hola
He aplicado el código variando los colores, pero no cambia nada

ResponderCitar
Respondido : 01/06/2018 11:22 am
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Podrías probar con el siguiente código :

.box-info-product .exclusive{
    background:none;
    background-color:red;
}

Prueba agregar este código al final de algún archivo CSS que carga tu theme, por ejemplo global.css, no puedo decirte cual porque estas usando optimizaciones para CSS, desde Parámetros avanzados > Rendimiento desactiva la sección de CCC para estilos en caso no funcionen los cambios que haces.

Siempre que hagas este tipo de cambios mejor no optimizar tu sitio porque no verás los cambios que apliques, luego puedes habilitar optimizaciones.

Saludos.

ResponderCitar
Respondido : 01/06/2018 6:53 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

mari_hermy
 mari_hermy
Usuario experto

Hola, los códigos los estoy probando en un prestashop 1.6.1.18 de prueba que tengo en un directorio protegido con contraseña para evitar la indexación.
En dicho prestashop de prueba están desactivadas todas las opciones CCC, lamentablemente el último código tampoco funciona.

ResponderCitar
Respondido : 01/06/2018 10:14 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

El código funcionará siempre que este insertado correctamente.

Difícilmente podemos ayudarte si no podemos ver tu sitio, necesitamos ver el sitio en donde estas insertando el código para ver si esta correctamente o detectar que otro problema pueda suceder.

Ten en cuenta que si tienes un código erroneo CSS antes de insertar este código entonces no funcionará, por ejemplo es común que falten cerrar llaves en tu código anterior.

En resumen, habilita temporalmente tu sitio y envíanos la url exacta para revisar.

Saludos.

ResponderCitar
Respondido : 01/06/2018 10:48 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

mari_hermy
 mari_hermy
Usuario experto

He habilitado el sitio, puedes revisarlo en:
http://prueba.compraraceiteargan.com/es/

Quiero cambiar el botón a un color naranja en vez del azul que trae por defecto

ResponderCitar
Respondido : 01/06/2018 10:52 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Prueba agregar el siguiente código al final del archivo global.css

body .button.ajax_add_to_cart_button span,
body .button.ajax_add_to_cart_button,
body #center_column.col-sm-9 .col-md-3 .box-info-product .exclusive{
  background:none;
  background-color:blue;
}

Cambia blue por un código de color, esto cambiará los botones de la lista y del detalle de producto.

Saludos.

ResponderCitar
Respondido : 01/06/2018 11:07 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

mari_hermy
 mari_hermy
Usuario experto

Funciona a medias, pero creo que ya le he encontrado el truco para llegar al efecto que deseo. Gracias

ResponderCitar
Respondido : 01/06/2018 11:20 pm
mari_hermy
 mari_hermy
Usuario experto

El problema con el código anterior, es que cuando pongo el cursor sobre el botón se pone en color azul.
Cómo se puede modificar eso?

ResponderCitar
Respondido : 01/06/2018 11:42 pm

Cursos Gratuitos WordPress

Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

En el fichero que te indico Jhon prueba con el código que te envié anteriormente:

.box-info-product .exclusive:hover {
	background-image: linear-gradient(#007ab7,#009ad0);
}
ResponderCitar
Respondido : 02/06/2018 3:11 am
mari_hermy
 mari_hermy
Usuario experto

Hola, el color ya ha cambiado pero los bordes y la línea central del botón siguen en el color azul por defecto.

Cómo puedo cambias esas líneas a color negro?

ResponderCitar
Respondido : 02/06/2018 3:52 am

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

Para los bordes puedes probar con el código:

.box-info-product .exclusive {
	border-top: 1px solid #0079b6;
	border-right: 1px solid #006fa8;
	border-left: 1px solid #006fa8;
	border-bottom: 1px solid #012740;
}

Tienes que cambiar los colores hexadecimales.

ResponderCitar
Respondido : 02/06/2018 5:17 am
mari_hermy
 mari_hermy
Usuario experto

Ok, muchas gracias

ResponderCitar
Respondido : 02/06/2018 5:43 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress