Beaver Builder Integrazione WooCommerce 2024– Come utilizzare Beaver Builder per creare pagine di prodotti e negozi WooCommerce?

Può essere eccitante creare un negozio online. Contribuisce al successo della tua attività avere una grande vetrina. Tuttavia, se vuoi progettare un negozio che funzioni bene, potresti avere difficoltà.

Un sito di eCommerce che sia gradito a te e ai tuoi clienti può essere creato con l'aiuto di un page builder WooCommerce. Diamo un'occhiata al WooCommerce collegare. Il nostro prossimo passo sarà dimostrare quanto sia facile creare il tuo negozio online con Beaver Builder. Dai, iniziamo!

costruttore di castori

Una breve introduzione a WooCommerce

Con WooCommerce puoi aggiungi la funzionalità di e-commerce al tuo sito WordPress in modo da poter vendere i tuoi prodotti online:

Inoltre, ti troverai in buona compagnia, poiché si prevede che WooCommerce avrà una quota di mercato di circa il 28% entro il 2020.

WooCommerce è una soluzione open source altamente personalizzabile, proprio come WordPress. Con esso, puoi impostare gateway di pagamento e diverse opzioni di spedizione e iniziare immediatamente con il tuo impero di eCommerce.

Usando WooCommerce, puoi anche creare, modificare e gestire i tuoi prodotti:

L'utilizzo dei plug-in aggiuntivi di WooCommerce ti dà accesso a molte altre funzionalità.  

Costruire il negozio WooCommerce e le pagine dei prodotti con Beaver Builder (in 4 semplici passaggi)

Tuttavia, prima di poter fare i conti con le funzionalità di WooCommerce, devi prima avviare un sito Web. Inizia installando e attivando i plugin WooCommerce, Beaver Builder e Beaver Themer WordPress. Ora sei pronto per creare le tue pagine prodotto e negozio.

Passaggio 1: crea il tuo negozio aggiungendo prodotti

Crea inserzioni per i tuoi prodotti come primo passo per configurare il tuo negozio. Quando usi WooCommerce, puoi vendere beni fisici, beni digitali e articoli con variazioni (come dimensioni e colore).

Se non conosci WooCommerce, puoi installare un set di prodotti campione fornito da WooCommerce per avere un'idea di come funziona il sistema con diversi tipi di articoli. Qui vengono spiegate diverse funzionalità del prodotto WooCommerce, comprese le opzioni di variazione e vendita.

Imparerai come creare un prodotto di base, se desideri iniziare da zero. Non importa cosa prevedi di vendere, le altre sezioni di questo post ti gioveranno.

Crea un nuovo prodotto nella dashboard di WordPress. Seleziona Prodotti > Aggiungi nuovo nel menu a sinistra. Compila i seguenti campi per l'articolo che desideri aggiungere al tuo negozio:

Puoi impostare la maggior parte dei parametri importanti per il tuo articolo scorrendo verso il basso fino al pannello Dati prodotto, inclusi prezzo, tasse e spedizione. In WooCommerce, hai la possibilità di includere tasse e opzioni di spedizione per i prodotti, che possono essere ignorate su base individuale.

Decidi se il tuo prodotto è scaricabile o virtuale nelle Impostazioni generali. Mantieni le caselle deselezionate se il prodotto è fisico:

Oltre alla gestione dell'inventario, puoi iniziare. Il collegamento dei prodotti ti dà la possibilità di effettuare il cross-sell e l'up-sell.

Puoi anche aggiungere una seconda descrizione più breve del tuo articolo nel campo Descrizione breve del prodotto, sotto il pannello Dati del prodotto. Le inserzioni in vetrina in genere contengono queste informazioni.

Vedrai categorie di prodotti e tag a destra dello schermo. Ecco alcuni utili organizzatori:

L'elenco dei prodotti dovrebbe includere una o due immagini. Sono disponibili le seguenti opzioni: immagini singole o gruppi di immagini:

Puoi caricare una foto dal tuo dispositivo o aggiungere un'immagine dalla tua Libreria multimediale. Allo stesso modo, puoi aggiungere immagini alle gallerie di prodotti. Le immagini possono essere semplicemente trascinate e rilasciate per riordinarle.

Passaggio 2: progettare nuove pagine di prodotti

Per visualizzare i tuoi prodotti, puoi creare pagine prodotto. Il video tutorial di Beaver Themer fornisce istruzioni dettagliate su come personalizzare le pagine dei singoli prodotti WooCommerce. 

Beaver Themer è un potente strumento per estendere Beaver Builder in un generatore di pagine WooCommerce. Puoi applicare modelli all'intero sito con questo componente aggiuntivo.  

 Fare clic su Layout tema > Aggiungi nuovo in Beaver Builder:

Aggiunta di un layout a tema con le impostazioni del prodotto per aiutarlo a fungere da generatore di pagine WooCommerce.

Il tuo layout dovrebbe avere un titolo. È necessario selezionare il layout e il tipo prima di fare clic sul pulsante Aggiungi layout tema.

Continua ad assicurarti che il nuovo design venga applicato a ogni pagina del prodotto mentre passi alla pagina successiva. Nella seconda casella, scegli Tutti i prodotti in Posizione, quindi seleziona Prodotto:

Le corrette impostazioni di layout di Themer per utilizzare Beaver Themer come page builder di WooCommerce.

Puoi modificare il tuo layout con Beaver Builder dopo aver salvato il tuo lavoro. Partendo dall'angolo in alto a destra, fai clic sul segno più blu. Dopo aver fatto clic su Modelli, fare clic su Nuovo:

La posizione del modello di prodotto WooCommerce in Beaver Thermer.

Sostituisci il layout esistente selezionando Prodotto > Sostituisci layout esistente. Sono già presenti alcune utili impostazioni predefinite, che trasformano il tuo modello in una pagina di prodotto:

Modello di prodotto predefinito di Beaver Builder

L'aggiunta o la rimozione di moduli WooCommerce dal layout di base è possibile una volta che lo hai. I moduli WooCommerce sono accessibili tramite Moduli > Moduli tema > WooCommerce. Oltre a valutazioni dei prodotti, descrizioni, upsell e molti altri, avrai molte opzioni:

Utilizzo dei moduli WooCommerce

Durante la modifica di un layout, puoi passare alla visualizzazione di un altro prodotto utilizzando la funzione Anteprima come: in Beaver Builder:

Anteprima di diversi prodotti in Beaver Builder

Con questa funzione, puoi controllare come appare ciascuno dei tuoi prodotti quando li visualizzi. Pubblica la pagina del tuo prodotto una volta che sei soddisfatto del design e dei moduli che include. Le tue singole pagine prodotto ora avranno lo stile nel nuovo formato.

Passaggio 3: crea una pagina del negozio WooCommerce

È ora di riservare alla pagina del negozio lo stesso trattamento riservato ai tuoi prodotti WooCommerce. Un layout predefinito del negozio WooCommerce è molto semplice e non molto eccitante:

Layout del negozio predefinito di WooCommerce

Quando si progetta la pagina del negozio, Beaver Themer è una scelta migliore. Inizia andando su WooCommerce > Impostazioni, facendo clic sulla scheda del prodotto e assicurandoti che la pagina Negozio punti a Negozio o qualsiasi altra pagina personalizzata che hai creato. Visualizza i tuoi prodotti come una pagina di archivio, se ne specifichi una.

Seleziona Layout tema > Aggiungi nuovo in Beaver Builder > Generatore di temi e quindi fai clic su Aggiungi nuovo. Scegli l'opzione Layout del tema in Tipo nella schermata successiva:

Creazione di un layout di pagina del negozio

La schermata seguente ti consentirà di scegliere la posizione dell'Archivio Prodotti. I prodotti del tuo negozio verranno visualizzati nella pagina Negozio e nelle pagine delle categorie di prodotti. Se necessario, puoi modificarlo.

Personalizzazione della pagina dell'archivio prodotti

Facendo clic su Avvia Beaver Builder, potrai personalizzare il tuo layout. La pagina seguente viene visualizzata quando si fa clic sul segno più nella parte superiore dello schermo e quindi si fa clic su Modelli:

Utilizzo di un modello Beaver Builder

È possibile creare facilmente una nuova pagina del negozio utilizzando il modello Prodotti. Utilizzando tutti gli strumenti che abbiamo trattato fino a questo punto, puoi apportare modifiche al modello una volta creato. 

Assicurati che il layout del tuo negozio si adatti alle impostazioni di stile del modulo Post modificandole finché non si adattano. 

Nella parte superiore dello schermo, fai clic su Fine > Pubblica una volta che le modifiche sono state salvate nel modulo. 

L'ultima cosa che devi fare è assicurarti che la pagina che hai designato come pagina del tuo Negozio appaia nel menu di navigazione del tuo sito. Altrimenti, puoi aggiungerlo dalla sezione Aspetto > Menu della dashboard di WordPress.

Passaggio 4: personalizza ulteriormente la pagina del tuo negozio con i layout WooCommerce

Un modulo WooCommerce è anche un'eccellente funzionalità di Beaver Builder che lo rende un eccellente generatore di pagine WooCommerce. Ti consente di aggiungere parti della funzionalità di WooCommerce a qualsiasi struttura di Beaver Builder sul tuo sito. In questo modulo sono disponibili le seguenti opzioni:

  • Prodotti singoli e multipli: 
  • Puoi visualizzare i prodotti selezionati in base agli ID prodotto o alle categorie, oppure puoi mostrare i prodotti in vendita, i prodotti recenti, i prodotti più votati o qualsiasi altra cosa tu voglia.
  • Carrello: Visualizza il contenuto del carrello WooCommerce.
  • Cassa: Visualizza la pagina di pagamento come appare normalmente.
  • Tracciamento dell'ordine: inserisce le informazioni sugli ordini in questo modulo.
  • Il mio account: questa pagina contiene le informazioni che si trovano normalmente nella pagina Il mio account, come le informazioni sull'account, gli ordini passati e i dettagli dell'indirizzo
Layout WooCommerce in Beaver Builder.

Collegamenti rapidi

Conclusione

Creare un negozio online che rappresenti efficacemente il tuo marchio è un'impresa impegnativa. Il processo può essere reso più semplice, tuttavia, con l'aiuto di Beaver Builder, un plug-in per WooCommerce.

Come puoi vedere, abbiamo delineato quattro passaggi importanti per costruire la tua vetrina utilizzando sia WooCommerce che Beaver Builder:

  1. Crea un negozio aggiungendo prodotti.
  2. Progetta una nuova pagina del prodotto.
  3. Crea una nuova pagina del negozio WooCommerce.
  4. Con i layout WooCommerce, puoi personalizzare ulteriormente il tuo sito eCommerce.

C'è qualcosa che vuoi sapere sull'utilizzo di Beaver Builder per creare pagine di prodotti e negozi? Per favore condividi i tuoi pensieri qui sotto nella sezione commenti!

Aishwar Babber

Aishwar Babber è un blogger appassionato e un marketer digitale. Ama parlare e bloggare sulle ultime tecnologie e gadget, il che lo motiva a correre GizmoBase. Attualmente sta esercitando la sua esperienza di marketing digitale, SEO e SMO come marketer a tempo pieno su vari progetti. È un investitore attivo in AffiliatoBay e un regista in ImageStation.

Lascia un tuo commento