Un utente ha chiesto informazioni su Booster for WooCommerce di Wordpress

cambiare il colore del pulsante

Un utente ha chiesto 👇

Voglio cambiare il colore dei pulsanti, come il pulsante Effettua ordine. Come posso fare ciò?

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

Questo argomento è stato modificato 2 anni, 8 mesi fa da.

(@ miezz81)

2 anni, 8 mesi fa

L’ho fatto con CSS extra in mio figlio, ma sarebbe bello farlo in un plugin come booster.

Pensa a questo come a volere la prossima versione.

(@rokasjan)

2 anni, 8 mesi fa

Ciao Miezz88,

Per cambiare il colore dei pulsanti, è necessario aggiungere CSS personalizzati nel modulo “CSS personalizzato”. Vai alle impostazioni del booster> Email e microfono. > Abilita “CSS personalizzato”. Quindi vai su Impostazioni e in “CSS personalizzato – Frontale finale (clienti)” incolla questo:

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;
}

L’attributo “color” cambia il colore del testo del pulsante (righe 2 e 8)
L’attributo “background color” cambia il colore di sfondo del pulsante (righe 3 e 9)

I primi attributi “colore” e “colore di sfondo” consentono di personalizzare lo stile del pulsante come mostrato durante il caricamento del sito, la seconda funzione consente di come viene visualizzato il pulsante quando il mouse passa sopra di esso.

I nomi dei colori devono essere scritti in codici colore esadecimali. Per personalizzare altri pulsanti, copia il codice e sostituisci il tipo di input “submit” con altri tipi di pulsanti.

[ Signature deleted ]

Questa risposta è stata modificata 2 anni, 7 mesi fa.

(@ miezz81)

2 anni, 8 mesi fa

Questo codice sembra non fare nulla. Non voglio cambiare tutti i pulsanti possibili, solo questi tre:

Aggiungi al carrello
Procedere al checkout
Invia ordine

Come posso fare ciò?

(@rokasjan)

2 anni, 8 mesi fa

Ciao di nuovo,

È possibile specificare quale classe si desidera modificare lo stile.
C’è un pulsante Aggiungi alla carta nella classe “single_add_to_cart_button” (puoi vederlo facendo clic con il tasto destro su di esso e selezionando la funzione di esplorazione), quindi il codice per cambiare i colori di quel pulsante sarebbe

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

Se vuoi cambiare colore a seconda che l’utente lo stia leggendo, il codice sarà

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

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

Il codice completo per i tre pulsanti è:

.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;
}

Se alcuni pulsanti non cambiano, i CSS modificano i nomi delle classi dei pulsanti di conseguenza.

(@ miezz81)

2 anni, 8 mesi fa

Grazie per la tua risposta. Dopo un po ‘di modifiche, il codice ha funzionato:

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

Caso chiuso, grazie ancora.

Was this helpful?

0 / 0

Lascia un commento 0

Your email address will not be published. Required fields are marked *