Come cambiare l'aspetto del tuo modulo d'ordine

Vuoi che il tuo modulo d'ordine corrisponda al design del tuo negozio? Il generatore di WooCommerce Wholesale Order Form include controlli di stile per ogni elemento, coprendo spaziatura, colori dei pulsanti e se le etichette dei campi devono apparire. Questo articolo ti guida attraverso ogni opzione.

Prerequisiti

• WooCommerce Wholesale Order Form installato e attivato
• Almeno un modulo d'ordine già creato. Se non l'hai ancora fatto, consulta la Guida introduttiva di WooCommerce Wholesale Order Form.

Apertura del pannello delle impostazioni dell'elemento

Le opzioni di stile e visualizzazione sono disponibili per ogni singolo elemento nel tuo modulo d'ordine. Per aprirle:

1. Vai su Wholesale → Order Forms nella tua bacheca WordPress.
2. Fai clic sul modulo d'ordine che desideri modificare per aprirlo nel generatore.
3. Passa il mouse sopra un elemento qualsiasi del modulo. Verrà visualizzata un'icona a forma di ingranaggio nell'angolo in alto a destra di quell'elemento.
4. Fai clic sull'icona a forma di ingranaggio per aprire il pannello delle impostazioni nella barra laterale destra.

La barra laterale mostra due sezioni: Stili (spaziatura e aggiustamenti visivi) e Opzioni (impostazioni specifiche dell'elemento). Fai clic su un'intestazione di sezione per espanderla. Le sezioni seguenti spiegano cosa contiene ciascuna.

Regolazione della spaziatura degli elementi

Utilizza la sezione Stili per controllare lo spazio attorno a qualsiasi elemento. Ogni elemento supporta valori di margine e padding, così puoi perfezionare il layout per adattarlo al design del tuo negozio.

1. Fai clic sull'icona a forma di ingranaggio sull'elemento che desideri regolare.
2. Espandi la sezione Stili nella barra laterale.
3. Inserisci i valori per Margine (spazio esterno all'elemento) o Padding (spazio interno all'elemento). I valori sono in pixel per impostazione predefinita. Usa il selettore di unità per passare a %, em o rem se necessario.
4. I quattro lati sono collegati per impostazione predefinita, quindi un valore che inserisci si applica contemporaneamente in alto, a destra, in basso e a sinistra. Fai clic sull'icona di collegamento per scollegare i lati, quindi inserisci ciascun lato in modo indipendente.
5. Fai clic su Salva bozza (o Aggiorna se il modulo è già pubblicato) nella barra degli strumenti in alto per salvare il modulo.

Modifica dei colori dei pulsanti

Gli elementi pulsante, come il pulsante Aggiungi al carrello e il pulsante Cerca, hanno controlli colore nella loro sezione Stili. Puoi impostare colori separati per lo sfondo del pulsante e per il testo del pulsante.

1. Fai clic sull'icona a forma di ingranaggio sull'elemento pulsante che desideri modificare.
2. Espandi la sezione Stili nella barra laterale.
3. Fai clic sul campione di colore accanto a Colore pulsante per aprire il selettore di colori e scegliere il colore di sfondo.
4. Fai clic sul campione di colore accanto a Colore testo pulsante per impostare il colore dell'etichetta.
5. Fai clic su Salva bozza (o Aggiorna se il modulo è già pubblicato) nella barra degli strumenti in alto per salvare il modulo.

Visualizzazione o nascondere le etichette dei campi meta del prodotto

Se il tuo modulo d'ordine include una colonna Meta prodotto, utilizzata per visualizzare dati personalizzati del prodotto come peso, dimensioni o altri attributi memorizzati nei meta del prodotto, puoi scegliere se l'etichetta del campo deve apparire accanto a ciascun valore. Questo è utile quando desideri un layout più pulito che mostri solo i valori, senza i nomi dei campi visualizzati accanto ad essi.

1. Fai clic sull'icona a forma di ingranaggio sulla tua colonna Meta prodotto per aprire le sue impostazioni.
2. Espandi la sezione Opzioni nella barra laterale.
3. Individua la casella di controllo Mostra etichette campi. Per impostazione predefinita, questa è selezionata, il che significa che le etichette sono visibili accanto a ciascun valore.
4. Deseleziona Mostra etichette campi per nascondere le etichette, lasciando visibili solo i valori nel modulo d'ordine.
5. Fai clic su Salva bozza (o Aggiorna se il modulo è già pubblicato) nella barra degli strumenti in alto per salvare il modulo.

Nota: Le chiavi meta che iniziano con un underscore (es. _my_field) sono private in WordPress e non verranno visualizzate nel modulo d'ordine, indipendentemente da questa impostazione.

Risoluzione dei problemi

Le mie modifiche allo spaziatura non vengono visualizzate nel frontend

Assicurati di aver salvato il modulo con Salva bozza o Aggiorna nella barra degli strumenti in alto dopo aver inserito i valori di spaziatura. Se hai salvato ma non vedi ancora la modifica, prova a svuotare la cache del browser e di eventuali plugin di caching (come WP Rocket o W3 Total Cache), quindi ricarica la pagina.

La colonna Meta Prodotto non mostra alcun valore

Controlla le chiavi meta che hai aggiunto nella tabella Meta Prodotto nella sezione Opzioni. La chiave deve corrispondere esattamente a quanto memorizzato nei campi personalizzati del prodotto, inclusa la sensibilità alle maiuscole/minuscole. Conferma inoltre che la chiave meta non inizi con un underscore, poiché i campi meta privati sono esclusi dalla visualizzazione.

La casella di controllo Mostra etichette campi non viene salvata

Questa opzione richiede WooCommerce Wholesale Order Form versione 3.0.9 o successiva. Controlla la versione del tuo plugin in Plugin → Plugin installati e aggiorna se necessario.

Domande frequenti

Posso nascondere le etichette per alcuni campi meta ma mostrarle per altri?
No. L'impostazione Mostra etichette campi si applica a tutti i campi meta in quella colonna contemporaneamente. Se hai bisogno di una visualizzazione mista, considera l'aggiunta di due colonne Meta Prodotto separate: una con le etichette mostrate e una con le etichette nascoste, ciascuna configurata con chiavi meta diverse.

Posso cambiare la dimensione del carattere o il colore del testo degli elementi?
I controlli di stile integrati attualmente coprono la spaziatura e i colori dei pulsanti. Per lo stile del testo, puoi aggiungere CSS personalizzato tramite Aspetto → Personalizza → CSS aggiuntivo e selezionare le classi CSS del modulo d'ordine.

Serve aiuto?

Se hai una domanda o riscontri problemi, siamo qui per aiutarti.

• Utenti Premium: Apri un ticket di supporto
• Utenti Gratuiti: Visita il nostro forum della community