Come personalizzare il tuo negozio WooCommerce utilizzando Happy Addons
Pubblicato: 2021-02-26Il business dell'e-commerce si evolve giorno dopo giorno con la rapida crescita della tecnologia. In senso generale, è relativamente facile, economico e a basso rischio creare un negozio online, indipendentemente dal fatto che tu abbia già un negozio fisico o meno.
Ma perché dovresti mantenere il design della pagina del tuo negozio come prima priorità?
I tuoi prodotti sono unici: dovrebbero esserlo anche le pagine dei prodotti che li mettono in mostra.
WooCommerce
Un design ben progettato semplifica il processo di acquisto per gli utenti. Ecco perché devi personalizzare il tuo sito eCommerce in modo corretto.
Fortunatamente, non è necessario essere esperti o sviluppatori per farlo. Piuttosto puoi utilizzare alcuni strumenti di creazione di pagine pratici e convenienti per personalizzare il tuo negozio. Di sicuro, ti aiuterà a rimanere impressionante e competitivo generando più vendite e entrate!
Quindi, nel post di oggi, mostreremo come personalizzare facilmente il tuo negozio WooCommerce e aggiungere alcune splendide funzionalità utilizzando Happy Addons. Iniziamo con una domanda di base-
Cosa rende una buona pagina prodotto?
Una pagina prodotto è un luogo in cui mostri i tuoi prodotti online ai tuoi clienti in modo organizzato. In questo modo possono cercare, scegliere e acquistare facilmente i prodotti.
![personalizzare la pagina del negozio WooCommerce](/uploads/article/47500/YKCHfUnF9hASi4Kn.png)
In questi giorni le persone preferiscono lo shopping online più dello shopping fisico. A causa della pandemia globale, lo scenario di acquisto totale è passato dal negozio fisico a quello online, che rappresenta oltre il 95% di tutti gli acquisti. Ecco perché diventa più importante e competitivo fidelizzare i clienti.
Supponiamo di entrare in un negozio online per acquistare qualcosa ( cellulare ). Quale sarà la tua prima esigenza?
Un'esperienza di acquisto semplice. Giusto?
Sì, una semplice esperienza di acquisto con una semplice procedura di pagamento determina l'organizzazione di un negozio o di una pagina prodotto. Inoltre, aiuterà i clienti a trovare ciò che stanno esattamente cercando. È qui che entra in gioco una pagina del negozio ben personalizzata.
Quindi diamo un'occhiata al motivo per cui la personalizzazione del negozio WooCommerce è importante per: -
- Costruisci una grande identità di marca
- Coinvolgi più clienti
- Aumenta l'esperienza dell'utente
- Distinguiti dagli altri concorrenti
Potrebbe piacerti anche: Come trovare e convincere i fornitori per il tuo mercato multivendor
Come personalizzare la pagina del prodotto/negozio di WooCommerce utilizzando Happy Addons
![personalizzare la pagina del negozio WooCommerce](/uploads/article/47500/hKoj3oM2zmsZared.png)
Ora è il momento di dimostrare il processo di personalizzazione della pagina del negozio WooCommerce. Segui attentamente i passaggi e applicali al tuo sito WooCommerce basato su WordPress.
Prerequisiti prima di personalizzare la pagina del negozio WooCommerce
- wordpress
- WooCommerce (gratuito)
- Elementor (gratuito)
- Componenti aggiuntivi felici ( gratuiti e professionali )
Innanzitutto, assicurati di aver installato e attivato correttamente tutti questi prerequisiti sul tuo sito web.
Ti mostriamo come personalizzare la pagina del tuo negozio WooCommerce utilizzando Happy Addons.
Fase uno: apri la pagina del tuo negozio
Vai alla pagina del tuo negozio WooCommerce dalla dashboard di WordPress. E quindi fare clic su Modifica con Elementor .
![personalizzare la pagina del negozio WooCommerce](/uploads/article/47500/ZO04P7eBeUfumgA5.png)
Successivamente, si aprirà la pagina predefinita di WooCommerce. E qui inizia il tuo viaggio di personalizzazione del negozio.
![Tela Elementore](/uploads/article/47500/hsdUZGlfowpSckP1.png)
Fase due: utilizza i widget WooCommerce di HappyAddons
Per semplificare la personalizzazione, utilizzeremo quattro fantastici widget WooCommerce di Happy Add-on.
- Griglia del prodotto: - Puoi visualizzare i tuoi prodotti nelle visualizzazioni della griglia in modo redditizio con HappyAddons Pro Product Grid Widget.
- Product Carousel: - Un widget carosello di prodotti WooCommerce completo per attirare l'attenzione dei clienti
- Griglia delle categorie di prodotti: - La soluzione migliore per visualizzare i prodotti WooCommerce in base alla categoria.
- Carosello di categorie di prodotti: - Puoi pubblicizzare i prodotti in caroselli basati su categorie specifiche con l'aiuto del widget Carosello di categorie di prodotti per renderli più fruttuosi
NB: Queste sono tutte funzionalità professionali di Happy Addons. Quindi, se vuoi usarli sul tuo sito, devi eseguire l'upgrade gratuito alla versione premium.
Utilizzo del widget carosello prodotti
Vediamo come puoi utilizzare il widget Product Carousel sul tuo sito WooCommerce. Per utilizzare il widget, è necessario selezionare il widget e trascinarlo sullo schermo.
![](/uploads/article/47500/kUd3mAHR5FbkOxVu.png)
Quindi, dopo aver aggiunto il widget, otterrai un'interfaccia come questa.
![Carosello di prodotti](/uploads/article/47500/uoKHd7vUVjrLGEcF.gif)
Qui otterrai quattro opzioni-
- Disposizione
- Domanda
- Impostazioni carosello
- E collegamento wrapper
Nel layout, puoi scegliere due diverse skin. Classico e moderno. Attiva o disattiva le opzioni se lo desideri. E allinea il contenuto dell'immagine in base al tuo design.
![Utilizzo del widget carosello prodotti](/uploads/article/47500/GKuCvc30GsAq2Ial.png)
Ora fai clic sull'opzione di query per personalizzare più cose. Qui puoi mostrare i prodotti in base alla categoria.
![personalizzare la pagina del negozio WooCommerce](/uploads/article/47500/hN2OtJxZe4OE2SdH.png)
Inoltre, puoi aggiungere alcune funzionalità di animazione al design. Per farlo è necessario fare clic su Impostazioni carosello . Ad esempio, imposta la velocità dell'animazione, le diapositive, la freccia delle diapositive, ecc.
![Applicazione del widget del carosello dei prodotti](/uploads/article/47500/t04L7qrIIYUSu2B5.gif)
Alla fine, puoi aggiungere un collegamento wrapper al design.
Tuttavia, puoi stilizzare il design facendo clic sul pulsante Stile .
![personalizzare la pagina del negozio WooCommerce](/uploads/article/47500/SBWHwcSPHfOx9hj1.png)
Per saperne di più sul widget del carosello di prodotti, puoi consultare la documentazione ufficiale.
Utilizzo della griglia delle categorie di prodotti
Allo stesso modo, seleziona il widget della griglia delle categorie di prodotti e incollalo sullo schermo.
![Widget categoria di prodotto](/uploads/article/47500/l8dg3Zrm625Tlx1o.png)
Dopo aver aggiunto il widget vedrai l'anteprima della tua categoria. Inoltre, puoi utilizzare le utili opzioni sul lato sinistro dello schermo.
![Impostazioni della categoria del prodotto](/uploads/article/47500/5Xb6umjpStHHfAC2.png)
Successivamente, personalizza la sezione della query per aggiungere più funzionalità al design. Ad esempio, puoi impostare la colonna, lo stile della skin, la dimensione dell'immagine, aggiungere una sovrapposizione di immagini, ecc.
![Personalizza la pagina del negozio WooCommerce](/uploads/article/47500/YfAMThMJqD6RBLv4.png)
Tuttavia, se non desideri mostrare tutte le categorie qui, puoi anche escluderle o includerle. Assicurati di mostrare la categoria giusta ai tuoi utenti.
![](https://s.stat888.com/img/bg.png)
![Disposizione](/uploads/article/47500/5drtghln53dPHUVY.png)
Per stilizzare il design, fai clic sul pulsante dello stile. Qui avrai quattro opzioni disponibili.
- Layout : - Modifica il design del layout, l'altezza, il peso, il divario tra le file
- Casella dell'oggetto : - Puoi modificare l'altezza, il peso, il colore e altro di un'immagine
- Contenuto : - Per modificare il colore del contenuto, lo sfondo, l'altezza, il peso, la spaziatura, ecc
- Carica più pulsanti : - Da qui puoi personalizzare carica più pulsanti di categoria , colore del carattere, tipografia, colore di sfondo, ecc
![](/uploads/article/47500/WDTguAvLb6aofpnH.png)
Tuttavia, se desideri utilizzare maggiormente questo widget sul tuo sito WordPress, puoi consultare la nostra documentazione ufficiale qui.
Widget del carosello delle categorie di prodotti
Seleziona il widget e trascinalo nell'area selezionata.
![personalizzare la pagina del negozio WooCommerce](/uploads/article/47500/h0YZRLBwAj0JWBHt.png)
Dopo di che tutte le opzioni saranno a tua disposizione. Questo widget è quasi uguale al widget del carosello dei prodotti. La categoria del prodotto mostra le categorie e il carosello dei prodotti mostra i prodotti.
![Impostazioni del widget del carosello dei prodotti](/uploads/article/47500/zV45bMsIm0wrzUJ9.gif)
Dopo aver fatto clic sul pulsante Layout , è possibile impostare le skin, la dimensione dell'immagine, il numero di conteggi e definire la sovrapposizione dell'immagine. Pertanto, se riesci a implementarli correttamente, sembreranno più belli e coinvolgenti.
![Impostazioni carosello](/uploads/article/47500/6vKgkjy8TNM8EeJr.png)
Fare clic sulla query per escludere o includere la categoria nel carosello. Inoltre, puoi impostare il carosello in base all'ordine.
![personalizzare la pagina del negozio WooCommerce](/uploads/article/47500/aOOKstQf6CiQQn2a.png)
Quindi fai clic sulle impostazioni del carosello per modificare la velocità dell'animazione, l'opzione di riproduzione automatica, lo stile di navigazione e le diapositive. E questo ti aiuterà a personalizzare la tua pagina del negozio WooCommerce per mostrare la tua categoria di prodotti preferita ai tuoi utenti.
![personalizzare la pagina del negozio WooCommerce](/uploads/article/47500/Oq3F3UnSwz6fGk7L.png)
Ad ogni modo, se desideri ottenere una guida dettagliata del carosello delle categorie di prodotti, puoi sempre consultare la nostra documentazione ufficiale.
Widget della griglia del prodotto
Se stai riscontrando problemi nel visualizzare i tuoi prodotti nella posizione perfetta della griglia sulla pagina del tuo negozio WooCommerce? Sì, puoi farlo utilizzando il widget della griglia del prodotto.
Per farlo, fai clic sul widget e trascinalo nell'area selezionata per iniziare a utilizzare il widget. Quindi, quando aggiungi il widget, tutti i prodotti verranno aggiunti come visualizzazione a griglia.
E avrai un'opzione di layout da personalizzare. Tutti i prodotti verranno aggiunti automaticamente sullo schermo. Qui puoi mostrare la pagina dei prezzi, la valutazione, il badge, il pulsante del carrello e il pulsante di visualizzazione rapida.
![widget della griglia del prodotto](/uploads/article/47500/1uthA0nGiqutJLLX.png)
Puoi mostrare i prodotti che desideri e anche aggiungerli o escludere quale prodotto desideri.
![Query sulla griglia del prodotto](/uploads/article/47500/NpxQE2qo93DkuB8O.png)
Nelle impostazioni avanzate di questo widget, puoi personalizzare il pulsante Aggiungi al carrello, il pulsante di visualizzazione rapida del prodotto e allegare un collegamento.
![Impostazioni di avanzamento della griglia del prodotto](/uploads/article/47500/fUyRjIiZkNPIU58Y.png)
Infine, puoi dare uno stile al tuo design usando il pulsante Stile . Qui puoi personalizzare badge, contenuto, immagine, carrello e visualizzazione rapida, ecc.
![personalizzare la pagina del negozio WooCommerce](/uploads/article/47500/3mi1Hybv2N9otd8V.gif)
Quindi è così che il widget WooCommerce di Happy Add-ons aiuta a personalizzare le pagine dei negozi. Quindi prenditi il tuo tempo e segui attentamente i passaggi per implementare tutte queste cose sulla pagina del tuo negozio WooCommerce.
![componenti aggiuntivi elementor felice](/uploads/article/47500/KNF2CoOPyn1HdTQ3.png)
Anteprima finale del negozio WooCommerce
![](/uploads/article/47500/rcnVOUDn2emFsic8.gif)
Bene, il processo che abbiamo mostrato sopra è per una pagina del negozio di un singolo fornitore. Ma cosa succede se si desidera progettare un sito Web multivendor completo utilizzando Dokan, è possibile consultare il seguente articolo.
Crea il tuo sito Web di mercato per articoli per la cura della bellezza utilizzando Dokan
Errori da evitare durante la personalizzazione della pagina del prodotto WooCommerce
![Errori nell'e-commerce](/uploads/article/47500/K9E3UCilzz93C92z.png)
Nessuno, ma solo tu puoi garantire che le prestazioni del tuo sito siano forti o basse come desideri. In generale, tutti desideriamo che il nostro sito web appaia professionale, di bell'aspetto e accattivante. Ma questo potrebbe non accadere così facilmente.
Questo è il motivo per cui tutti noi dobbiamo prendere le decisioni giuste prima di apportare modifiche al tuo sito web.
Ma mentre si pensa di aggiungere eventuali modifiche al sito Web, molti di noi commettono alcuni stupidi errori: errori del mercato e-commerce . Perché siamo tutti di fretta o semplicemente ci dimentichiamo di seguire la struttura corretta, in particolare personalizzando un negozio di e-commerce.
Per aiutarti, ecco alcuni degli importanti errori del mercato che pensiamo dovresti conoscere. E questi possono senza dubbio rovinare tutti i tuoi sforzi e ostacolare la crescita della tua attività.
Quindi diamo un'occhiata agli errori comuni che devi evitare prima di personalizzare la pagina del tuo negozio WooCommerce:-
- Non aggiornare WordPress in tempo
- Utilizzando una versione precedente di WooCommerce
- Mantenere i plugin obsoleti
- Non utilizzare il certificato SSL
- "Admin" come nome utente
- Utilizzo di temi WordPress "gratuiti".
- Troppe categorie e tag non pertinenti
- Non concentrarsi sull'esperienza dell'utente
- Negozio non ottimizzato per mobile responsive
- Dimenticando Google Analytics
Questi sono gli errori che devi evitare prima di sederti per personalizzare la pagina del negozio WooCommerce. Quindi, se vuoi schivare alcuni errori costosi o vuoi che la tua attività di e-commerce vada alla grande, allora questi errori potrebbero aiutarti, di sicuro.
Parole finali
Bene, il post è giunto al termine. Abbiamo fatto del nostro meglio per mostrarti il modo più semplice per personalizzare la pagina del tuo negozio WooCommerce. E i widget WooCommerce di Happy Addons sono senza dubbio facili da usare.
Quindi, se non sei soddisfatto dell'aspetto della tua pagina prodotto esistente e desideri qualche variazione sulla tua pagina prodotto, puoi provare queste funzionalità sul tuo sito e seguire i passaggi che abbiamo mostrato.