Tutto ciò che devi sapere sui moduli del prodotto WooCommerce di Divi 5

La compatibilità con WooCommerce è stata ora ampliata a Divi 5, dandoti pieno controllo sulle pagine del prodotto senza fare affidamento sui modelli integrati di WooCommerce. I moduli di prodotto WooCommerce di recente integrazione consentono di progettare layout coinvolgenti e intuitivi che corrispondono al tuo marchio e aiutano a aumentare le vendite, sfruttando tutte le funzionalità di Divi 5, incluso Flexbox, per costruire pagine di prodotti con il moderno controllo dei layout.

In questo post, tratteremo le caratteristiche chiave dei moduli e ti mostreremo come usarle per il tuo prossimo sito di eCommerce Divi 5. Immergiamoci.

Quali sono i moduli del prodotto WooCommerce?

I moduli di prodotto WOO sono elementi di contenuto specializzati all'interno di Divi 5, progettati per personalizzare le pagine di prodotti e categorie per i negozi a base di woo. Questi moduli sostituiscono i modelli WooCommerce che sono standard con il plug -in, consentendo di creare layout personalizzabili. A differenza di questi modelli tradizionali, i moduli di Divi 5 consentono la libertà creativa mantenendo la compatibilità con la funzionalità principale di WooCommerce.

Il rilascio di 17 moduli WooCommerce in Divi 5 segna una pietra miliare significativa. Questi moduli, che coprono tutti gli aspetti di progettazione della pagina di prodotto e categoria, non sono più in modalità legacy, il che significa che sono tutti completamente ottimizzati per l'architettura moderna di Divi 5. Con questa transizione verso una base più efficiente, Divi 5 funziona meglio, è più scalabile ed è compatibile con il futuro di WordPress.

I restanti 8 moduli WOO, incentrati sulle pagine del carrello e del checkout, dovrebbero essere presto lanciate.

Caratteristiche chiave dei moduli di prodotto WooCommerce di Divi 5

Esaminiamo le caratteristiche chiave che ci si possono aspettare ora che i moduli del prodotto WooCommerce siano stati integrati in Divi 5.

Set di moduli completo

Il primo lotto dei moduli di prodotto WooCommerce di Divi 5 include strumenti progettati per gestire un aspetto specifico della progettazione di pagina di prodotto e categoria. Questi moduli sono:

• Woo Breadcrumbs: mostra percorsi di pane navigational per aiutare gli utenti a navigare facilmente nel negozio.
• Woo Avviso: mostra messaggi di sistema come aggiornamenti del carrello, errori o conferme.
• Woo Product Aggiungi al carrello: rende un pulsante Aggiungi al carrello con controlli di quantità opzionali.
• Descrizione del prodotto WOO: Output la descrizione del prodotto principale in forma lunga.
• Woo Product Gallery: visualizza immagini di prodotto aggiuntive in formati di griglia o cursore.
• Woo Product Images: mostra l'immagine del prodotto principale o una galleria di immagini.
• Woo Informazioni sul prodotto: visualizza i dettagli del prodotto come peso, dimensioni o attributi.
• Woo Product Meta: mostra il prodotto SKU, categorie e tag.
• Woo Prezzo del prodotto: visualizza il prezzo del prodotto, compresi i prezzi di vendita.
• Valutazione del prodotto WOO: mostra il conteggio medio delle stelle e il conteggio delle revisioni.
• WOO Recensioni sui prodotti: consente ai clienti di visualizzare e inviare recensioni sui prodotti.
• Woo Product Stock: indica la disponibilità del prodotto e i livelli di stock.
• Scheda del prodotto WOO: visualizza le schede del prodotto predefinite per descrizione, informazioni aggiuntive e recensioni.
• Titolo del prodotto WOO: emette il nome del prodotto come intestazione personalizzabile.
• Woo Product Upsell: promuove i prodotti UPSell per incoraggiare gli acquisti di valore superiore.
• Prodotti Woo: crea griglie di prodotto personalizzabili per le pagine di categoria.
• Prodotti correlati a Woo: visualizza prodotti correlati in base a categorie o tag.

Insieme, questi moduli forniscono tutto il necessario per costruire pagine di prodotti e categorie, dal pangrattato di navigazione ai display di prodotti dinamici.

Libertà creativa

Moduli di prodotto WooCommerce di Divi 5 Utenti gratuiti dai vincoli dei modelli WooCommerce standard. Con questi moduli, puoi controllare completamente il layout, la struttura e il design delle pagine del prodotto, creando esperienze uniche.

I moduli supportano il contenuto dinamico, il che significa che estraggono i dati del prodotto direttamente da WooCommerce, garantendo aggiornamenti in tempo reale per prezzi, livelli di scorta e descrizioni. Ciò consente di creare pagine che guidano il coinvolgimento e le conversioni senza richiedere plugin di terze parti o codice personalizzato.

Opzioni di personalizzazione

Ogni modulo ha ampie impostazioni di design, tutte gestibili all'interno del Visual Builder. Puoi personalizzare elementi come gallerie di prodotti, badge di vendita, pulsanti e altro con opzioni per tipografia, colori, spaziatura e animazioni.

Ad esempio, è possibile regolare il layout del modulo Galleria del prodotto WOO per visualizzare le immagini in un dispositivo di scorrimento o griglia, modellare il pulsante del prodotto WOO Aggiungi al carrello con colori personalizzati ed effetti del mouse o modificare il modulo di valutazione del prodotto WOO per allineare perfettamente le valutazioni delle stelle con il tuo design.

Queste impostazioni ti consentono di creare facilmente pagine coerenti e marchiate.

Modelli dinamici con Builder a tema

Il costruttore di temi di Divi 5 ti consente di abbracciare il pieno potenziale dei moduli di prodotto WooCommerce consentendo di creare modelli globali per le pagine di prodotti e categorie. Con Tema Builder, puoi progettare un singolo modello che si applica a tutti i prodotti e categorie nel tuo negozio, garantendo un aspetto coerente e coerente.

Loop Builder per il contenuto dinamico di WooCommerce

Divi 5 Loop Builder offre un modo alternativo per creare contenuti di Woo dinamici. Con Loop Builder, è possibile interrogare i prodotti WooCommerce e progettare loop di prodotti flessibili utilizzando qualsiasi elemento Divi, creando layout, elenchi e giostra che vanno oltre la struttura fissa dei moduli di prodotto dedicati. Per layout a singolo prodotto, utilizzare i moduli del prodotto WOO; Per le raccolte di prodotti e gli archivi, utilizzare il costruttore di loop.

Come utilizzare i moduli del prodotto WooCommerce di Divi 5

Questa sezione ti guiderà attraverso la creazione di una pagina del prodotto nel costruttore del tema di Divi 5 utilizzando i nuovi moduli di prodotto WooCommerce.

Crea un nuovo modello di costruttore di temi

Passa a Divi> Tema Builder nella dashboard WordPress. Fare clic su + Aggiungi nuovo modello .

Fai clic su Build Nuovo modello quando viene visualizzata la finestra di dialogo.

Successivamente, dovremo assegnare il nostro modello ai nostri prodotti. Sotto i prodotti , selezionare tutti i prodotti per assegnare il modello.

Fai clic su Crea modello per assegnarlo.

Fai clic su Aggiungi corpo personalizzato . Questo ci consentirà di costruire il corpo del nostro modello di pagina del prodotto.

Scegli Crea corpo personalizzato quando viene visualizzata la finestra di dialogo.

Costruisci il modello di prodotto

Quando il builder del tema viene lanciato, puoi costruire un modello da zero, scegliere un layout premade o costruire con AI. Selezioneremo Build da zero per questo tutorial.

Fai clic sull'icona Green + per aggiungere una nuova riga.

Quando vengono visualizzate le opzioni , scegli la riga a due colonne. Nuove righe aggiunte a qualsiasi pagina o modello Divi 5 utilizzerà per impostazione predefinita. Il sistema di layout Flexbox di Divi 5 offre un maggiore controllo su come appariranno le pagine del prodotto che mai, incluso il cambiamento di come si accumula i moduli del prodotto WooCommerce su diverse dimensioni dello schermo.

Scorri verso il basso per rivelare l'opzione Moduli del prodotto WOO . Una volta cliccati, avrai 17 moduli Divi 5 Woo e 8 moduli legacy (Divi 4).

Aggiungi il modulo di immagini di prodotti WOO

Trova e seleziona il modulo Immagini del prodotto WOO e aggiungilo alla prima colonna.

Questo post è selezionato per impostazione predefinita nel campo del prodotto nella scheda Contenuto . Se desideri creare il modello utilizzando un prodotto esistente, scegli dal menu a discesa. Questo è un ottimo modo per visualizzare in anteprima come apparirà il tuo modello durante la creazione. Ricorda di sostituirlo a questo post prima del salvataggio finale.

Espandi il menu a discesa Elements per rivelare le impostazioni. Qui, puoi controllare quali immagini vengono visualizzate nel modulo, tra cui l'immagine in primo piano, le immagini della galleria e il badge di vendita.

Fai clic sul menu a discesa immagine nella scheda Design per rivelare le impostazioni. Qui, puoi forzare l'immagine ad occupare tutto lo spazio disponibile (force fullwidth), aggiungere un bordo, ombra della scatola, regolare la spaziatura o aggiungere filtri.

Puoi anche modellare il badge di vendita assegnando un colore di sfondo, testo, bordi e altro ancora.

Aggiungi il modulo Titolo del prodotto WOO

Nella 2a colonna, fare clic su Moduli del prodotto WOO e scorrere per selezionare il modulo Titolo del prodotto WOO .

Utilizzare il menu a discesa nel campo del prodotto della scheda Contenuto per selezionare un prodotto e visualizzare in anteprima come apparirà nel modello.

Quindi, vai alla scheda Design del modulo ed espandi il menu a discesa del testo del titolo . Qui, puoi assegnare un carattere e modellare l'intestazione come desideri.

Aggiungi il modulo di prezzo del prodotto WOO

Sotto il titolo del prodotto, fare clic per aggiungere un nuovo modulo. Seleziona i moduli del prodotto WOO e scorrere per selezionare il modulo di prezzo del prodotto WOO .

Nella scheda Design , puoi modellare ogni aspetto del prezzo del prodotto, incluso il testo, il testo di vendita, il nuovo testo dei prezzi e altro ancora.

Aggiungi il modulo di valutazione del prodotto WOO

Successivamente, aggiungeremo il modulo di valutazione del prodotto WOO sotto il modulo Woo Price.

Nella scheda Contenuto in Elements , puoi scegliere di mostrare o nascondere la valutazione delle stelle e il conteggio delle recensioni dei clienti.

Nella scheda Design , il menu a discesa layout consente di scegliere come visualizzare la valutazione delle stelle. Gli elementi possono essere visualizzati in linea o impilati.

Altre opzioni di styling includono l'assegnazione di un colore, delle dimensioni del testo e della spaziatura delle lettere per le stelle e le opzioni di styling per il testo di valutazione.

Aggiungi il modulo Descrizione del prodotto WOO

Sotto il modulo di valutazione Woo Star, fai clic per aggiungere un nuovo modulo WOO. Questa volta, selezioneremo il modulo Descrizione del prodotto WOO . Nella scheda Contenuto , scegli quale descrizione da visualizzare (descrizione o breve descrizione).

Nella scheda Design , puoi modellare la descrizione con opzioni per carattere, peso, stile, allineamento, colore, dimensioni e altro ancora.

Aggiungi il prodotto WOO Aggiungi al modulo carrello

Successivamente, aggiungeremo il prodotto WOO Aggiungi al modulo CART . Consentirà ai tuoi clienti di aggiungere il prodotto ai loro carrelli e scegliere eventuali variazioni assegnate al prodotto.

Gli elementi attivano nella scheda Contenuto consentono di mostrare o nascondere il campo di quantità e lo stock disponibile. Nota rapida: per la quantità di stock da visualizzare, è necessario controllare lo stock nel prodotto WOO stesso.

Puoi modellare le etichette del campo, il testo, i menu a discesa (per le variazioni) e il pulsante per abbinare il tuo marchio nella scheda Design .

Continua ad aggiungere moduli, come il meta modulo Woo Product Meta per visualizzare numeri e categorie SKU.

È inoltre possibile aggiungere il modulo delle schede del prodotto WOO per visualizzare una descrizione, recensioni e informazioni aggiuntive sul tuo prodotto.

Per la massima portata, è possibile visualizzare una serie di prodotti correlati sul modello del tuo prodotto per incoraggiare i visitatori del tuo sito a esplorare prodotti aggiuntivi nel tuo negozio, aumentando la possibilità di una conversione.

Salvare il modello

Una volta terminato l'aggiunta di moduli, apportare eventuali modifiche aggiuntive, quindi salva il modello facendo clic sul pulsante Salva nell'angolo in alto a destra del builder del tema.

Quindi, fai clic sul pulsante Exit per tornare al Dashboard del Builder del tema.

Di nuovo nella dashboard del builder del tema, fai clic su Salva modifiche per salvare il modello e applicarlo ai tuoi prodotti WOO.

Come puoi vedere, la creazione di un modello di prodotto con i moduli di prodotto WOO di Divi 5 è un processo semplice. Non copriremo tutti i moduli in questo tutorial, ma utilizzando tutti loro, puoi creare pagine impressionanti di prodotti o categorie che mantengono i visitatori coinvolti.

Scarica i file

Scarica gratuitamente

Unisciti alla newsletter Divi e ti invieremo una copia del pacchetto di layout della pagina di destinazione di Divi, oltre a tonnellate di altre risorse, suggerimenti e trucchi di Divi straordinari e gratuiti. Segui e sarai un Master Divi in ​​pochissimo tempo. Se sei già sottoscritto, digita semplicemente il tuo indirizzo email di seguito e fai clic su Download per accedere al pacchetto di layout.

SCARICAMENTO

Ti sei iscritto con successo. Controlla il tuo indirizzo email per confermare l'abbonamento e accedere ai pacchetti di layout Divi settimanali gratuiti!

Qual è il futuro per l'integrazione WooCommerce di Divi 5?

Il secondo lotto di moduli WooCommerce, incentrato sulle pagine del carrello e del checkout, sarà rilasciato nelle prossime settimane, concludendo l'integrazione con WooCommerce. Queste aggiunte consentiranno agli utenti di personalizzare completamente l'intero imbuto di e -commerce, dalla navigazione del prodotto al checkout. La beta pubblica Divi 5 perfezionerà ulteriormente queste funzionalità, incorporando feedback degli utenti e correzioni aggiuntive per garantire la stabilità.

Oltre alla compatibilità e all'integrazione di WooCommerce, Divi 5 continua a evolversi con funzionalità recenti come il modulo di carosello di gruppo per la creazione di cursori di prodotti dinamici, il modulo Lottie per l'aggiunta di animazioni leggere e un nuovo sistema di layout Flexbox per un controllo del layout avanzato. Queste aggiunte completano i moduli WOO, offrendo possibilità ancora più creative per i siti di e -commerce.

Prova oggi i moduli del prodotto Woo di Divi 5

I moduli di prodotto WOO di Divi 5 consentono di creare pagine accattivanti di prodotti e categorie con flessibilità e creatività senza pari. I moduli offrono una miscela di libertà creativa, integrazione dinamica dei contenuti e prestazioni, il tutto all'interno di un'interfaccia intuitiva. Dalle gallerie di prodotti personalizzabili ai layout personalizzati tramite The Tema Builder, Divi 5 semplifica la creazione di pagine di negozi ad alta conversione.

Sei pronto a immergerti in Divi 5? Scarica l'ultimo alfa pubblica Divi 5 per esplorare questi moduli e vedere come possono trasformare il tuo sito WooCommerce. Ci piacerebbe sentire i tuoi pensieri. Condividi il tuo feedback nei commenti o connettiti con noi sui nostri canali di social media.