Pregunta sobre Dara de Wordpress:

Cambiar Añadir carro flotante de color

Un usuario preguntó 👇

Solo quiero ajustar el color de desplazamiento del botón Agregar al carrito cuando no hay opciones seleccionadas. Es un color más cálido que el azul marino que me gustaría tener.

¡Agradecemos cualquier ayuda! ¡Bendecir!

Lanzador de hilos

(@windanwaves)

Hace 1 año, 11 meses

¿Hay alguna forma de cambiar todas las cubiertas de botones en todo el sitio web? Cada vez que creo que los tengo todos, encuentro otro.

También me gustaría cambiar el color de desplazamiento del botón ‘pasar a paypal’ en esta página: https://windanwaves.com/shop/checkout/

Si pudiera cambiar todos los colores de un desplazamiento, podría reducir la cantidad de código que uso y capturar cualquier botón que aún no haya notado.

GRACIAS POR AYUDAR !!

(@ anónimo-16453565)

Hace 1 año, 11 meses

Hola, @windanwaves

Para hacerlo, ve a Apariencia → Personalizar → CSS adicional e ingrese el siguiente código:

button:hover {
  background-color: red !important;
}

Espero que lo anterior te ayude.

Gracias.

(@mattjallday)

Hace 1 año, 11 meses

Entonces esto funciona en la mayoría de los botones.

También estoy usando este código para cambiar todos los colores de los botones a negro:

a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt {
	background: #000000 !important;
}

¿Hay alguna manera de combinar estos dos códigos para que todos los botones sean # 000000 y los códigos de desplazamiento del botón sean # 24c7e1?

(@kokkieh)

Hace 1 año, 11 meses

Hola mateo

El problema con esto es que algunos botones pueden tener sus propios plugins que pueden tener su propio archivo style.css, por lo que esos botones usan el estilo especificado por el plugin en lugar del estilo especificado por el tema. La única forma de capturarlos todos es obtener los selectores de CSS específicos aplicables a cada botón.

Y si cambia el color de fondo de los botones a negro, también deberá cambiar el color del texto para que el texto del botón sea legible.

Finalmente, intente evitar el uso !important tan lejos como sea posible. Si su selector de CSS es lo suficientemente específico, no debería necesitarlo. Cualquiera que sea el código que intento, hay algunos !important Las garantías que ha agregado evitan que funcione correctamente, por lo que es mejor eliminarlas por completo.

Vaya a su CSS personalizado y elimine estas dos reglas que agregó:

button:hover {
  background-color: #24c7e1 !important;
}

a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt {
	background: #000000 !important;
}

Luego agregue lo siguiente: cambia todos los botones que puedo encontrar, incluido el de Ir a PayPal:

/* Sets background and text color for clickable buttons */
a.button, button.button, input.button, #respond input#submit, a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt, a.button.wc-backward, a.button.wc-forward,button, input[type="button"], input[type="reset"], input[type="submit"], #infinite-handle span, .button {
  background-color: #000000;
  color: #24c7e1;
}

a.button:hover, button.button:hover, input.button:hover, #respond input#submit:hover, a.button.alt:hover, button.button.alt:hover, input.button.alt:hover, #respond input#submit.alt:hover, a.button.wc-backward:hover, a.button.wc-forward:hover, button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, #infinite-handle span:hover, .button:hover {
  background-color: #24c7e1;
  color: #515151;
}

/* Sets background and text color for disabled buttons */
a.button:disabled, a.button.disabled, a.button:disabled[disabled], button.button:disabled, button.button.disabled, button.button:disabled[disabled], input.button:disabled, input.button.disabled, input.button:disabled[disabled], #respond input#submit:disabled, #respond input#submit.disabled, #respond input#submit:disabled[disabled]{
  color: #24c7e1;
}

a.button:disabled:hover, a.button.disabled:hover, a.button:disabled[disabled]:hover, button.button:disabled:hover, button.button.disabled:hover, button.button:disabled[disabled]:hover, input.button:disabled:hover, input.button.disabled:hover, input.button:disabled[disabled]:hover, #respond input#submit:disabled:hover, #respond input#submit.disabled:hover, #respond input#submit:disabled[disabled]:hover {
  background-color: #24c7e1;
}

Lanzador de hilos

(@windanwaves)

Hace 1 año, 11 meses

¡Usted es maravilloso! Muchísimas gracias. Se ve más o menos exactamente como yo quería que se viera. Lo aprecio.

Lo único que quiero ajustar ahora es el color del texto en el botón de opciones seleccionado aquí:
https://windanwaves.com/shop/
Quiero cambiarlo de azul a blanco.

Con el fondo en el botón Agregar al carrito aquí cuando no hay opciones seleccionadas:
https://windanwaves.com/product/follow-the-signs-tee/
Quiero cambiarlo de azul verdoso a negro.

Si es posible todo saldrá perfecto. Ya estoy muy contento con el código que me proporcionaste. Gracias de nuevo !!

(@lizkarkoski)

Hace 1 año, 11 meses

Hola –

Lo único que quiero ajustar ahora es el color del texto en el botón de opciones seleccionado aquí:
https://windanwaves.com/shop/
Quiero cambiarlo de azul a blanco.

Agregue el siguiente CSS:


a.button.product_type_variable.add_to_cart_button 
.content-wrapper.full-width a {
    color: #ffff;
}

Con el fondo en el botón Agregar al carrito aquí cuando no hay opciones seleccionadas:
https://windanwaves.com/product/follow-the-signs-tee/
Quiero cambiarlo de azul verdoso a negro.

Utilice la siguiente SEC:

div.product form.cart .button {
 background-color: #15b6b8;
}

Avísame si eso funciona bien 🙂

(@lizkarkoski)

Hace 1 año, 11 meses

Excusa. Hice un desastre con esa segunda parte de la SEC. Debido a que el botón está deshabilitado hasta que se selecciona un producto, debe usar esto:

.disabled {
   background-color: black !important;
}

Lanzador de hilos

(@windanwaves)

Hace 1 año, 11 meses

Hmmm, por alguna razón, el primer código no realiza ningún cambio en el texto de las opciones seleccionadas.

¡El segundo código funcionó muy bien!

¡Muchos gracias!

(@kokkieh)

Hace 1 año, 11 meses

Hmmm, por alguna razón, el primer código no realiza ningún cambio en el texto de las opciones seleccionadas.

El orden en el que se coloca un SEC es importante: siempre se ejecuta de arriba a abajo. Y parece que en ambos casos pones el código que te dio Liz entre el código que te di antes. Esto puede estar impidiendo que el código funcione correctamente, ya que podría conducir a una infracción posterior del nuevo código; una vez que Liz lo probara, estaría agregando su código DESPUÉS del código que le di, no en el medio.

Mueva todo el código que Liz le dio a la parte inferior del CSS personalizado, para que solo aparezca después del código que le di. Es decir, debería verse así:

/* Sets background and text color for clickable buttons */
a.button, button.button, input.button, #respond input#submit, a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt, a.button.wc-backward, a.button.wc-forward,button, input[type="button"], input[type="reset"], input[type="submit"], #infinite-handle span, .button {
  background-color: #000000;
  color: #ffffff;
}

/* Sets background and text color for button hover */
a.button:hover, button.button:hover, input.button:hover, #respond input#submit:hover, a.button.alt:hover, button.button.alt:hover, input.button.alt:hover, #respond input#submit.alt:hover, a.button.wc-backward:hover, a.button.wc-forward:hover, button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, #infinite-handle span:hover, .button:hover {
  background-color: #24c7e1;
  color: #ffffff;
}

/* Sets background and text color for disabled buttons */
a.button:disabled, a.button.disabled, a.button:disabled[disabled], button.button:disabled, button.button.disabled, button.button:disabled[disabled], input.button:disabled, input.button.disabled, input.button:disabled[disabled], #respond input#submit:disabled, #respond input#submit.disabled, #respond input#submit:disabled[disabled]{
  color: #ffffff;
}

/* Sets background and text color for disabled buttons hover */
a.button:disabled:hover, a.button.disabled:hover, a.button:disabled[disabled]:hover, button.button:disabled:hover, button.button.disabled:hover, button.button:disabled[disabled]:hover, input.button:disabled:hover, input.button.disabled:hover, input.button:disabled[disabled]:hover, #respond input#submit:disabled:hover, #respond input#submit.disabled:hover, #respond input#submit:disabled[disabled]:hover {
  background-color: #000000;
}

/* Changes text color on Select Options button on Shop page */
a.button.product_type_variable.add_to_cart_button  {
  color: #ffffff;
}

También tenga en cuenta que cambié ligeramente el código del botón Seleccionar opciones.

¡El segundo código funcionó muy bien!

Usando !important viola este comando, por lo que cualquier código que agregue siempre funciona. Pero viola este comando, lo que significa que cuando lo ha agregado !important con algo, no hay forma de superarlo más tarde si es necesario.

En su lugar, intente esto (recuerde agregarlo solo después del código existente):

/* Changes background color for inactive Add To Cart button on variable product page */
button.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed {
  background-color: #000000;
}

Al ser más específicos en nuestro selector podemos lograr y utilizar el mismo resultado !important, pero sin los posibles problemas futuros !important puede causar.

Lanzador de hilos

(@windanwaves)

Hace 1 año, 11 meses

¡Funciona perfectamente! ¡¡¡¡¡Gracias!!!!! <3

(@kokkieh)

Hace 1 año, 11 meses

Dispuesto a ayudar 🙂

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *