Come personalizzare la pagina del tuo negozio WooCommerce

Pubblicato: 2022-12-02

Vuoi personalizzare la pagina del tuo negozio WooCommerce? Questa è una grande idea! La pagina del tuo negozio WooCommerce è la pagina più importante del tuo negozio. È dove i clienti atterreranno quando visiteranno il tuo sito web, quindi deve avere un bell'aspetto ed essere facile da navigare. Creare una migliore esperienza di acquisto si tradurrà in clienti più felici e più vendite!

In questo post, esploreremo come passare dalla pagina del negozio WooCommerce predefinita di base a una pagina del negozio personalizzata e accattivante che crea una migliore esperienza utente per i tuoi clienti. Vedremo diversi modi in cui puoi personalizzare il tuo negozio e perché dovresti prendere in considerazione l'utilizzo di Codeable.

Perché dovresti personalizzare la pagina del tuo negozio WooCommerce?

La pagina del tuo negozio è una delle pagine create per impostazione predefinita quando configuri WooCommerce ed è la prima cosa che i clienti vedono quando visitano il tuo negozio. E come puoi intuire, è importante fare una buona prima impressione: se ai clienti non piace quello che vedono, lasceranno il tuo sito senza acquistare nulla! L'aspetto e l'aspetto della pagina del tuo negozio possono dire ai clienti di più sulla tua attività.

La pagina del negozio Style Girlfriend, realizzata con WooCommerce

Una pagina ben personalizzata offre ai tuoi acquirenti un'ottima esperienza utente. Se i tuoi clienti vengono nel tuo negozio e non riescono a trovare quello che vogliono perché i tuoi prodotti sono difficili da ordinare, molto probabilmente rimarranno delusi e lasceranno il tuo sito.

La personalizzazione ti consente di creare pagine del negozio facili da navigare. Potrai aggiungere e modificare elementi che possono migliorare l'esperienza di acquisto dei tuoi clienti.

Quando personalizzi il tuo negozio, puoi personalizzarlo per adattarlo alle esigenze dei tuoi clienti. Ad esempio, puoi aggiungere elementi come video di prodotti personalizzati, guide personalizzate e funzionalità multivaluta e multilingue.

La pagina del negozio WooCommerce predefinita è di base: ha "negozio" come titolo della pagina e mostra tutti i prodotti in un layout a griglia. Meno male che ci sono molti modi per personalizzare la pagina del tuo negozio, ad esempio potresti voler:

  • Aggiungi un'immagine banner nella parte superiore della pagina del tuo negozio che promuova il tuo marchio o i tuoi prodotti.
  • Aggiungi un dispositivo di scorrimento dell'immagine che mostri le foto dei prodotti o le offerte dei prodotti in modo attraente.
  • Aggiungi le icone dei social media in modo che i clienti possano condividere i loro acquisti sui social media.
  • Aggiungi widget in modo che i clienti possano eseguire rapidamente azioni come aggiungere articoli al carrello o registrarsi per ricevere notifiche e-mail dal tuo negozio.
  • Offri ai clienti la possibilità di filtrare i tuoi prodotti in base agli attributi.
  • Aggiungi una sezione dei prodotti in primo piano o più venduti per promuovere i tuoi prodotti migliori.

Esistono molti modi diversi per personalizzare le pagine dei negozi WooCommerce in base al livello di tecnicità con cui ti senti a tuo agio. Esamineremo tre diversi metodi in modo approfondito.

Utilizzo di WooCommerce Blocks o di un Page Builder

Puoi utilizzare WooCommerce Blocks e l'editor di blocchi Gutenberg per creare un aspetto più personalizzato per la pagina del tuo negozio. Questo metodo è il migliore se desideri implementare personalizzazioni di base nel tuo negozio, cosa che puoi fare facilmente da solo.

Questi sono alcuni modi in cui puoi personalizzare la pagina del tuo negozio utilizzando i blocchi WooCommerce:

  • Mostra i prodotti più venduti, più votati, più recenti, in saldo e selezionati con cura.
  • Visualizza i prodotti in base alle tassonomie, utilizzando il blocco Prodotti per categoria, il blocco Prodotti per tag, il blocco Prodotti per attributo, ecc.
  • Mostra le recensioni sul tuo negozio, che puoi segmentare per prodotto o categoria.
  • Aggiungi filtri di prodotto attivi o filtra i prodotti per prezzo o attributo.
  • Visualizza il contenuto del carrello del cliente e la pagina di pagamento direttamente sulla pagina del negozio.
Il blocco Prodotti per categoria

Puoi anche utilizzare un generatore di pagine come Elementor o Divi se il tuo WordPress è compatibile con esso. Un page builder è in qualche modo simile a Gutenberg, nel senso che puoi utilizzare i widget per estendere la funzionalità delle pagine del tuo sito, ma un page builder è più avanzato in quanto ti consente di costruire sul design del tuo tema WordPress, invece di aggiungere semplicemente elementi e modificare la struttura della pagina. Puoi prendere in considerazione un page builder se vuoi nascondere elementi per il tuo sito mobile, impostare padding e margini, creare elementi globali, ecc.

Puoi consultare la nostra guida all'utilizzo di Elementor per creare un sito responsive per dispositivi mobili come esempio del motivo per cui un page builder potrebbe essere adatto a te.

Utilizzo di CSS personalizzati

In alternativa, l'aggiunta del tuo CSS ti consente di personalizzare l'aspetto del tuo negozio sovrascrivendo gli stili predefiniti del tuo tema WordPress. Il CSS personalizzato ti consente di creare "regole" sulla pagina del tuo negozio o persino sul sito Web in generale.

Puoi apportare tutti i tipi di modifiche utilizzando i CSS, come modificare l'ordine delle sezioni, lo spessore dei bordi, il colore del testo, la larghezza del contenuto o del widget, la dimensione del carattere, ecc. Per aggiungere CSS personalizzati, vai su Aspetto > Personalizza > CSS aggiuntivo .

Schermata CSS aggiuntiva

Naturalmente, questo è un approccio più tecnico alla personalizzazione della pagina del negozio WooCommerce ed è consigliato solo se hai una certa esperienza con lo sviluppo di WordPress.

Utilizzo dei plug-in WooCommerce

Se stai cercando di estendere la funzionalità o modificare in qualche modo l'aspetto del tuo negozio WooCommerce, molto spesso troverai un plug-in che fa ciò di cui hai bisogno. È davvero facile personalizzare la pagina del tuo negozio con i plug-in WooCommerce, ma non dovresti affidarti completamente a loro, per i seguenti motivi:

  • I plug-in possono rallentare il tuo sito se ne hai troppi, il che non è l'ideale se hai bisogno di molti plug-in per ottenere la tua pagina del negozio ideale.
  • I plugin variano nel prezzo, ma se ne hai troppi può diventare molto costoso pagarli annualmente o mensilmente.
  • Ci sono molti plugin disponibili e può volerci del tempo per trovare quelli che soddisfano davvero i tuoi criteri.

Diremmo che va benissimo usare alcuni plugin WooCommerce, ma non fare affidamento su di loro per ogni piccola cosa. Se desideri personalizzare pesantemente la pagina del tuo negozio, potresti prendere in considerazione una soluzione che avrà meno carico sul tuo sito.

Se stai prendendo in considerazione i plugin di personalizzazione per il tuo negozio WooCommerce, dai un'occhiata a questi tre, che fanno tutti cose diverse. Non siamo affiliati a nessuno di loro, ma pensiamo che siano un buon punto di partenza:

StoreCustomizer

Home page del plug-in StoreCustomizer

StoreCustomizer è un plug-in WooCommerce che può essere utilizzato per personalizzare molte aree del tuo negozio, comprese le pagine dei prodotti, il carrello e le pagine di pagamento.

A differenza dell'aggiunta di CSS, questo plug-in non sovrascrive il design del tema. Invece, StoreCustomizer funziona con il tema che stai utilizzando per aggiungere più opzioni di design e funzionalità alle tue pagine WooCommerce.

Il plug-in ha un piano gratuito che ti consente di modificare o rimuovere elementi, modificare la dimensione e il colore del carattere del testo, personalizzare il design di tutti i pulsanti del negozio, inclusi i pulsanti del carrello e del checkout e altro ancora.

La versione pro ti dà accesso a opzioni di personalizzazione più avanzate, come l'aggiunta di una ricerca di prodotti Ajax ovunque, l'aggiunta di badge di prodotti dall'aspetto eccezionale, ecc.

StoreCustomizer non sostituirà i modelli WooCommerce. Invece, il plug-in aggiunge opzioni di design e funzionalità di negozio avanzate alle tue pagine esistenti.

Per configurare il plug-in, procedi nel seguente modo:

  • Vai alla dashboard di WordPress
  • Fai clic su "plug-in", quindi fai clic su "aggiungi nuovo".
  • Vai alla barra di ricerca del plug-in e cerca "StoreCustomizer".
  • Installa il plugin e attivalo.

In alternativa, vai su WordPress.org e scarica il plugin. Successivamente, vai alla dashboard di WordPress e carica il file ZIP tramite Plugin> Aggiungi nuovo> Carica. Infine, vai al menu di WordPress e attiva il plug-in.

Per configurare l'app, vai su WooCommerce > StoreCustomizer nella dashboard di WordPress.

Troverai note su come configurare la versione gratuita. Per la versione premium, dovrai attivare l'impostazione per ogni funzione professionale specifica che desideri utilizzare. Vai a Personalizza > StoreCustomizer.

Tabella dei prodotti WooCommerce Ultimate

WooCommerce Product Table Ultimate homepage

WooCommerce Product Table Ultimate è un altro plug-in che puoi utilizzare per creare pagine di prodotti del negozio ben personalizzate visualizzando i tuoi prodotti in una tabella.

Con questo plugin, puoi aggiungere più prodotti a una singola pagina permettendoti di dare ai tuoi clienti la possibilità di ordinare più articoli con un solo clic. Questa funzione consente inoltre loro di filtrare e ordinare i prodotti più velocemente, il che è perfetto per i clienti che desiderano effettuare ordini all'ingrosso.

Il plug-in ti consente di elencare i prodotti in base alla categoria e ai tag, quindi se vendi prodotti che possono essere classificati, questa è una funzionalità che vorresti utilizzare.

Il plug-in WooCommerce Product Table include anche funzionalità pronte per la traduzione. È anche completamente compatibile con WPML, LocoTranslate e altri plugin multilingue.

Dopo aver acquistato il plug-in, potrai caricarlo sul tuo sito Web WordPress tramite Plugin>aggiungi nuovo>carica. Dovrai quindi attivarlo per iniziare a usarlo. Una volta che è tutto impostato, apri il plugin e scegli quali colonne vuoi includere nella tua tabella. Ciò può includere titoli di prodotto, SKU, descrizioni, categorie, tag, attributi a livello di stock, miniature e pulsante Aggiungi al carrello.

Puoi anche decidere di aggiungere più prodotti contemporaneamente. Ciò significa che dovrai visualizzare una casella di controllo accanto a ciascuna riga di prodotto. Questa funzione consentirà ai tuoi acquirenti di scansionare rapidamente ogni riga di prodotto, selezionare quale prodotto aggiungere al carrello e, al termine, aggiungere tutti i prodotti selezionati con un clic di un pulsante.

Visualizzazione rapida di WooCommerce

Scatola rapida WooCommerce

WooCommerce Quick View è un plug-in che puoi utilizzare per personalizzare l'aspetto del tuo negozio. Il plug-in ti consente di scegliere se mostrare informazioni sul prodotto complete o parziali e mostrare o nascondere immagini e gallerie. Consente inoltre la personalizzazione del testo del pulsante di visualizzazione rapida per massimizzare le vendite. Puoi anche abilitare o disabilitare la visualizzazione rapida a livello globale per mostrare specifiche categorie o sottocategorie di prodotti.

Il plug-in ti consente di aggiungere e modificare vari aspetti dei tuoi prodotti, tra cui:

  • Stelle
  • Prezzo
  • Breve descrizione
  • Descrizione completa
  • Pulsante Aggiungi al carrello
  • Categorie e tag
  • Cadere in picchiata
  • Attributi

WooCommerce Quick View rende facile per i clienti acquistare prodotti dal tuo negozio. Inoltre, consente di risparmiare tempo grazie a funzionalità come l'ordinamento rapido, il controllo granulare e una lightbox della galleria di immagini.

Il metodo migliore: usa Codeable

Codificabile

Mentre la personalizzazione della pagina del tuo negozio WooCommerce è abbastanza fattibile da solo, potresti voler arruolare un esperto per aiutarti. Ci sono alcuni motivi per cui potresti volerlo fare:

  • Non hai familiarità con il backend di WooCommerce e non hai il tempo di imparare come approfondire.
  • Non sai come trovare e utilizzare i plug-in esatti di cui hai bisogno per le tue personalizzazioni.
  • Le personalizzazioni che desideri implementare sono tecniche e sei preoccupato di danneggiare il tuo sito.
  • Vuoi qualcuno che possa risolvere, trovare e correggere eventuali errori che potresti aver commesso durante il processo di personalizzazione.

Il metodo più semplice per personalizzare la pagina del tuo negozio di e-commerce è utilizzare un servizio come Codeable. È il modo più semplice per entrare in contatto con sviluppatori esperti e professionisti per tutti i tipi di progetti: attività una tantum, sviluppo personalizzato a lungo termine, ecc.

Codeable è diverso da altre piattaforme di assunzione di sviluppatori. Questo è perché:

  • Codeable è specializzato in WordPress e consiglia solo programmatori esperti professionisti testati e formati.
  • Dopo aver condiviso i requisiti del tuo progetto, sei connesso con 3-5 esperti con esperienze e tariffe orarie diverse. Puoi sceglierli in base al tuo budget e alle tue preferenze.
  • Gli sviluppatori sono convenienti e devi pagare solo una volta che il lavoro è completo e ne sei soddisfatto.
  • Ottieni una risposta il giorno stesso in Codeable, permettendoti di ridurre i tempi.

Guarda cosa dicono i proprietari dei negozi online su Codeable:

“Non potremmo essere più felici della nostra esperienza. Dopo aver trascorso quattro anni a lavorare su un sito WooCommerce difettoso, problematico e lento che numerosi sviluppatori avevano definito "buono come potevano ottenerlo", un genio di Codeable è intervenuto e ha salvato la situazione. Professionali, veloci, cortesi e convenienti. Sono così felice di averli trovati!

NAGA SHAKTI

“Codeable è sorprendente sotto molti aspetti: l'attenzione alla qualità, la garanzia di qualità, la qualità degli stessi freelance e la piattaforma complessiva. Apprezzo anche che tu possa trovare bravi sviluppatori vicino a casa o cercare sviluppatori che meglio si adattano al tuo progetto o al tuo stile di lavoro. Grazie!"

ANDREA KEAVENEY

Personalizza la pagina del tuo negozio WooCommerce con Codeable

La personalizzazione della pagina del tuo negozio WooCommerce dovrebbe essere tra le prime cose che fai una volta che inizi a vendere online. Ti assicurerà di dare al tuo cliente una buona prima impressione della tua attività e un'ottima esperienza utente.

La pagina del negozio di Chaka Khan, realizzata con WooCommerce

Puoi utilizzare i blocchi WooCommerce o un generatore di pagine per personalizzare la pagina del tuo negozio WooCommerce da solo. Puoi anche decidere di installare plugin progettati per personalizzare i negozi WooCommerce. Se hai una certa esperienza tecnica, puoi provare ad aggiungere CSS personalizzati alla pagina del tuo negozio. Ma se vuoi fare un ulteriore passo avanti, lascia che un esperto di Codeable gestisca tutta la personalizzazione per te.

Se vuoi cambiare totalmente l'aspetto e il design della pagina del tuo negozio WooCommerce, o se vuoi aggiungere qualche tipo di funzionalità che non può essere facilmente ottenuta con un plugin, allora Codeable è sicuramente la strada da percorrere. Ma potresti anche prendere in considerazione Codeable se non vuoi fare affidamento sui plug-in o non hai tempo per imparare a personalizzare tu stesso la pagina del negozio. Qualunque cosa tu abbia bisogno, puoi inviare il tuo brief e descrivere esattamente quello che vuoi, e verrai abbinato ad esperti che esamineranno e completeranno l'intero progetto.

Condividi il tuo progetto su Codeable e lascia che un esperto gestisca ogni aspetto della personalizzazione del tuo WooCommerce Shop.