Vai al contenuto principale

Come personalizzare il pulsante "Aggiungi al carrello" di WooCommerce

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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 :

CSS personalizzato Menu plugin per WordPress

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

WordPress Plugin Interface Semplice Custom CSS

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.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

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).

aggiungi al carrello pulsante WordPress

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.

Recupera il carrello abbandonato per woocommerce

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

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.

Woocommerce nascondi prezzo aggiungi al carrello pulsante plugin nascondi per ruoli utente

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.Commutatore di valuta Woocommerce

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. 

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

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.

... 

Questo articolo contiene i commenti 8

  1. Buongiorno,
    Questo stesso plug-in può aiutarmi a cambiare il colore delle stelle "recensioni dei clienti" sulle pagine dei prodotti woocommerce? Grazie in anticipo

    1. Buongiorno,

      È necessario utilizzare il codice CSS per questo. Altrimenti, ti consiglio il plugin Yellow Pencil che puoi scaricare su Codecanyon.

  2. È fantastico tradurre un pezzo di codice dall'inglese all'italiano. CSS è pieno di errori! Ma possiamo farcela ?!

  3. Buonasera, ho una domanda. Come cambiamo il colore del prezzo nelle sottocategorie di WooCommerce ???

    Grazie già per la risposta.

    nico

    1. Ciao Nico,

      Molti temi premium offrono questa possibilità, in caso contrario è possibile utilizzare i CSS per personalizzarlo.

      cordialmente

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Torna in alto