Stai cercando un modo per poter personalizzare il colore della pagina checkout nel tuo WooCommerce ? Sei nel posto giusto per scoprire come poterlo fare in pochi minuti !

La pagina del checkout è uno degli ultimi steps in cui l’utente finalizza i suoi acquisti cliccando su ” completa l’acquisto”  procedendo al pagamento .

La pagina in questione però, se avessi mai cercato di personalizzarla, avrai notato che non è possibile farlo . Questo perché è una delle pagine protette dal plugin WooCommerce .

In realtà ci sono dei plugin specifici per poter personalizzare la pagina del checkout, ma se quello che cerchi è un metodo per cambiare semplicemente il colore dei pulsanti, possiamo riuscire a farlo tramite CSS.

Cambiare il colore della pagina Checkout di WooCommerce – CSS

Per poter personalizzare la nostra pagina di Woocommerce avremo bisogno di poter inserire il nostro codice di stile personalizzato all’interno del tema che stiamo utilizzando in WordPress.

Il 90% dei temi che di solito sono installati sul nostro WP , hanno la possibilità di inserire il CSS all’interno della sezione personalizza, proprio dove si modificano i dettagli del sito (nella parte frontend ) .

Infatti per questa modifica possiamo possiamo utilizzare la funzione “CSS Aggiuntivo” .

Se il tuo tema non dovesse avere questa funzione, potrai optare per un plugin che ti permetta di farlo come Simple Custo CSS and JS  , come già accennato in qualche articolo precedente .

Adesso che conosci gli strumenti per poter scrivere del codice all’interno del sito in WP , ti basta semplicemente incollare lo snippet che ho preparato per te :

.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {

background:red !important;

background-color:red !important;

color:white !important;

text-shadow: transparent !important;

box-shadow: none;

border-color:#ca0606 !important;

}

.woocommerce #content input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-page #content input.button:hover, .woocommerce-page #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover {

background:red !important;

background-color:red !important;

color:white !important;

text-shadow: transparent !important;

box-shadow: none;

border-color:#ca0606 !important;

}

.woocommerce #content input.button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button {

background: red !important;

color:white !important;

text-shadow: transparent !important;

border-color:#ca0606 !important;

}

.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {

background: red !important;

box-shadow: none;

text-shadow: transparent !important;

color:white !important;

border-color:#ca0606 !important;

}

Se dovessi aver installato il plugin “Simple Custom Js and CSS dovrai cliccare su “Add Custom CSS nella tua Dashboard” :

Arrivati alla nostra pagina di aggiunta del CSS, possiamo dare un titolo al nostro codice (che in questo esempio ho chiamato Checkout ), cancellare il codice esempio ed inserire il nostro :

Se invece stessi utilizzando la funzione “CSS Aggiuntivo” del tuo tema ( personalizza ) , dovrai semplicemente incollare il codice all’interno .

Finita la procedura , noterai che i pulsanti della tua pagina Checkout saranno diventati rossi . Vuol dire che il nostro codice sta funzionando ! 😀

Per poter scegliere il colore più adatto al tuo tema, dovrai sostituire dove leggi “red”, con il tuo codice colore.

Se non conosci il codice del colore principale del tuo tema, potrai utilizzare uno degli strumenti che ti permetta di scoprirlo, come “ColorZilla” , oppure recarti sul sito Color Palette di Adobe per poterne generare uno .

Dove leggi “white” invece, sarà il colore del testo nel pulsante che potrai anch’esso sostituire a tuo piacimento .

Adesso non ti resta che goderti il tuo e-commerce con la pagina del checkout personalizzata !

È stato utile questo articolo ?

Lasciami un commento 😀