Come personalizzare facilmente la tua pagina del negozio WooCommerce

Pubblicato: 2022-03-28

Cerchi un modo semplice per personalizzare la pagina del tuo negozio WooCommerce?

WooCommerce alimenta oltre il 29,35% di tutti i negozi online, rendendolo una popolare piattaforma di eCommerce per i proprietari di siti Web WordPress. Tuttavia, rendere unico il tuo negozio WooCommerce non è semplice se ti mancano le capacità di sviluppo.

Suona come te? Non preoccuparti.

Questo articolo ti mostrerà come personalizzare la pagina del tuo negozio WooCommerce senza scrivere una sola riga di codice.

Che cos'è la pagina del negozio WooCommerce?

La pagina del negozio WooCommerce è una pagina di archivio che mostra i tuoi prodotti ai potenziali clienti. WooCommerce recupererà i dettagli sui tuoi prodotti, tra cui:

  • Immagini del prodotto
  • Titoli di prodotti
  • Categorie di Prodotto

Mostrerà quindi tali informazioni in una griglia o un elenco nella pagina del tuo negozio.

default woocommerce shop page

Perché dovresti personalizzare la tua pagina del negozio WooCommerce?

Immagina di entrare in un negozio e tutto ciò che vedi sono file su file di merci disorganizzate. È probabile che te ne andrai perché è difficile trovare quello che stai cercando.

Lo stesso vale per i negozi online. Se la pagina del tuo negozio mostra un muro di prodotti senza organizzazione, gli acquirenti rimbalzeranno via e passeranno al sito Web successivo.

Questo è il problema con il layout predefinito della pagina del negozio WooCommerce. Visualizza solo un semplice elenco di prodotti, rendendo difficile per i visitatori trovare i prodotti che desiderano.

Fortunatamente ci sono modi per modificare la pagina del negozio WooCommerce, che può dare al tuo negozio i seguenti vantaggi:

  • Distinguiti dalla concorrenza con un design unico
  • Migliora l'esperienza del cliente organizzando i prodotti per categoria
  • Aumenta le vendite visualizzando i prodotti in evidenza, in saldo e più venduti
  • Migliora la tua SEO aggiungendo contenuti mirati a parole chiave molto ricercate
  • Aumenta la fiducia mostrando testimonianze, valutazioni a stelle e contenuti generati dagli utenti (UGC)

La chiave per progettare una pagina del negozio WooCommerce ad alta conversione è creare un design intuitivo che renda più facile l'acquisto dei tuoi prodotti.

Come personalizzare la pagina del negozio WooCommerce in WordPress

Esistono diversi modi per personalizzare la pagina del tuo negozio in WordPress. Puoi utilizzare un plug-in WooCommerce, costruttori di pagine o codificare le personalizzazioni da zero.

Poiché vogliamo mantenere questo tutorial il più semplice possibile, ci concentreremo su 2 dei modi più semplici per personalizzare le pagine di WooCommerce.

Il primo metodo utilizzerà un potente plug-in per la creazione di siti Web WordPress facile da usare e ricco di opzioni di personalizzazione. Quindi ti mostreremo come utilizzare il personalizzatore WooCommerce per modificare il layout della pagina del tuo negozio.

Sommario
  1. Che cos'è la pagina del negozio WooCommerce?
  2. Perché dovresti personalizzare la tua pagina del negozio WooCommerce?
  3. Come personalizzare la pagina del negozio WooCommerce in WordPress
    • Metodo 1: crea una pagina negozio personalizzata con SeedProd
    • Metodo 2: Personalizza la tua pagina del negozio con WooCommerce Customizer

Metodo 1: crea una pagina negozio personalizzata con SeedProd

Useremo SeedProd per aggiungere personalizzazioni al tuo negozio online per il primo metodo.

Use seedprod to customize woocommerce shop page

SeedProd è il miglior costruttore di siti Web per WordPress, con oltre 1 milione di utenti . Ti consente di creare temi WordPress personalizzati, landing page ad alta conversione e layout di siti Web reattivi senza codice.

Questo potente plugin ti consente anche di creare interi negozi online con la sua integrazione WooCommerce. Di conseguenza, puoi creare e personalizzare la tua pagina del negozio WooCommerce, le pagine dei prodotti, il carrello della spesa, il checkout e altro ancora con pochi clic.

SeedProd viene fornito con oltre 150 temi e modelli professionali per creare il tuo sito web. Da lì, puoi personalizzare il tuo design con blocchi e sezioni di contenuto facili da usare.

Segui questi passaggi per personalizzare la pagina del tuo negozio WooCommerce con SeedProd.

Passaggio 1. Installa SeedProd Website Builder

Il primo passo è scaricare una copia del plug-in per la creazione di siti Web SeedProd.

Inizia subito con SeedProd

Nota: SeedProd offre una versione gratuita per creare semplici landing page. Tuttavia, utilizzeremo SeedProd Pro per le funzionalità di WooCommerce di cui abbiamo bisogno.

Successivamente dovrai installare SeedProd sul tuo sito Web WordPress. Se hai bisogno di aiuto, puoi seguire queste istruzioni per l'installazione di un plugin per WordPress.

Dopo aver installato e attivato SeedProd, vai su SeedProd »Impostazioni e inserisci la chiave di licenza del plug-in.

enter your license key

Puoi trovare la tua chiave di licenza accedendo al sito Web SeedProd e copiandola dalla sezione "Download".

Find your SeedProd license key

Inserisci la tua chiave di licenza e fai clic sul pulsante Verifica chiave prima di passare al passaggio successivo.

Passaggio 2. Crea un tema WooCommerce personalizzato

Utilizzeremo la funzione di creazione di temi di SeedProd per personalizzare la pagina del tuo negozio WooCommerce. Sovrascriverà il tuo tema WordPress esistente, sostituendolo con le tue personalizzazioni.

Puoi trovarlo andando su SeedProd »Costruttore di temi dalla dashboard di WordPress.

SeedProd theme builder

Ci sono 2 modi per creare il tuo tema con SeedProd:

  1. Crea ogni parte (modello) del tuo tema individualmente
  2. Crea tutti i tuoi modelli di temi con un modello di tema WordPress predefinito

Useremo la seconda opzione per questo tutorial perché rende automaticamente ogni parte del tuo sito WooCommerce.

Fai clic sul pulsante Temi nella parte superiore dello schermo per avviare la galleria dei modelli di temi di SeedProd. Puoi scegliere tra molti temi, inclusi i design per i negozi online.

add a theme template

Andremo con il tema "Negozio di mobili" per questo tutorial.

Per importare il tema, passa il mouse sopra la miniatura e fai clic sull'icona del segno di spunta.

Choose a custom SeedProd woocommerce theme

Come puoi vedere nello screenshot qui sotto, SeedProd creerà automaticamente tutti i modelli per il tuo tema, inclusi:

  • Navigazione dell'intestazione
  • Archivi prodotti
  • Pagina del prodotto
  • Pagina del negozio
  • Pagina singola
  • Posto unico
  • Indice Blog, Archivi, Cerca
  • Pagina iniziale
  • Barra laterale
  • Piè di pagina
SeedProd theme builder template parts

Puoi personalizzare ogni modello con il builder drag-and-drop di SeedProd. Ti mostreremo come personalizzare il modello di pagina del negozio nel passaggio 3.

Passaggio 3. Personalizza la pagina del negozio WooCommerce

Per personalizzare la pagina del tuo negozio WooCommerce con SeedProd, passa il mouse sopra il modello "Pagina del negozio" e fai clic sul collegamento Modifica design .

Edit WooCommerce shop page design

Dopo aver fatto clic sul collegamento, il modello di pagina del tuo negozio si aprirà nel generatore di pagine drag-and-drop visivo di SeedProd.

Sulla sinistra ci sono blocchi e sezioni che puoi aggiungere alla tua pagina. Puoi vedere un'anteprima dell'aspetto della tua pagina in tempo reale sulla destra.

WooCommerce shop page drag and drop builder

La pagina del tuo negozio mostrerà un elenco di tutti i tuoi prodotti per impostazione predefinita. Tuttavia, puoi cambiarlo facilmente aggiungendo nuovi layout, blocchi di contenuto e sezioni.

Supponiamo che tu voglia aggiungere un banner a scorrimento che mostri una vendita o una promozione. In tal caso, puoi trascinare sul blocco Carousel immagini e caricare immagini banner personalizzate.

SeedProd image carousel block

Puoi quindi personalizzare il tuo carosello nelle impostazioni del blocco cambiandolo in un tema scuro o chiaro, riproducendo automaticamente il cursore e mostrando le didascalie dell'immagine.

Image carousel block settings seedprod

E se volessi mettere in evidenza i tuoi prodotti in evidenza o i prodotti più venduti? Per farlo, aggiungi una nuova sezione alla tua pagina, quindi scorri verso il basso fino al pannello dei blocchi di WooCommerce e trascina il blocco dei prodotti più venduti sulla tua pagina.

SeedProd best selling products grid

Questo blocco mostrerà i tuoi prodotti più venduti in una griglia uniforme.

WooCommerce best selling products grid

Puoi far risaltare maggiormente questa nuova sezione della pagina assegnandole un colore di sfondo personalizzato.

Section custom background color

Quindi nel blocco dei prodotti più venduti Impostazioni avanzate, puoi cambiare il colore, la tipografia e i pulsanti Aggiungi al carrello.

Product grid advanced settings

Puoi anche visualizzare i prodotti per categoria con il blocco WooCommerce di SeedProd. Per farlo, trascina sul blocco Griglie dei prodotti , cambia il "Tipo di query" in Query personalizzata e fai clic sull'opzione Seleziona per categoria .

WooCommerce product category grid

Da lì, puoi scegliere quali categorie includere nella griglia del prodotto.

Alcuni altri blocchi che puoi aggiungere alla pagina del tuo negozio includono:

  • Testimonianze per aumentare la fiducia e la credibilità
  • Timer per il conto alla rovescia per creare urgenza per la tua vendita
  • Fisarmonica per visualizzare le domande frequenti
  • Facebook o Twitter incorpora per visualizzare i contenuti generati dagli utenti

Quando sei soddisfatto della pagina del tuo negozio, fai clic sul pulsante verde Salva nell'angolo in alto a destra dello schermo.

Save your custom woocommerce shop page

Ora puoi seguire la stessa procedura per personalizzare le altre parti del tuo negozio WooCommerce. Fai semplicemente clic su "Modifica design" su qualsiasi modello di tema e personalizza il layout e lo stile in base al tuo marchio.

Passaggio 4. Pubblica la tua pagina del negozio personalizzato

Quando il tuo sito WooCommerce ha l'aspetto che desideri, è tempo di renderlo attivo. Per farlo, vai su SeedProd »Generatore di temi e, nell'angolo in alto a destra, ruota l'interruttore "Abilita tema SeedProd" sulla posizione "Sì".

enable seedprod theme

Ora puoi visualizzare in anteprima la tua pagina del negozio WooCommerce dal vivo sul tuo sito web.

customize woocommerce shop page

Metodo 2: Personalizza la tua pagina del negozio con WooCommerce Customizer

Se hai bisogno di un modo più semplice per personalizzare la pagina del negozio WooCommerce, puoi farlo con il personalizzatore WooCommerce integrato. Il personalizzatore utilizza il personalizzatore del tema live di WordPress per modificare la pagina del tuo negozio in tempo reale con un'anteprima dal vivo.

Le opzioni di personalizzazione che vedrai dipenderanno dal tema WordPress che utilizzi sul tuo sito web. Stiamo usando il tema predefinito Twenty Twenty-Two per questa guida.

Per personalizzare la pagina del tuo negozio con il personalizzatore, fai clic su Aspetto »Personalizza dalla dashboard di WordPress. Da lì, fai clic su WooCommerce »Catalogo prodotti per vedere le opzioni di personalizzazione.

Quindi, fai clic sul menu a discesa "Visualizza pagina negozio" e scegli un layout.

Ad esempio, puoi scegliere "Mostra categorie" per mostrare solo le categorie di prodotti nella pagina del negozio.

Customize woocommerce shop page with woocommerce customizer

Oppure puoi scegliere "Mostra prodotti" per mostrare solo i prodotti.

In alternativa, puoi visualizzare prima le categorie di prodotti, quindi una griglia di prodotti con l'opzione "Mostra categorie e prodotti".

show products and categories on woocommerce shop page

Inoltre, puoi mostrare i prodotti per:

  • Popolarità
  • Voto medio
  • Piu recente
  • Prezzo

Puoi anche scegliere quanti prodotti per riga e righe visualizzare in ogni pagina.

Choose how many products per row to display on your WooCommerce shop page

Ricordati di pubblicare le modifiche quando sei soddisfatto del tuo design. Ecco un'anteprima di una pagina del negozio che abbiamo disegnato utilizzando WooCommerce Customizer.

how to customize woocommerce shop page with WordPress WooCommerce customizer

Questo è tutto!

Speriamo che questo articolo ti abbia aiutato a imparare come personalizzare la pagina del Negozio WooCommerce.

Come puoi vedere, SeedProd semplifica la creazione di un sito WooCommerce unico e intuitivo senza la necessità di alcuna esperienza di progettazione o codice precedente. È semplice come puntare e fare clic, con risultati sorprendenti che i potenziali clienti adoreranno.

Pronto per aumentare le tue vendite WooCommerce?

Inizia subito con SeedProd

Potrebbe piacerti anche questa guida su come impostare il monitoraggio delle conversioni di WooCommerce mentre sei qui.

Grazie per aver letto. Seguici su YouTube, Twitter e Facebook per ulteriori contenuti utili per far crescere la tua attività.