Costruisci e progetta una fantastica pagina del prodotto WooCommerce con Elementor

Devi modificare la pagina del tuo prodotto per distinguere il tuo negozio di e-commerce dalla concorrenza e offrire ai tuoi clienti un'esperienza unica. Inoltre, l'opzione per personalizzare esteticamente la pagina del tuo prodotto è fondamentale per mantenere un design visivo coerente in tutto il tuo negozio online.

Elementor è uno dei principali costruttori di siti Web WordPress sul mercato, ma sapevi anche che potresti creare negozi WooCommerce utilizzandolo?

Molti moduli Elementor WooCommerce integrati ti consentono di inserire contenuti WooCommerce o blocchi di funzionalità o di modellarli utilizzando il builder Elementor. Abbastanza grande, vero?

Lo stile e la personalizzazione di WooCommerce richiedevano PHP e CSS per ogni piccola modifica, ma man mano che strumenti come Elementor migliorano e diventano più complessi, diventano disponibili sempre più opzioni per controllare l'aspetto e il funzionamento del tuo negozio.

Iniziamo.

• Creazione di un modello Elementor
• Costruire l'immagine o la galleria del prodotto Elementor
• Titolo del prodotto WooCommerce, prezzo e aggiungi al carrello
• Configurazione delle schede dei prodotti Elementor
• Breve descrizione del prodotto Elementor
• Upsell dei prodotti Elementor e WooCommerce
• Conclusione - Generatore di pagine di prodotto Elementor

Creazione di un modello Elementor

Il primo passaggio della procedura consiste nel creare un nuovo modello Elementor accedendo a Modelli nella dashboard di WordPress. Fai clic su "Crea nuovo", quindi seleziona Prodotto singolo come modello che desideri creare.

Poiché sviluppiamo questo modello da zero, non è necessario inserire alcun blocco; esci dalla casella successiva fino a raggiungere la solita schermata del builder Elementor per una nuova pagina.

Costruire l'immagine o la galleria del prodotto Elementor

Ogni prodotto WooCommerce ha un'immagine del prodotto o una galleria di immagini che mostra le fotografie del prodotto ai clienti. Elementor fornisce un modulo Immagini prodotto integrato che ci consente di inserirlo nel nostro modello.

Crea una semplice riga di 2 colonne e inserisci il modulo Immagini prodotto nella colonna di sinistra; questo sembra pratico e svolge il lavoro, ma personalizziamo il badge di vendita in modo che corrisponda al tema Elementor Hello utilizzato per questo articolo. Per fare ciò, dobbiamo applicare una piccola riga di CSS personalizzato, che può essere introdotto andando su Avanzate> CSS personalizzato e incollare il codice sottostante.

selector .onsale { \sbackground-color: #cc3366 ; \S}

Titolo del prodotto WooCommerce , prezzo e aggiungi al carrello

Aggiungeremo i moduli Elementor per Titolo prodotto, Prezzo prodotto e Aggiungi al carrello nella colonna di destra.

Cerca questi tre moduli nel costruttore di Elementor, quindi trascinali e rilasciali per disporli nella sequenza sopra indicata; questo è completamente funzionale, ma vogliamo personalizzarlo in modo che corrisponda allo stile come il tema Hello Elementor della sezione precedente. Lo stile dei moduli con Elementor è facile, tutto ciò che devi fare è fare clic sul modulo e l'editor dovrebbe aprire le opzioni di stile a sinistra.

Il contenuto di questi moduli è eccellente. Quindi lavoreremo nella scheda Stile. Innanzitutto, aggiorniamo il carattere e il colore del titolo del prodotto in modo che corrispondano a quelli utilizzati nel tema Hello Elementor.

Dobbiamo quindi fare lo stesso per i moduli Prezzo prodotto e Aggiungi al carrello facendo clic su ciascun modulo e modificando il colore del testo. Per il prezzo del prodotto, userò un grigio scuro per contrastare il titolo, quindi digita questo codice esadecimale se stai seguendo - #54595f

Successivamente, nel modulo Aggiungi al carrello, aggiorneremo alcune cose. Il colore di sfondo del pulsante e il raggio del bordo del pulsante utilizzando le impostazioni seguenti:

• Imposta il contenuto su "Aggiungi al carrello".
• Imposta il colore di sfondo su "#cc3366"
• Imposta il raggio del bordo su 0

Ho cambiato il raggio del bordo del selettore della quantità su 0, cosa che puoi fare nella scheda Stile per Quantità.

Configurazione delle schede dei prodotti Elementor

Ogni prodotto deve visualizzare alcune informazioni di base come una descrizione del prodotto e recensioni, se disponibili; questo è comunemente gestito tramite le schede dei prodotti.

Crea una nuova riga sotto la sezione superiore e trascina il modulo Schede dati prodotto dal builder Elementor nella riga per inserirlo. Non è richiesto molto stile qui perché eredita alcuni stili dal tema Hello Elementor. Tuttavia, modifichiamo lo stile del pulsante di invio della recensione.

Per fare ciò, avremo bisogno di nuovo di un po' di CSS personalizzato. Inizia a modificare le schede dei dati del prodotto, quindi fai clic sulla scheda Avanzate e scorri verso il basso fino a CSS personalizzato. Inserisci il CSS sottostante e puoi regolare i colori in base al tuo design.

.woocommerce #review form #reply .form-submit input { background-color: #cc3366; colore: #fff; bordo-raggio: 0px; }

Descrizione breve del prodotto Elementor

Ok, finora abbiamo un design decente e dall'aspetto semplice, ma sembra un po' scarso. L'aggiunta di un modulo Descrizione breve del prodotto nella parte superiore può aiutare a riempirlo e aggiungere più contesto.

Cerca il modulo Descrizione breve di WooCommerce, quindi trascinalo sotto il prezzo del prodotto e sopra il modulo Aggiungi al carrello.

Non è ancora richiesto uno stile qui poiché ha ereditato gli stili di Hello Elementor.

Upsell dei prodotti Elementor e WooCommerce

Aumentare il valore medio del tuo carrello è fondamentale per ogni sito WooCommerce, motivo per cui è bello che Elementor includa un modulo Product Upsells per integrare facilmente la personalizzazione nel tuo negozio.

Cerca il modulo Upsells del prodotto nel builder Elementor e inseriscilo in una nuova riga dietro le schede dei dati del prodotto.

Come puoi vedere, questo richiede un po' di aggiustamento per completare il resto del nostro stile. Inizia a modificare il modulo e apporta le seguenti modifiche:

• Imposta il colore del titolo su – #cc3366
• Imposta il colore dell'intestazione su – #cc3366
• Imposta il colore del prezzo su – #54595f
• Imposta il colore di sfondo del pulsante su – #cc3366
• Imposta il colore del pulsante su – #fff
• Imposta il raggio del bordo del pulsante t0 – 0

Il prodotto finito sarà simile a quanto sopra. Puoi regolare il codice esadecimale del colore come ritieni opportuno se usi questa guida come punto di partenza per il tuo modello.

Una volta che hai finito, pubblichi il tuo modello. Nella finestra successiva, vedrai la domanda "Dove vuoi visualizzare il tuo modello?". Fare clic su "Aggiungi condizione" per determinare quando utilizzare questo modello. Puoi selezionare "Tutti i prodotti" per utilizzare il modello su tutte le pagine dei tuoi prodotti. Puoi anche scegliere di utilizzare questo modello solo per i prodotti che rientrano in una categoria specifica o a cui è associato un particolare tag.

Conclusione – Generatore di pagine del prodotto Elementor

Alcuni utenti possono avere difficoltà a ottenere le proprie impostazioni di progettazione personalizzate, come il colore del carattere e la tipografia, da visualizzare quando si utilizza Elementor. L'aspetto del tuo negozio WooCommerce potrebbe essere influenzato se stai utilizzando un tema WordPress in grado di controllare l'aspetto del tuo negozio. Se riscontri questo problema, tieni presente che in alcuni casi il tuo articolo potrebbe sovrascrivere le impostazioni della pagina personalizzata.

Puoi anche scegliere una pagina vuota e crearne una da zero utilizzando i widget del prodotto per un aspetto completamente personalizzato. Usa una pagina vuota, chiudi la finestra a comparsa della libreria di modelli quando appare e inizia a costruire sulla pagina appena creata. Il pulsante personalizzato "Aggiungi al carrello", "Prezzo del prodotto", "Immagine del prodotto" e "Titolo e descrizione del prodotto" sono solo alcuni dei widget WooCommerce che puoi utilizzare per personalizzare la pagina del tuo prodotto. Puoi guardare tutti i diversi widget attualmente disponibili visitando questa pagina. Se preferisci, puoi disporre i widget dove vuoi sul layout della pagina e personalizzare i loro stili in modo che corrispondano all'aspetto desiderato.

Devi modificare la pagina del tuo prodotto per distinguere il tuo negozio di e-commerce dalla concorrenza e offrire ai tuoi clienti un'esperienza unica. Inoltre, l'opzione per personalizzare esteticamente la pagina del tuo prodotto è fondamentale per mantenere un design visivo coerente in tutto il tuo negozio online. Elementor è uno strumento fantastico per personalizzare le pagine del tuo negozio WooCommerce ed è altamente raccomandato. Oltre ad essere semplice da usare, il generatore di pagine include tutti i widget e le opzioni di stile necessari per aiutarti a creare pagine di prodotti personalizzate. Ci auguriamo che tu abbia trovato questo tutorial informativo e ti abbia fornito le informazioni necessarie per personalizzare il tuo prodotto WooCommerce e le pagine dell'archivio dei prodotti utilizzando Elementor. Hai usato Elementor per creare pagine WooCommerce in passato? Siete invitati a condividere i vostri pensieri nella sezione commenti. Saremo lieti di dare un'occhiata.