Come creare pagine di prodotto WooCommerce personalizzate utilizzando Element

Al giorno d'oggi, Element è tra i costruttori di pagine di alto livello. È molto facile creare un sito Web utilizzando le funzionalità dei costruttori di pagine.

Tuttavia, fornisce progetti premade ma se si desidera creare da soli, allora il costruttore di trascinamento di Elementatore rende ogni operazione molto semplice. Quindi è una situazione vantaggiosa per tutti.

A proposito, le pagine del prodotto si trovano in quasi tutti i sito di e -commerce, ma una pagina del prodotto WooCommerce personalizzata viene costruita quando il proprietario del sito deve mostrare un prodotto in modo diverso.

Durante la progettazione del sito è possibile creare pagine WooCommerce personalizzate.

E in questo blog, vedremo come creare pagine di prodotti WooCommerce personalizzati utilizzando Elementator Page Builder in un sito Web WordPress.

Quali strumenti abbiamo bisogno per creare pagine di prodotto WooCommerce personalizzate

In questo blog, avremo bisogno del plug -in Element. Oltre a ciò, avremo anche bisogno di componenti aggiuntivi elementi.

Element semplifica il processo di costruzione di pagina e l' addon Element aiuta ad estendere la potenza di Element aggiungendo widget e funzionalità extra ai widget.

Element Addons ha alcuni widget che si sentono illegali da usare a causa della loro operazione.

Quindi iniziamo ora,

Come creare pagine di prodotto WooCommerce personalizzate utilizzando Element

Innanzitutto, installiamo entrambi i plugin.

Installazione del plug -in Element

Passaggio 1) Apri la dashboard

Accedi alla dashboard WordPress.

Passaggio 2) Vai su plugin e fai clic su Aggiungi nuovo plugin

Nel cruscotto, puoi vedere diversi menu sul lato sinistro. Vai a plugin e fai clic su Aggiungi nuovo plugin.

Passaggio 3) Vai alla barra di ricerca e cerca Elementor

In questa pagina, troverai i plugin. Vai alla barra di ricerca e cerca l'elemento.

Passaggio 4) Installare e attivare l'elemento

Dopo aver cercato l'elemento, apparirà nell'elenco del plugin. Fare clic sul pulsante Installa, dopo l'installazione, fare clic sul pulsante Attiva per attivare il plug -in Element.

Caricamento del plug -in componenti aggiuntivi elementi

Innanzitutto, scarica i componenti aggiuntivi Element da Thehunk.

Vai alla pagina dei componenti aggiuntivi Element e acquista il plug -in. Puoi guardare questo tutorial se hai bisogno di una mano per ottenere i componenti aggiuntivi Element.

Passaggio 1) Apri la dashboard e vai alla pagina del plugin

Ripeti gli stessi passaggi e raggiungi la pagina del plugin.

Passaggio 2) Fare clic sul plug -in Carica

Vai in alto a sinistra e fai clic sul plug -in Carica.

Passaggio 3) Carica i componenti componenti elementi

Fai clic su Installa ora e quindi attiva il plug -in.

Entrambi i plugin sono installati e ora possiamo procedere ulteriormente.

Creazione della pagina del prodotto personalizzato WooCommerce

Passaggio 1) Crea una nuova pagina

Vai alla dashboard e fai clic sulle pagine, quindi fai clic su Aggiungi nuova pagina.

Passaggio 2) Fare clic su "Modifica con Element"

Nella barra in alto, troverai il pulsante Modifica con Element. Clicca su di esso.

Dopo questo, la pagina si aprirà con Elementor. È possibile accedere e utilizzare i widget Element in questa pagina.

Avremo bisogno di due scomparti, quindi prendi prima un contenitore con due lati.

Su una pagina del prodotto, la prima e una delle cose più importanti che metteremo è l'immagine. Quindi trova il widget immagine e mettilo nel contenitore sinistro.

Ora imposta l'immagine del prodotto.

Ora vieni al lato destro. Per accedere all'intestazione, cercala e inseriscilo nel secondo contenitore.

Immettere il nome del prodotto nel titolo.

Allo stesso modo, scriveremo i prezzi del prodotto. Per scrivere i prezzi, inserire un widget dell'editor di testo sotto il titolo e scrivere i prezzi del prodotto lì.

Nelle pagine del prodotto, c'è una breve descrizione del prodotto. Per aggiungerlo, inserire di nuovo l'editor di testo e scrivere una breve descrizione del prodotto.

Ora è il momento di aggiungere il pulsante del carrello. Questa volta utilizzeremo il widget carrello degli addon Element perché ha più funzionalità e funzionalità.

Cerca l'aggiunta al carrello e inseriscilo nel contenitore.

Nelle impostazioni del pulsante carrello, cerca il nome del prodotto e seleziona il prodotto nella sezione Prodotti. Dopo questo, quando l'utente fa clic sul pulsante del carrello, verrà aggiunto direttamente al carrello.

Se vuoi aggiungere l'ID SKU, puoi farlo allo stesso modo in cui abbiamo aggiunto un altro widget. Qui inserisci l'editor di testo e scrivi lo sku del prodotto.

Una delle parti importanti di una pagina del prodotto è avere pulsanti di condivisione sociale. Puoi aggiungere il pulsante Social Share anche a questa pagina.

Cerca le icone social e mettile sulla pagina.

Se si desidera aggiungere più pulsanti per maniglie social, fai clic su Aggiungi nuovo e aggiungi il nuovo pulsante. Puoi apportare diverse modifiche come la modifica dell'icona e la modifica del collegamento e del colore.

Allo stesso modo, puoi aggiungere l'altra cosa qui.

Se si desidera fornire anche una descrizione principale, aggiungi l'editor di testo e scrivi la descrizione.

Ho aggiunto la descrizione principale al di fuori del contenitore che sembra organizzato e sistematico.

Quando gli utenti visitano una pagina del prodotto, puoi mostrare prodotti correlati in modo che possano controllarli anche.

Pertanto, per aggiungere prima il prodotto correlato aggiungi un'intestazione e cerca il cursore del prodotto in componenti aggiuntivi elementi.

Ecco come è possibile aggiungere la pagina del prodotto WooCommerce personalizzato. Ora è il momento di vedere l'anteprima della pagina.

Devo dirtelo, anche una pagina del prodotto può essere realizzata in alcuni semplici passaggi. Per questo, avremo bisogno del widget di componenti aggiuntivi Element.

Vediamo, come è fatto.

Utilizzare la pagina del prodotto correlato personalizzato

Dopo aver fatto clic su Modifica con Element , vai sul lato sinistro, dove troverai i widget Element.

Scorri verso il basso e raggiungi i componenti aggiuntivi di Element .

Trova i prodotti Advance Tema, trascina il widget e rilascia sulla pagina.

Quando si lascia cadere il widget, la sua impostazione di personalizzazione apparirà sulla barra sinistra. È possibile modificare le impostazioni e l'aspetto dell'addon.

Ma se si desidera modificare l'aspetto del sito, fai clic sullo stile oltre al contenuto.

La sezione di stile consente di modificare i colori, la tipografia e altre impostazioni del componente aggiuntivo.

Dopo aver apportato tutte le modifiche e aver configurato la pagina, fare clic su Publish.

Ora visualizza in anteprima il tuo sito.

Qui puoi vedere, sulla pagina del prodotto WooCommerce personalizzato, abbiamo aggiunto i prodotti con l'aiuto del widget del prodotto di Element Addons.

I prodotti sono mostrati nella pagina. Previeiamo in anteprima la pagina del singolo prodotto.

Ecco, è creata la pagina del prodotto WooCommerce personalizzato.

FAQ

Conclusione

Quindi abbiamo imparato come aggiungere la pagina del prodotto WooCommerce personalizzato utilizzando Element. Dato che abbiamo usato anche il plug -in Element Addons, ha reso molto facile aggiungere prodotti e mostrarli sulla pagina.

Gli addon Element hanno così tanti componenti aggiuntivi per la costruzione di siti Web. Non è noto solo per i widget ma anche per le caratteristiche dei widget.

Pagine di prodotto WooCommerce personalizzate possono essere necessarie per promuovere caratteristiche specifiche. Di solito, i modelli non hanno tali pagine, quindi diventa necessario creare la pagina da soli.

Spero che questo blog ti aiuti. Tuttavia, se hai domande o suggerimenti, fammi sapere nella sezione commenti.
Puoi iscriverti al nostro canale YouTube , carichiamo anche ottimi contenuti lì, seguici anche su Facebook e Twitter .

Scopri altri articoli

• Come modificare l'URL di accesso WordPress (URL personalizzato) in semplici passaggi
• Come creare una pagina di errore 404 personalizzata in WordPress (Easy Guide)
• Come aggiungere una barra di ricerca personalizzata a WooCommerce per una scoperta di prodotti più semplice