Pregunta sobre Booster for WooCommerce de Wordpress:

cambiar el color del bot贸n

Un usuario pregunt贸 馃憞

Quiero cambiar el color de los botones, como el bot贸n Realizar pedido. 驴C贸mo puedo hacer eso?

<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Place order" data-value="Place order">Place order</button>

Este tema fue modificado hace 2 a帽os, 8 meses por. Lanzador de hilos

(@ miezz81)

Hace 2 a帽os, 8 meses

Hice esto con CSS adicional en mi hijo, pero ser铆a bueno hacerlo en un plugin como refuerzo.

Piense en esto como si quisiera la pr贸xima versi贸n.

(@rokasjan)

Hace 2 a帽os, 8 meses

Hola Miezz88,

Para cambiar el color de los botones, debe agregar CSS personalizado en el m贸dulo 芦CSS personalizado禄. Ve a la configuraci贸n de refuerzo> Correos electr贸nicos y micr贸fonos. > Habilite 芦CSS personalizado禄. Luego vaya a Configuraci贸n y en 芦CSS personalizado – Fin de frente (Clientes)禄 pegue esto:

button, html input[type="button"], input[type="submit"], .button, .button:visited {
    color: #ffffff;
    background-color: #0000FF;
}

button:hover, html input[type="button"]:hover,input[type="submit"]:hover, .button:hover, button:focus, html input[type="button"]:focus, input[type="submit"]:focus, .button:focus {
    color: #ffffff;
    background-color: #00FF00;
}

El atributo 芦color禄 cambia el color del texto del bot贸n (l铆neas 2 y 8) el atributo 芦color de fondo禄 cambia el color de fondo del bot贸n (l铆neas 3 y 9)

Los primeros atributos de 芦color禄 y 芦color de fondo禄 le permiten personalizar el estilo del bot贸n como se muestra al cargar el sitio, la segunda caracter铆stica permite c贸mo se muestra el bot贸n cuando el mouse pasa sobre 茅l.

Los nombres de los colores deben escribirse en c贸digos de colores hexadecimales. Para personalizar otros botones, copie el c贸digo y reemplace el tipo de entrada 芦enviar禄 con otros tipos de botones.

[ Signature deleted ]

Esta respuesta fue modificada hace 2 a帽os, 7 meses. Lanzador de hilos

(@ miezz81)

Hace 2 a帽os, 8 meses

Este c贸digo parece no hacer nada. No quiero cambiar todos los botones posibles, solo estos tres:

A帽adir al carrito Continuar con la comprobaci贸n de lugar de pedido

驴C贸mo puedo hacer eso?

(@rokasjan)

Hace 2 a帽os, 8 meses

Hola de nuevo,

Puede especificar qu茅 clase desea cambiar de estilo. Hay un bot贸n Agregar a la tarjeta en la clase 芦single_add_to_cart_button禄 (puede ver esto haciendo clic derecho sobre 茅l y seleccionando la funci贸n de exploraci贸n), por lo que el c贸digo para cambiar los colores de ese bot贸n ser铆a

.single_add_to_cart_button.button{
	background-color: #00FF00;
	color: #FFFFFF;
}

Si desea cambiar de color dependiendo de si el usuario lo est谩 revisando, el c贸digo ser铆a

.single_add_to_cart_button.button:hover{
	background-color: #FF0000;
	color: #FFFFFF;
}

.single_add_to_cart_button.button{
	background-color: #00FF00;
	color: #FFFFFF;
}

El c贸digo completo para los tres botones es:

.single_add_to_cart_button.button:hover{
	background-color: #FF0000;
	color: #FFFFFF;
}

.single_add_to_cart_button.button{
	background-color: #00FF00;
	color: #FFFFFF;
}

.button#place_order.button:hover{
	background-color: #FF0000;
	color: #FFFFFF;
}

.button#place_order.button{
	background-color: #00FF00;
	color: #FFFFFF;
}

.checkout-button.button:hover{
	background-color: #FF0000;
	color: #FFFFFF;
}

.checkout-button.button{
	background-color: #00FF00;
	color: #FFFFFF;
}

Si algunos de los botones no cambian, CSS modifica los nombres de las clases de botones en consecuencia.

Lanzador de hilos

(@ miezz81)

Hace 2 a帽os, 8 meses

Gracias por su respuesta. Despu茅s de algunos ajustes, el c贸digo funcion贸:

.woocommerce .product .single_add_to_cart_button.button{
	background-color: #27cda5;
	color: #FFFFFF;
}

Caso cerrado, gracias de nuevo.

驴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 *