Come sistemare lo stile dei pulsanti di WooCommerce con Divi

Vedremo come modificare i pulsanti predefiniti di WooCommerce per renderli uguali a Divi con un semplice codice css.

Problemi di stile del pulsante WooCommerce con il tema Divi

Non perdere le vendite a causa degli stili dei pulsanti WooCommerce non così eccezionali sul tuo tema Divi. Gli stili dei pulsanti WooCommerce predefiniti su Divi Theme sono quelli di base quindi andremo a modificarli per renderli uguali a quelli di Divi.

Il pulsante Aggiungi al carrello di WooCommerce è la prima cosa che il tuo cliente vedrà sulla pagina di un prodotto. Essere presentabili quando si effettua una vendita è un must. Allora non dovrebbe essere diverso quando si tratta dei tuoi stili di pulsanti WooCommerce.

Lo stile dello sfondo e del carattere del pulsante è il minimo che dovresti modificare. E non è così difficile.

Come correggere il problema degli stili dei pulsanti di WooCommerce

Quelli di mrkwp hanno creato un CSS per questa correzione. Fare clic qui per visualizzarlo su GitHub.

/* cambia lo stile dei pulsanti di woocommerce */
body .et_pb_button:hover, .woocommerce a.button.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce #content input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce a.button:hover, .woocommerce-page a.button:hover, .woocommerce button.button:hover, .woocommerce-page button.button:hover, .woocommerce input.button:hover, .woocommerce-page input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce-page #respond input#submit:hover, .woocommerce #content input.button:hover, .woocommerce-page #content input.button:hover {
color: #fff;
}
.woocommerce a.button.alt, .woocommerce-page a.button.alt, .woocommerce button.button.alt, .woocommerce-page button.button.alt, .woocommerce input.button.alt, .woocommerce-page input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce-page #respond input#submit.alt, .woocommerce #content input.button.alt, .woocommerce-page #content input.button.alt, .woocommerce a.button, .woocommerce-page a.button, .woocommerce button.button, .woocommerce-page button.button, .woocommerce input.button, .woocommerce-page input.button, .woocommerce #respond input#submit, .woocommerce-page #respond input#submit, .woocommerce #content input.button, .woocommerce-page #content input.button{
color: #fff;
}

Post correlato: come aggiungere codice CSS al tema Divi

Aggiungi il codice al tuo css personalizzato su Divi

Non ti rimane che andare su Divi > Opzioni tema > CSS Personalizzato e inserire il codice riportato di sopra.

Se ci siete riusciti vi invitiamo a lasciare un commento!

Mostra/Nascondi Commenti (0 commenti)
L

0 commenti

Invia un commento

Il tuo indirizzo email non sarà pubblicato.

Ti potrebbe anche interessare…