Imposta la tua classe CSS su qualsiasi campo personalizzato nel tuo negozio WooCommerce

Esistono due tipi di campi personalizzati: prodotti e checkout. Puoi personalizzarli entrambi. Tutto ciò di cui hai bisogno è assegnare la tua classe di campo personalizzata dal tuo file CSS. In questa guida ti mostrerò come realizzarlo.

In generale, non esiste un modo semplice per personalizzare il checkout o i campi dei prodotti. Se desideri assegnare una classe di campo personalizzata CSS a qualsiasi campo, è necessario un plug-in.

In questa guida imparerai come cambiare l'aspetto dei campi. Guarda il campo di caricamento predefinito:

Puoi cambiarne l'aspetto in questo:

Questo è solo un esempio. Potrai impostare il tuo stile.

Ci sono due ottimi plugin per i campi personalizzati:

• Campi di pagamento flessibili
• Campi prodotto flessibili

Questi plugin ti consentono di configurare i campi e anche di creare campi personalizzati. Puoi dare un'occhiata al nostro tutorial: Crea campi personalizzati in WooCommerce →

Scarica uno o entrambi utilizzando i collegamenti sopra per continuare con questa guida.

Assegna una classe di campo personalizzata CSS a qualsiasi campo

Iniziamo con il plug-in Campi di pagamento flessibili . Una volta installato e attivato, vai su WooCommerce → Campi di pagamento. Qui troverai la sezione Modifica :

Ora seleziona un campo semplicemente facendo clic sul suo nome. Vedrai 6 schede. Scegli l' aspetto . Puoi impostare la tua classe CSS lì:

Successivamente, vediamo come funziona per i campi prodotto flessibili . Non ci sono campi prodotto per impostazione predefinita in WooCommerce. Devi crearne alcuni e poi puoi modellarli.

Vai a Prodotti → Campi Prodotto :

Quindi crea un gruppo di campi e un campo all'interno. Se hai bisogno di ulteriore aiuto, dai un'occhiata alla nostra Guida alle opzioni dei prodotti extra WooCommerce →

Troverai un'opzione Classe CSS all'interno della schermata di configurazione di un campo.

Hai appena imparato come impostare il tuo stile sia per il checkout che per i campi del prodotto.

Crea la tua classe di campo personalizzata CSS

lorem

Esempio

Diciamo che vogliamo dare uno stile al campo del pulsante di opzione.

Dobbiamo creare una classe CSS. Ho creato la classe di esempio . Come puoi vedere di seguito, ho anche scritto del codice per fieldset , legend ed elementi label :

Questo codice mi permette di trasformare questo campo:

In una tale bellezza come questa:

OK. Forse non è il radio button più bello in circolazione ma mi piace :)

Ad ogni modo, hai un'idea. Il plug-in assegna la classe del campo personalizzato CSS al div del campo:

Se vuoi personalizzare gli elementi all'interno di questo div, devi chiamarli in questo modo:

per un elemento legenda:

Questo perché questo elemento è annidato all'interno del div e di un elemento fieldset:

Altre funzionalità dei nostri plugin

Campi di pagamento flessibili

In breve, i campi di pagamento flessibili ti consentono di creare campi personalizzati in WooCommerce. Inoltre, con questo plugin, puoi modificare o riorganizzare i campi di pagamento predefiniti di WooCommerce. Ad esempio, puoi disabilitare i campi dell'indirizzo se vendi prodotti digitali.

Quasi 70.000 negozi in tutto il mondo utilizzano questo plugin ogni giorno. Le valutazioni delle persone sono 4,6 su 5 stelle.

La versione gratuita ti consente di creare:

• Testo a riga singola
• Testo del paragrafo
• Area di testo
• Numero
• E-mail
• Telefono
• URL
• Casella di controllo
• Colore
• Titolo
• Immagine
• HTML

Ecco un video, che è un riassunto di ciò che troverai nella versione gratuita di Flexible Checkout Fields:

Con la versione PRO puoi creare:

• Casella di controllo
• Pulsante di opzione
• Seleziona (elenco a discesa)
• Data
• Volta
• Color Picker
• Titolo
• HTML o testo normale
• Upload di file

Campi prodotto flessibili

Questo plugin è tutto ciò di cui hai bisogno per personalizzare la pagina del tuo prodotto.

La versione gratuita ti consente di aggiungere questi campi alla pagina del tuo prodotto WooCommerce:

• Testo
• Area di testo
• Numero
• E-mail
• URL
• Casella di controllo
• Casella di controllo multipla
• Selezionare
• Selezione multipla
• Pulsante di opzione
• Volta
• Radio con immagini
• Colore
• Radio con i colori
• Intestazione
• Paragrafo
• Immagine
• HTML

Questo video è un riepilogo di tutte le funzionalità disponibili nella versione gratuita:

In breve, questo plugin ti consente di creare componenti aggiuntivi del prodotto. Puoi aggiungere nuovi campi personalizzati ai prodotti nel tuo negozio WooCommerce.

La versione PRO ti consente di aggiungere:

• Campo data
• Campo di caricamento file

Inoltre, le caratteristiche principali delle versioni PRO sono:

• Gruppo d'ordine
• Campi dei prezzi personalizzati di WooCommerce (assegnando un prezzo fisso o percentuale a un campo)
• Logica condizionale
• Supporto rapido via e-mail
• Duplicazione dei gruppi di campi

Alcuni di questi campi nella Guida alle opzioni di personalizzazione dei prodotti WooCommerce →

Dovresti assolutamente dare un'occhiata a quella guida! Troverai molti casi d'uso. Guidiamo gli utenti passo dopo passo attraverso la configurazione per implementare:

• Sistema di prenotazione semplice,
• Funzione di confezionamento dei regali,
• Mago della dieta della ristorazione,
• Procedura guidata del computer ecc.