Campioni di colore per i prodotti WooCommerce con un plug-in gratuito

Pubblicato: 2021-05-28

Abilitare i campioni di colore e più opzioni di prodotto per i prodotti WooCommerce può aumentare le tue vendite. La soluzione più popolare è un prodotto WooCommerce con variazioni. Oggi ti mostrerò come cambiare i colori del prodotto con campioni per prodotti semplici e variabili e aggiungere campi personalizzati utilizzando un plug-in WooCommerce gratuito!

Non dare opzioni di prodotto può scoraggiare i tuoi clienti dall'acquistare. D'altra parte, come sai, i prodotti variabili non sono sempre la scelta migliore .

Lascia che ti mostri come arricchire i prodotti WooCommerce con campioni di colore , più opzioni di prodotto e campi personalizzati. Ciò che è importante, userò un plug-in per la creazione di prodotti gratuito per WooCommerce. Cominciamo!

Sommario

  • Prodotti variabili in WooCommerce
  • Campioni di colore WooCommerce con un plug-in gratuito!
  • Campioni di colore WooCommerce: una guida passo passo
  • Riepilogo e altro sui campi personalizzati

Prodotti variabili in WooCommerce

Per impostazione predefinita, puoi utilizzare alcuni tipi di prodotti WooCommerce , inclusi prodotti semplici e variabili.

Il semplice prodotto WooCommerce è facile da configurare, ma se desideri aggiungere opzioni di colore, potrebbero non essere sufficienti. Quando devi aggiungere campioni di colore, i prodotti variabili di WooCommerce possono essere una scelta migliore.

Prodotti variabili: variazioni

I tuoi clienti vedranno il prodotto WooCommerce con 3 opzioni.

Varianti sulla pagina del prodotto

Leggi di più su come aggiungere un prodotto WooCommerce con varianti .

Penso che potresti voler aggiungere campioni di colore in modo più attraente!

Campioni di colore WooCommerce con un plug-in gratuito!

Puoi aggiungere facilmente tutti i campioni di colore che desideri.

Campi prodotto flessibili - campo dopo le modifiche CSS
Campioni di variazione del prodotto WooCommerce aggiunti con Campi di prodotto flessibili

Visualizzare l'opzione selezionata che il cliente sceglie darà un effetto migliore rispetto al testo stesso. Questa regola è ancora più importante quando si tratta del colore del prodotto. L'inserimento di campioni di colore per i prodotti WooCommerce ridurrà al minimo l'insoddisfazione per la selezione errata del colore e renderà il sito Web più gradevole.

Il campo Radio con colori ti consente di aggiungere campioni di colore ai tuoi prodotti WooCommerce.

Scarica la versione GRATUITA di Flexible Product Fields e aggiungi una nuova radio con campi colorati.

Campi prodotto flessibili per WooCommerce

Cambia i colori di WooCommerce aggiungendo i campi Radio con i colori. I campioni WooCommerce sono semplificati con i campi prodotto flessibili.

Scarica o vai su WordPress.org
Oltre 10.000 installazioni attive
Ultimo aggiornamento: 2023-03-13
Funziona con WooCommerce 7.1 - 7.5.x

Inoltre, dai un'occhiata al video, che ti mostrerà cosa può fare questo plugin nella versione gratuita:

Campioni di colore WooCommerce: una guida passo passo

L'aggiunta di un tale campo è piuttosto semplice e grazie ai CSS sarà possibile modificarlo, ad esempio modificarne la forma o la dimensione. Segui i passaggi seguenti:

Innanzitutto, vai alla dashboard di WordPress → Prodotti → Campi prodotto .

Aggiungi campioni di colore
Campi prodotto flessibili nel menu di WordPress

Quindi, aggiungi un nuovo gruppo o seleziona un gruppo esistente. Se il gruppo è nuovo, assegnagli un nome (ad es. "Opzioni colore") e aggiungilo a prodotti/categorie o tag.

Radio con i colori
Crea un nuovo gruppo di campi

Successivamente, aggiungi un nuovo campo. Vai alla categoria Campi opzione e seleziona Radio con colori dall'elenco delle opzioni.

Aggiunta di un campione di colore alla pagina del prodotto WooCommerce
Scegli la Radio con le immagini

Infine, inserisci l'etichetta del campo, che sarà anche il nome del tuo campo. Diciamo "Colore del prodotto".

Etichetta per un campo campione colore
Assegna un'etichetta al tuo nuovo campo

Personalizzazione campi prodotto

Ora vediamo le opzioni aggiuntive del plugin:

    1. Inoltre, leggi la nostra Documentazione se hai bisogno di maggiori informazioni su ciascuno dei campi che vedrai a questo punto:

      Campioni di variazione del prodotto WooCommerce
      Campioni di colore: diversi tipi di campo
    2. Compila i campi con le informazioni che desideri visualizzare sulla pagina del tuo prodotto WooCommerce.

      Cambia i colori di WooCommerce aggiungendo una Radio con tipo di campo colore
      Configurazione dei campioni di colore
    3. Vai alla scheda Avanzate . Qui puoi modificare la larghezza del singolo elemento in px:

      Campioni di variazione del prodotto WooCommerce - Scheda Avanzate
      Radio con campo colori tipo pagina prodotto WooCommerce
    4. È inoltre possibile impostare il prezzo (fisso o percentuale) o utilizzare un'altra opzione (ad esempio logica condizionale ) se necessario. Ad esempio, aggiungiamo una classe CSS, ad esempio "campioni-colore-personalizzati" per personalizzare lo stile del campo.

      Prezzi per campioni di colore
      Impostazione dei prezzi per i campioni di colore. Puoi scegliere tra un tipo di prezzo fisso o percentuale per ciascuna opzione.

Personalizzazione dei campioni di colore di WooCommerce con i CSS

Non è richiesto ma è possibile incollare il codice CSS sulla pagina per personalizzare il campo colore. Ma, ovviamente, puoi usare la classe CSS assegnata nel 4° passaggio, ad esempio custom-color-swatches .

Nascondere la didascalia sotto l'immagine

/* Campioni di colore per i prodotti WooCommerce - nessuna didascalia sotto l'immagine */
div.fpf-radio-immagini p. campioni-colore-personalizzati input+etichetta span {
display: nessuno;
}

Cambiando la dimensione dell'immagine a 50 px e la dimensione del fotogramma a 10 px

/* Campioni di colore per i prodotti WooCommerce: immagini da 50 px e bordo da 10 px */
div.fpf-radio-immagini p. campioni-colore-personalizzati input+etichetta {
larghezza: calc( 50px + 2* 10px );
}
div.fpf-radio-immagini p. campioni-colore-personalizzati input+etichetta img {
larghezza: calc( 50px + 2* 10px );
altezza: calc( 50px + 2* 10px );
bordo: 10px solido trasparente;
}

Cambia il colore del bordo (se selezionato) in #d3d3d3

/* Campioni di colore per i prodotti WooCommerce - colore del bordo (selezionato) #d3d3d3 */
div.fpf-radio-immagini p. campioni-colore-personalizzati input:controllato+etichetta img {
colore del bordo: #d3d3d3 ;
}

Cambia la forma dell'immagine in un cerchio

/* Campioni di colore per i prodotti WooCommerce - immagini a forma di cerchio */
div.fpf-radio-immagini p. campioni-colore-personalizzati input+etichetta img {
raggio del bordo: 50%;
}
Hai bisogno di ulteriori indicazioni sulle classi CSS? Potresti trovare utile il nostro articolo sulla personalizzazione dei campi personalizzati con i CSS .

Campioni WooCommerce sulla pagina del prodotto

Vediamo ora l'effetto finale e le opzioni dei campioni di colore sulla pagina del prodotto WooCommerce!

Campi prodotto flessibili - campo dopo le modifiche CSS
Campioni di variazione del prodotto WooCommerce aggiunti con Campi di prodotto flessibili

Riepilogo e altro sui campi personalizzati

I campioni di colore per i prodotti WooCommerce sono un elemento importante che attira l'attenzione del cliente.

Naturalmente, questa soluzione funzionerà per un'ampia gamma di negozi in quanto è abbastanza semplice adattarsi a un sito Web specifico. Inoltre, è possibile inserire un motivo o un'immagine (che mostri ad esempio la trama del prodotto) al posto del colore.

Puoi ottenere l'effetto che stai cercando grazie al tipo di campo Radio con colori , che potrai facilmente aggiungere e personalizzare utilizzando il plugin Flexible Product Fields.

Inoltre, puoi trovare più tipi di campo nella versione gratuita del plug-in, ad esempio:

      • campi di testo - Email e URL
      • campi di opzione - Multi-casella di controllo e Radio con colori
      • campi di selezione - Ora e Colore
      • e altri campi per la formattazione della pagina del prodotto - Paragrafo o HTML per l'inserimento di testo e immagine