Come personalizzare il pulsante "Aggiungi al carrello" di WooCommerce

Per cambiare il colore dei pulsanti WooCommerce, dobbiamo cambiare o sostituire il file di pulsanti style.css predefinito. Per fare ciò, dovremo aggiungere un file codice CSS personalizzato al nostro tema WordPress per bambini.

Ci sono due modi per farlo:

• Aggiungi un CSS personalizzato al file style.css del tema figlio
• Usa alcuni plugin per inserire codice CSS personalizzato nelle tue pagine web.

Passo 1: Installare il plugin su WordPress Semplice Custom CSS e attivarlo

Utilizzeremo un plugin per WordPress per iniettare codice CSS nelle pagine di un file Negozio online di WooCommerce. Puoi scaricare il plugin: Semplice CSS personalizzato

Puoi leggere il nostro tutorial su installazione e attivazione del plugin WordPress.

Dopo aver attivato il plug-in, verrà aggiunto un nuovo sottomenu al menu Apparence :

L'accesso a questa sezione ti porta a un'interfaccia con una casella di testo in cui puoi inserire codice CSS personalizzato.

Inserisci il seguente CSS nella casella di testo e fai clic su " Aggiornamento personalizzato CSS".

.woocommerce #content input.button.alt: hover, .woocommerce #respond ingresso # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button. alt: hover, .woocommerce pagine #content input.button.alt: hover, ingresso .woocommerce pagine #respond # submit.alt: hover, .woocommerce-page a.button.alt: hover, pulsante .woocommerce-pagina. button.alt: hover, .woocommerce-page input.button.alt: hover {background: significativo rosso; background-color: red importante; ! Colore: bianco importante; text-shadow: trasparente importante; box-shadow: none; border-color: #ca0606 importante; } .woocommerce #content Input.button: hover, ingresso .woocommerce #respond # presentare: hover, .woocommerce a.button: hover, .woocommerce button.button: hover, .woocommerce input.button: hover, .woocommerce pagine # felice input.button: hover, .woocommerce-page di ingresso #respond # presentare: hover, .woocommerce-page a.button: hover, .woocommerce-page button.button: hover, .woocommerce-page input.button: hover {background : rosso importante; background-color: red importante; ! Colore: bianco importante; text-shadow: trasparente importante; box-shadow: none; border-color: #ca0606 importante; } .woocommerce #content Input.button, .woocommerce #respond ingresso # presentare, a.button .woocommerce, .woocommerce button.button, .woocommerce input.button, .woocommerce pagine #content input.button, .woocommerce pagine # # presentare risponde ingresso, .woocommerce pagine a.button, .woocommerce pagine button.button, .woocommerce pagine input.button {background: significativo rosso; ! Colore: bianco importante; text-shadow: trasparente importante; border-color: #ca0606 importante; } .woocommerce #content Input.button.alt: hover, .woocommerce #respond ingresso # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .ALT: hover, .woocommerce pagine #content input.button.alt: hover, ingresso .woocommerce pagine #respond # submit.alt: hover, .woocommerce-page a.button.alt: hover, pulsante .woocommerce-page .button.alt: hover, .woocommerce-page input.button.alt: hover {background: significativo rosso; box-shadow: none; text-shadow: trasparente importante; ! Colore: bianco importante; border-color: #ca0606 importante; }

Ora puoi accedere al tuo negozio online, noterai che i pulsanti hanno effettivamente cambiato colore.

Per personalizzare il colore dei pulsanti per avere finalmente l'aspetto che desideri,

Sostituisci proprietà " backgroud: importante rosso! Di a colore a scelta. Aggiorna i codici e accedi di nuovo al tuo negozio online. Infatti, utilizzando lo stile che ti abbiamo appena fornito, potrai cambiare completamente la struttura dei pulsanti.

Con un po 'di ricerca, sarai in grado di creare pulsanti unici con uno stile che si abbina al tuo tema WordPress (soprattutto se quest'ultimo non è compatibile con WooCommerce).

Per il seguente esempio, puoi utilizzare il seguente codice CSS.

.woocommerce #content input.button, .woocommerce #respond ingresso # presentare, a.button .woocommerce, .woocommerce button.button, .woocommerce input.button, .woocommerce pagine #content input.button, .woocommerce-page #respond # presentare ingresso, .woocommerce pagine a.button, .woocommerce pagine button.button, .woocommerce-page input.button {background-color: #6fba26; padding: 10px; position: relative; font-family: 'Open Sans', sans-serif; font-size: 12px; text-decoration: none; color: #fff; background-image: lineare gradiente (bottom, rgb (100,170,30) 0% rgb (129,212,51) 100%); box-ombra: inserto 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F; border-radius: 5px; } .woocommerce #content input.button.alt: hover, .woocommerce #respond ingresso # 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, ingresso .woocommerce-page #respond # submit.alt: hover, .woocommerce-page a.button.alt: hover, pulsante .woocommerce-page .button.alt: hover, .woocommerce-page input.button.alt: hover {top: 7px; background-image: lineare gradiente (bottom, rgb (100,170,30) 100% rgb (129,212,51) 0%); box-ombra: inserto 0px 1px 0px #0D496F, inserto 0px -1px 0px #0D496F; colore: #156785; text-shadow: 0px 1px 1px RGBA (255,255,255,0.3); Background: rgb (44,160,202); }

Per coloro che desiderano ottimizzare le prestazioni del proprio negozio online in termini di conversione o vendita di prodotti,

Offriamo anche plugin WordPress premium 3 progettati per questo compito.

1. WooCommerce Recupera il carrello abbandonato

i clienti spesso riempiono i loro cestini e li lasciano: grazie a WooCommerce Recuperare Carrello Abbandonato potrai contattarli, ricordare loro cosa hanno acquistato e invitarli a completare le loro azioni.

Imposta l'intervallo di tempo tra il momento in cui un carrello viene abbandonato e quando viene inviata un'e-mail di promemoria personalizzata al cliente contenente un collegamento diretto alla pagina degli acquisti per fargli vedere in cosa si trovava punto per comprare.

Download | Demo | Web hosting

2. WooCommerce Nascondi prezzo e Aggiungi al carrello Plugin

Il plug-in Nascondi prezzi di WooCommerce consente ai commercianti di creare più regole per nascondere i prezzi o nascondere il pulsante "aggiungi al carrello" ai clienti non registrati o agli utenti che hanno determinati diritti di accesso al tuo sito di e-commerce.

Puoi nascondere il prezzo e il pulsante "aggiungi al carrello" su determinati prodotti o in categorie specifiche. Puoi sostituirli con testo personalizzato o con un pulsante che li porterà al modulo di contatto. Puoi creare tante regole che nasconderanno automaticamente il prezzo e il pulsante " Aggiungi al panier "a seconda di ciò che desideri.

Download | Demo | Web hosting

3. Commutatore di valuta di WooCommerce

Questo plugin ti consente di cambiare i prezzi dei prodotti da una valuta all'altra in tempo reale.

Ciò è particolarmente importante nell'e-commerce, poiché è rivolto a tutto il mondo. Questo plugin garantisce che, indipendentemente da dove si trovano i tuoi clienti, saranno sempre in grado di ordinare dal tuo negozio online.

Download | Demo | Web hosting

Risorse raccomandate

Scopri altre risorse consigliate che ti aiuteranno ottimizzare le prestazioni del tuo negozio online. 

• 50 WooCommerce plugin per migliorare il vostro negozio on-line
• Plugin 9 WordPress per creare un programma di affiliazione
• 9 WooCommerce plugin per migliorare gli attributi dei tuoi prodotti variabili
• Plugin 5 WordPress per modificare visivamente i CSS sul tuo blog

Conclusione

Ecco ! Questo è tutto per questo tutorial dedicato alla personalizzazione dei pulsanti Aggiungi al carrello di WooCommerce. Non esitare a condividerlo con i tuoi amici sul tuo i social network preferito. 

Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress.

Ma, nel frattempo, parlaci del tuo commentaires e suggerimenti nella sezione dedicata.

...