Costruisci e progetta una straordinaria pagina di prodotto WooCommerce con Elementor

Devi modificare la pagina del tuo prodotto per distinguere il tuo negozio e-commerce dalla concorrenza e offrire ai tuoi clienti un'esperienza unica. Inoltre, la possibilità di 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 fantastico, vero?

Lo styling 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 assumere il controllo dell'aspetto e del funzionamento del tuo negozio.

Cominciamo.

• Creazione di un modello Elementor
• Creazione dell'immagine o della galleria del prodotto Elementor
• Titolo del prodotto WooCommerce, prezzo e aggiunta al carrello
• Configurazione delle schede prodotto 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 passo della procedura è 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.

Creazione dell'immagine o della 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; 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 incollando il codice seguente.

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

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 Elementor, quindi trascinali e rilasciali per disporli nella sequenza sopra indicata; questo è completamente funzionale, ma vogliamo personalizzarlo per adattarlo allo stile come il tema Hello Elementor della sezione precedente. Applicare stili ai moduli con Elementor è semplice, 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, utilizzerò 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 dello 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 modificato il raggio del bordo del selettore dell'importo su 0, cosa che puoi fare nella scheda Stile per Quantità.

Configurazione delle schede prodotto Elementor

Ogni prodotto deve mostrare alcune informazioni di base come una descrizione del prodotto e recensioni se disponibili; questo viene comunemente gestito tramite le schede prodotto.

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 di nuovo bisogno di un po' di CSS personalizzato. Inizia a modificare le schede Dati prodotto, quindi fai clic sulla scheda Avanzate e scorri verso il basso fino a CSS personalizzato. Inserisci il CSS sottostante e potrai regolare i colori in base al tuo design.

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

Breve descrizione del prodotto Elementor

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

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

Non è ancora richiesto alcuno stile qui poiché ha ereditato gli stili da Hello Elementor.

Upsell di prodotti Elementor e WooCommerce

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

Cerca il modulo Upsell del prodotto nel builder Elementor e inseriscilo in una nuova riga dietro le schede Dati prodotto.

Come puoi vedere, ciò richiede un piccolo 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 su 0 – 0

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

Una volta terminato, 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 tag particolare.

Conclusione: generatore di pagine di prodotto

Alcuni utenti possono avere difficoltà a visualizzare le impostazioni di progettazione personalizzate, come il colore del carattere e la tipografia, quando utilizzano Elementor. L'aspetto del tuo negozio WooCommerce potrebbe essere influenzato se utilizzi 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. Utilizza una pagina vuota, chiudi la finestra pop-up della libreria dei modelli quando viene visualizzata 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 vedere tutti i diversi widget attualmente disponibili visitando questa pagina. Se preferisci, puoi disporre i widget dove vuoi nel layout della pagina e personalizzarne gli stili per adattarli all'aspetto desiderato.

Devi modificare la pagina del tuo prodotto per distinguere il tuo negozio e-commerce dalla concorrenza e offrire ai tuoi clienti un'esperienza unica. Inoltre, la possibilità di 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 assisterti nella creazione di pagine di prodotto personalizzate. Ci auguriamo che tu abbia trovato questo tutorial informativo e che ti abbia fornito le informazioni necessarie per personalizzare il tuo prodotto WooCommerce e le pagine di archivio dei prodotti utilizzando Elementor. Hai utilizzato Elementor per creare pagine WooCommerce in passato? Puoi condividere i tuoi pensieri nella sezione commenti. Saremo lieti di dare un'occhiata.