{"id":166819,"date":"2026-05-05T09:00:00","date_gmt":"2026-05-05T09:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/woocommerce-elementor-personalizzare-pagine-negozio\/"},"modified":"2026-05-26T10:00:00","modified_gmt":"2026-05-26T08:00:00","slug":"woocommerce-elementor-personalizzare-pagine-negozio","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/woocommerce-elementor-personalizzare-pagine-negozio\/","title":{"rendered":"WooCommerce e Elementor: Personalizzare le Pagine del Negozio"},"content":{"rendered":"<p>WooCommerce offre un negozio online funzionale fin da subito, ma le pagine predefinite hanno un aspetto generico che difficilmente rispecchia il brand aziendale. Grazie a <strong>Elementor Pro<\/strong> e al suo <strong>WooCommerce Builder<\/strong>, \u00e8 possibile personalizzare ogni singola pagina del negozio \u2014 dalla vetrina dei prodotti al checkout \u2014 senza scrivere una riga di codice. In questa guida vedremo come sfruttare al massimo questa combinazione per creare un e-commerce professionale, performante e orientato alla conversione.<\/p>\n<h2>Elementor Pro e il WooCommerce Builder: Panoramica<\/h2>\n<p>Elementor nella versione gratuita consente di costruire pagine generiche con un editor visuale drag-and-drop, ma il <strong>WooCommerce Builder<\/strong> \u00e8 disponibile esclusivamente nella versione Pro. Questa funzionalit\u00e0 aggiunge oltre 20 widget dedicati al commercio elettronico e la possibilit\u00e0 di creare <strong>template personalizzati<\/strong> per ogni tipo di pagina WooCommerce: shop, archivio categorie, singolo prodotto, carrello, checkout, area personale e pagina di ringraziamento.<\/p>\n<p>Il vantaggio principale rispetto ai page builder concorrenti \u00e8 la <strong>coerenza visiva<\/strong>: ogni modifica applicata tramite Elementor si riflette automaticamente su tutte le pagine che utilizzano quel template, garantendo uniformit\u00e0 grafica in tutto il negozio.<\/p>\n<h2>Personalizzare la Pagina Shop<\/h2>\n<p>La pagina shop \u00e8 la vetrina principale del negozio e rappresenta spesso il primo punto di contatto tra il visitatore e il catalogo. Per personalizzarla con Elementor Pro, \u00e8 necessario accedere a <strong>Template \u2192 Theme Builder \u2192 Product Archive<\/strong> e creare un nuovo template.<\/p>\n<h3>Il Widget Product Grid<\/h3>\n<p>Il widget <strong>Products<\/strong> (o Product Grid) \u00e8 il cuore della pagina shop. Permette di configurare:<\/p>\n<ul>\n<li><strong>Numero di colonne<\/strong> \u2014 da 1 a 6, con impostazioni separate per desktop, tablet e smartphone<\/li>\n<li><strong>Prodotti per pagina<\/strong> \u2014 per controllare la paginazione e il caricamento<\/li>\n<li><strong>Ordinamento predefinito<\/strong> \u2014 per data, prezzo, popolarit\u00e0 o valutazione<\/li>\n<li><strong>Spaziatura tra le card<\/strong> \u2014 margini e padding personalizzabili<\/li>\n<li><strong>Stile dei badge<\/strong> \u2014 &#8220;In offerta&#8221;, &#8220;Novit\u00e0&#8221;, &#8220;Esaurito&#8221; con colori e tipografia custom<\/li>\n<\/ul>\n<p>\u00c8 fondamentale impostare la sorgente dei dati su <strong>&#8220;Current Query&#8221;<\/strong> affinch\u00e9 il widget rispetti la query nativa di WooCommerce, inclusi filtri, ordinamento e paginazione. Senza questa impostazione, il widget mostra sempre gli stessi prodotti indipendentemente dal contesto.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/wc-03-products-new.png\" alt=\"Griglia prodotti WooCommerce personalizzata con Elementor Pro\" \/><\/p>\n<h3>Il Widget Product Carousel<\/h3>\n<p>Per le sezioni in evidenza \u2014 come prodotti in offerta o nuovi arrivi \u2014 il widget <strong>Product Carousel<\/strong> aggiunge un effetto slider con autoplay, frecce di navigazione e dot indicators. \u00c8 particolarmente efficace nella parte superiore della pagina shop per attirare attenzione sui prodotti strategici.<\/p>\n<h2>Progettare il Template del Singolo Prodotto<\/h2>\n<p>La pagina del singolo prodotto \u00e8 dove avviene la decisione finale di acquisto. Un layout ben progettato riduce le frizioni e aumenta il tasso di conversione. Per creare un template personalizzato, accedere a <strong>Template \u2192 Theme Builder \u2192 Single Product<\/strong>.<\/p>\n<h3>Widget Essenziali per la Pagina Prodotto<\/h3>\n<p>Elementor Pro mette a disposizione widget specifici per ogni elemento della pagina prodotto:<\/p>\n<ul>\n<li><strong>Product Images<\/strong> \u2014 galleria con zoom, lightbox e slider thumbnails<\/li>\n<li><strong>Product Title<\/strong> \u2014 con controllo completo su tipografia, colore e spaziatura<\/li>\n<li><strong>Product Price<\/strong> \u2014 prezzo regolare, prezzo in offerta e percentuale di sconto<\/li>\n<li><strong>Product Rating<\/strong> \u2014 stelle e conteggio recensioni<\/li>\n<li><strong>Product Stock<\/strong> \u2014 disponibilit\u00e0 con messaggi personalizzabili<\/li>\n<li><strong>Add to Cart<\/strong> \u2014 pulsante con selettore quantit\u00e0, varianti e stile custom<\/li>\n<li><strong>Product Tabs<\/strong> \u2014 descrizione, informazioni aggiuntive e recensioni in formato tab<\/li>\n<li><strong>Product Meta<\/strong> \u2014 SKU, categorie e tag<\/li>\n<li><strong>Related Products<\/strong> \u2014 prodotti correlati basati su categoria e tag<\/li>\n<li><strong>Upsells<\/strong> \u2014 prodotti consigliati come upgrade rispetto a quello visualizzato<\/li>\n<\/ul>\n<p>La libert\u00e0 di posizionamento offerta da Elementor consente layout non convenzionali: ad esempio, \u00e8 possibile collocare il pulsante &#8220;Aggiungi al carrello&#8221; in una <strong>sidebar sticky<\/strong> che segue lo scroll, oppure creare una sezione a tutta larghezza per la galleria immagini con un layout affiancato per prezzo e descrizione breve.<\/p>\n<h3>Template Condizionali per Categoria<\/h3>\n<p>Una delle funzionalit\u00e0 avanzate del WooCommerce Builder \u00e8 la possibilit\u00e0 di assegnare <strong>template diversi in base alla categoria del prodotto<\/strong>. Un negozio che vende sia abbigliamento che elettronica, ad esempio, necessita di layout differenti: il primo richiede un selettore taglia e colore ben visibile, mentre il secondo beneficia di una tabella specifiche tecniche prominente.<\/p>\n<p>Per configurare questa funzionalit\u00e0, \u00e8 sufficiente creare template multipli in Theme Builder e impostare le <strong>condizioni di visualizzazione<\/strong>: &#8220;Mostra su Prodotti nella categoria Abbigliamento&#8221; per il primo template e &#8220;Mostra su Prodotti nella categoria Elettronica&#8221; per il secondo. Il template generico funge da fallback per le categorie senza un template dedicato.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/wc-04-new-product.png\" alt=\"Creazione di un nuovo prodotto WooCommerce con template Elementor personalizzato\" \/><\/p>\n<h2>Pagine Archivio e Categorie<\/h2>\n<p>Le pagine archivio (categorie, tag, attributi) seguono la stessa logica della pagina shop ma consentono personalizzazioni aggiuntive. Nel template Product Archive \u00e8 possibile aggiungere:<\/p>\n<ul>\n<li><strong>Archive Title<\/strong> \u2014 il nome della categoria con descrizione<\/li>\n<li><strong>Immagine di categoria<\/strong> \u2014 un banner visivo in testa alla pagina<\/li>\n<li><strong>Breadcrumb<\/strong> \u2014 per migliorare la navigazione e la SEO<\/li>\n<li><strong>Filtri laterali<\/strong> \u2014 per prezzo, attributi e valutazione<\/li>\n<\/ul>\n<p>Un suggerimento pratico: creare template archivio specifici per le categorie principali, con colori e immagini di sfondo coerenti con la tipologia di prodotto. Questo approccio rafforza la percezione di professionalit\u00e0 e aiuta il visitatore a orientarsi nel catalogo.<\/p>\n<h2>Personalizzare il Carrello<\/h2>\n<p>La pagina carrello predefinita di WooCommerce \u00e8 funzionale ma essenziale. Con Elementor Pro \u00e8 possibile trasformarla in uno strumento di conversione. I miglioramenti consigliati includono:<\/p>\n<ul>\n<li><strong>Layout a due colonne<\/strong> \u2014 prodotti a sinistra, riepilogo e totale a destra (sticky)<\/li>\n<li><strong>Cross-sell ben visibili<\/strong> \u2014 prodotti complementari sotto il carrello con layout carousel<\/li>\n<li><strong>Indicatore di spedizione gratuita<\/strong> \u2014 &#8220;Aggiungi ancora 15\u20ac per la spedizione gratuita!&#8221; con barra di avanzamento<\/li>\n<li><strong>Badge di sicurezza<\/strong> \u2014 icone per pagamento sicuro, reso gratuito e assistenza<\/li>\n<li><strong>Campo coupon ridisegnato<\/strong> \u2014 meno invasivo rispetto al blocco standard<\/li>\n<\/ul>\n<p>Il widget <strong>Cart<\/strong> di Elementor Pro consente di personalizzare ogni aspetto visivo: colori delle celle della tabella, tipografia dei prezzi, stile del pulsante &#8220;Aggiorna carrello&#8221; e aspetto del pulsante &#8220;Procedi al checkout&#8221;.<\/p>\n<h2>Il Checkout: Ottimizzare la Conversione<\/h2>\n<p>Il checkout \u00e8 il punto critico dove si concentra la maggior parte degli abbandoni. Un checkout ben progettato riduce le frizioni e trasmette fiducia. Elementor Pro offre un widget <strong>Checkout<\/strong> completamente personalizzabile.<\/p>\n<h3>Best Practice per il Checkout<\/h3>\n<ol>\n<li><strong>Layout a due colonne<\/strong> \u2014 campi di fatturazione a sinistra, riepilogo ordine a destra<\/li>\n<li><strong>Campi ridotti al minimo<\/strong> \u2014 rimuovere i campi non necessari tramite i filtri WooCommerce<\/li>\n<li><strong>Indicatore di progresso<\/strong> \u2014 mostrare in quale fase si trova il cliente (Carrello \u2192 Dati \u2192 Pagamento)<\/li>\n<li><strong>Riepilogo ordine visibile<\/strong> \u2014 sempre in vista, possibilmente in una sidebar sticky<\/li>\n<li><strong>Metodi di pagamento chiari<\/strong> \u2014 icone delle carte accettate e loghi dei gateway (PayPal, Stripe, Apple Pay)<\/li>\n<li><strong>Rassicurazioni<\/strong> \u2014 certificato SSL, politica resi, assistenza clienti con numero di telefono<\/li>\n<\/ol>\n<p>Un aspetto spesso trascurato \u00e8 la <strong>versione mobile del checkout<\/strong>: su smartphone i campi devono essere sufficientemente grandi, il tastierino numerico deve attivarsi automaticamente per telefono e CAP, e il pulsante &#8220;Effettua ordine&#8221; deve essere ben visibile senza necessit\u00e0 di scorrimento eccessivo.<\/p>\n<h2>Area Personale (My Account)<\/h2>\n<p>La pagina &#8220;Il mio account&#8221; \u00e8 il punto di riferimento per i clienti registrati. Con Elementor Pro \u00e8 possibile personalizzare il template per rendere questa area coerente con il resto del sito. I widget disponibili consentono di:<\/p>\n<ul>\n<li>Ridisegnare la <strong>dashboard<\/strong> con card informative (ordini recenti, indirizzo, stato abbonamento)<\/li>\n<li>Personalizzare la <strong>lista ordini<\/strong> con colori di stato ben distinguibili<\/li>\n<li>Aggiungere <strong>sezioni custom<\/strong> come programma fedelt\u00e0, documenti scaricabili o ticket di assistenza<\/li>\n<li>Creare un <strong>menu laterale<\/strong> personalizzato con icone e stile coerente<\/li>\n<\/ul>\n<h2>Pagina di Ringraziamento (Thank You Page)<\/h2>\n<p>La pagina di conferma ordine \u00e8 una delle meno curate nella maggior parte dei negozi online, ma rappresenta un momento in cui il cliente \u00e8 altamente ricettivo. Oltre al riepilogo ordine standard, \u00e8 consigliabile aggiungere:<\/p>\n<ul>\n<li><strong>Un messaggio di ringraziamento personalizzato<\/strong> con il nome del cliente<\/li>\n<li><strong>Prossimi passi<\/strong> \u2014 tempistiche di spedizione, come tracciare il pacco<\/li>\n<li><strong>Prodotti consigliati<\/strong> \u2014 basati su quanto appena acquistato<\/li>\n<li><strong>Invito a iscriversi alla newsletter<\/strong> \u2014 con un incentivo (sconto sul prossimo ordine)<\/li>\n<li><strong>Condivisione social<\/strong> \u2014 pulsanti per condividere il proprio acquisto<\/li>\n<\/ul>\n<h2>Design Responsive per il Commercio Elettronico<\/h2>\n<p>Oltre il 60% degli acquisti online avviene da dispositivi mobili. Elementor Pro consente di configurare impostazioni specifiche per <strong>desktop, tablet e smartphone<\/strong> su ogni widget. Le aree critiche da verificare sono:<\/p>\n<ul>\n<li><strong>Griglia prodotti<\/strong> \u2014 4 colonne su desktop, 2 su tablet, 1 su smartphone<\/li>\n<li><strong>Galleria prodotto<\/strong> \u2014 thumbnails sotto la foto principale su desktop, slider swipe su mobile<\/li>\n<li><strong>Pulsante Add to Cart<\/strong> \u2014 dimensione minima 48px per il touch target su mobile<\/li>\n<li><strong>Checkout<\/strong> \u2014 layout a colonna singola su smartphone con campi full-width<\/li>\n<li><strong>Tabelle carrello<\/strong> \u2014 trasformazione in layout card su schermi piccoli<\/li>\n<\/ul>\n<p>\u00c8 fondamentale testare il negozio su dispositivi reali (non solo tramite il responsive mode del browser) per verificare che gesture come swipe, pinch-to-zoom e tap funzionino correttamente su ogni pagina.<\/p>\n<h2>Considerazioni sulle Prestazioni<\/h2>\n<p>Elementor aggiunge CSS e JavaScript aggiuntivi che possono rallentare il caricamento delle pagine. Per mantenere prestazioni ottimali in un negozio WooCommerce personalizzato con Elementor, \u00e8 necessario adottare alcune precauzioni:<\/p>\n<h3>Ottimizzazioni Elementor<\/h3>\n<ul>\n<li><strong>Abilitare il caricamento ottimizzato degli asset<\/strong> \u2014 in Elementor \u2192 Impostazioni \u2192 Sperimentazioni, attivare &#8220;Improved Asset Loading&#8221; per caricare solo il CSS e il JS dei widget effettivamente utilizzati nella pagina<\/li>\n<li><strong>Ridurre i widget per pagina<\/strong> \u2014 ogni widget aggiunge codice; preferire layout semplici con meno elementi nidificati<\/li>\n<li><strong>Evitare animazioni pesanti<\/strong> \u2014 le animazioni di ingresso su decine di prodotti rallentano il rendering<\/li>\n<li><strong>Utilizzare il Flexbox Container<\/strong> \u2014 il nuovo sistema di layout di Elementor genera meno markup HTML rispetto alle vecchie sezioni<\/li>\n<\/ul>\n<h3>Ottimizzazioni Generali<\/h3>\n<ul>\n<li><strong>Plugin di cache<\/strong> \u2014 WP Rocket o LiteSpeed Cache per il caching delle pagine (escludendo carrello, checkout e area personale)<\/li>\n<li><strong>Lazy loading delle immagini<\/strong> \u2014 fondamentale sulle pagine con molti prodotti<\/li>\n<li><strong>CDN<\/strong> \u2014 per servire immagini e asset statici da server distribuiti geograficamente<\/li>\n<li><strong>Formato WebP\/AVIF<\/strong> \u2014 conversione automatica delle immagini prodotto per ridurre il peso<\/li>\n<li><strong>Preconnect ai gateway di pagamento<\/strong> \u2014 aggiungere <code>&lt;link rel=\"preconnect\"&gt;<\/code> per Stripe, PayPal e altri servizi esterni<\/li>\n<\/ul>\n<p>Un negozio WooCommerce con Elementor Pro ben ottimizzato dovrebbe raggiungere un punteggio <strong>Google PageSpeed superiore a 80<\/strong> su mobile. Valori inferiori indicano la necessit\u00e0 di interventi tecnici mirati.<\/p>\n<h2>Errori Comuni da Evitare<\/h2>\n<p>Dalla nostra esperienza nella <a href=\"https:\/\/gtechgroup.it\/realizzazione-e-commerce\/\">realizzazione di e-commerce professionali<\/a>, gli errori ricorrenti quando si personalizza WooCommerce con Elementor sono:<\/p>\n<ol>\n<li><strong>Non impostare &#8220;Current Query&#8221;<\/strong> \u2014 il widget Products mostra prodotti fissi invece di rispettare filtri e paginazione<\/li>\n<li><strong>Dimenticare le condizioni del template<\/strong> \u2014 il template non viene applicato alle pagine giuste<\/li>\n<li><strong>Ignorare il mobile<\/strong> \u2014 testare solo su desktop e scoprire problemi di layout dopo il lancio<\/li>\n<li><strong>Sovraccaricare di widget<\/strong> \u2014 troppi elementi rendono le pagine lente e confuse<\/li>\n<li><strong>Non aggiornare Elementor Pro<\/strong> \u2014 le versioni obsolete possono avere incompatibilit\u00e0 con WooCommerce<\/li>\n<li><strong>Perdere le personalizzazioni durante gli aggiornamenti<\/strong> \u2014 \u00e8 essenziale usare child theme e template Elementor (mai modificare file core)<\/li>\n<\/ol>\n<h2>Assistenza Professionale<\/h2>\n<p>Personalizzare un negozio WooCommerce con Elementor Pro richiede competenze sia grafiche che tecniche. Un layout esteticamente gradevole ma lento o poco usabile su mobile vanifica gli investimenti in marketing e advertising. Se desideri un e-commerce personalizzato che unisca design professionale e prestazioni ottimali, <a href=\"https:\/\/gtechgroup.it\/contatti\/\">contatta il nostro team<\/a> per una consulenza dedicata.<\/p>\n<div style=\"background:#f9f9f9;border:1px solid #e0e0e0;padding:20px 24px;margin-top:32px;border-radius:8px;\">\n<h3 style=\"margin-top:0;\">Guide correlate della serie WooCommerce<\/h3>\n<ul>\n<li><a href=\"\/blog\/guida-elementor-wordpress\/\">Guida completa a Elementor per WordPress<\/a><\/li>\n<li><a href=\"\/blog\/guida-wp-rocket-wordpress\/\">Ottimizzare le prestazioni con WP Rocket<\/a><\/li>\n<li><a href=\"\/blog\/guida-seopress-wordpress\/\">SEO per WordPress con SEOPress<\/a><\/li>\n<li><a href=\"\/blog\/guida-updraftplus-wordpress\/\">Backup e ripristino con UpdraftPlus<\/a><\/li>\n<\/ul>\n<\/div>\n<h3>Migliora il Tuo Sito WordPress<\/h3>\n<p>Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:<\/p>\n<ul>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/come-installare-elementor-wordpress-guida-principianti\/\">Come Installare Elementor su WordPress<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/wp-rocket-installare-configurare-wordpress\/\">Come Installare e Configurare WP Rocket<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/come-installare-configurare-seopress-wordpress-guida\/\">Come Installare e Configurare SEOPress<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/installare-attivare-updraftplus-wordpress\/\">Come Installare e Configurare UpdraftPlus<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>WooCommerce offre un negozio online funzionale fin da subito, ma le pagine predefinite hanno un aspetto generico che difficilmente rispecchia il brand aziendale. Grazie a&hellip;<\/p>\n","protected":false},"author":2,"featured_media":166806,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"WooCommerce e Elementor: Personalizzare Negozio | Guida","_seopress_titles_desc":"Come personalizzare le pagine WooCommerce con Elementor Pro: shop, prodotto, carrello, checkout, my account e template per categoria.","_seopress_robots_index":"","footnotes":""},"categories":[61],"tags":[3064,836,2599,2520,3065,475],"class_list":["post-166819","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-design-negozio","tag-e-commerce","tag-elementor","tag-page-builder","tag-template","tag-woocommerce"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166819","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=166819"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166819\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/166806"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=166819"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=166819"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=166819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}