Oggi Woocommerce ha conquistato il settore dell'e-commerce con la sua flessibilità rivoluzionaria e le sue opzioni di personalizzazione. Nel mondo dell'e-commerce, si colloca ai vertici della classifica. Ad oggi, detiene il 27% della quota di mercato dell'e-commerce .
Tuttavia, i modelli predefiniti e le pagine prodotto non soddisfano le esigenze di tutte le aziende. WooCommerce offre numerose opzioni di personalizzazione.
Per ottenere risultati ottimali, il tuo negozio deve seguire le migliori pratiche di personalizzazione. Un elemento chiave della personalizzazione risiede nelle pagine prodotto e nei template. Una strategia di personalizzazione ben implementata può ridurre i carrelli abbandonati.
Poiché la maggior parte dei clienti visita il tuo negozio online, per garantire il successo dovresti semplificare la navigazione e la personalizzazione di prodotti e modelli.
Questo articolo mostra come personalizzare i modelli WooCommerce, modificare i modelli di prodotto e personalizzare le pagine dei prodotti.
Perché è importante per i proprietari di negozi personalizzare i modelli WooCommerce?
WooCommerce offre tantissime opzioni di personalizzazione. Puoi personalizzare qualsiasi cosa, dal checkout alle pagine del negozio, dalle pagine delle categorie alle pagine di ringraziamento, ecc. Questo aiuta il tuo negozio a distinguersi dalla massa, ma per distinguersi davvero, personalizzare i template di WooCommerce potrebbe essere d'aiuto.
È fondamentale modificare le pagine predefinite del tuo sito per distinguerti dalla concorrenza in termini di aspetto e funzionalità. Puoi anche personalizzare i modelli predefiniti per dare un vantaggio alla tua attività.
I template che utilizzi possono essere personalizzati per aggiungere funzionalità e dettagli al tuo negozio online. Grazie a queste funzionalità, puoi offrire ai tuoi clienti un'esperienza migliore. Pertanto, è fondamentale mantenere aggiornato il tuo negozio eCommerce approfondendo la modifica dei template WooCommerce. Continua a leggere per scoprire come modificare i template WooCommerce.
Leggi : Come faccio ad aggiornare la mia carta di debito su WooCommerce
Personalizzazione dei modelli WooCommerce con PHP
Plugin e frammenti di codice ti permettono di modificare quasi ogni aspetto del tuo sito web. Utilizzando WooCommerce, puoi modificare i template a livello di programmazione.
Di seguito sono riportati due modi per personalizzare i modelli a livello di programmazione:
- Sovrascrittura dei modelli
- Con ganci
Entrambi i metodi funzioneranno, quindi scegli quello più semplice per te. È importante comprendere le principali differenze tra questi metodi per decidere quando utilizzarli.
Hook vs sovrascrittura dei modelli
Con gli hook, è possibile apportare modifiche semplici utilizzando azioni e filtri. Sovrascrivendo i file modello, è possibile eseguire personalizzazioni più complesse.
Inoltre, si prega di non sovrascrivere un file modello con un hook se utilizzato in un file modello specifico. La sovrascrittura del modello comporterà la sostituzione degli hook utilizzati in quel file, che non saranno più efficaci.
Dopo aver individuato le tue esigenze, seleziona il metodo più adatto alle tue esigenze.
Esplora : i migliori plugin per tabelle di prodotti WooCommerce
Modificare i modelli WooCommerce sovrascrivendoli
Quando si effettuano personalizzazioni complesse, è meglio sovrascrivere i modelli piuttosto che utilizzare gli hook.
Allo stesso modo, la modifica di functions.php è molto simile. Devono essere modificati i file principali del template WooCommerce, non i file del tema.
Fai clic su Plugin > Editor plugin, seleziona WooCommerce dal menu a discesa e scegli modelli per visualizzare i file dei modelli.
Questa sezione contiene tutti i file principali da modificare, ovvero archive-product.php, content-product-cat.php e content-product.php. È anche possibile modificare i file modello in più punti, come il carrello, il checkout e l'email.
I file template di WooCommerce contengono molte cose che puoi modificare. Questo ti permette di personalizzare sia le sottodirectory che le cartelle.
Il passo successivo è visualizzare i modelli WooCommerce personalizzati.
Aggiungi shortcode ai modelli WooCommerce.
Gli shortcode sono un modo comune per personalizzare il codice WooCommerce. Per modificare i template, WordPress e WooCommerce offrono diversi shortcode.
Di seguito è riportato uno script che visualizza la dashboard "Il mio account" di WooCommerce su ogni pagina prodotto. Aggiungetelo al file single-product.php e aggiornatelo.
| if ( ! defined( 'ABSPATH' ) ) { exit; // Esci se si accede direttamente } get_header( 'shop' ); while ( have_posts() ) : the_post(); wc_get_template_part( 'content,' 'single-product' ); endwhile; // fine del ciclo. do_action( 'woocommerce_sidebar' ); $t= ' Il mio account';$t.= do_shortcode(“[woocommerce_my_account]”); $t.=” ”; echo $t; get_footer( 'shop' ); |
La dashboard apparirà dopo aver visualizzato in anteprima le pagine dei prodotti.
Assicurati che il cliente sappia di averlo acquistato prima
I template di WooCommerce possono anche essere modificati per offrire sconti ai clienti più fedeli. Anche in questo caso, copia e incolla il codice nella pagina single-product.php.
| get_header( 'shop' ); while ( have_posts() ) : the_post(); wc_get_template_part( 'content', 'single-product' ); endwhile; // fine del ciclo. $current_user = wp_get_current_user(); if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ): echo ' ♥ Hey ' . $current_user->first_name . ', hai già acquistato questo articolo. Acquista di nuovo utilizzando questo coupon: PURCHASE_AGAIN_21 ';endif; get_footer( 'shop' ); |
I clienti visualizzeranno il messaggio di pagamento dopo aver visualizzato un prodotto che hanno già acquistato.
Esplora : Magento vs. WooCommerce: qual è la scelta migliore nel 2023?
Modifica dei modelli WooCommerce tramite hook
Gli hook sono utili anche per personalizzare i template di WooCommerce se sovrascrivere i file dei template non fa per te. Puoi aggiungere hook come azioni o filtri al tuo sito web per aumentarne rapidamente le funzionalità e apportare semplici modifiche.
Inoltre, puoi modificare i template del tuo negozio tramite gli hook di WooCommerce. Questo approccio è consigliato solo per personalizzazioni semplici. È preferibile sovrascrivere i template per modifiche complesse.
Apri il file functions.php in Aspetto > Editor temi, quindi copia e incolla il frammento di codice con i tuoi hook di azione o filtro.
Ecco alcuni esempi di hook disponibili per la modifica dei template WooCommerce.
Aggiungere informazioni a una singola immagine del prodotto
Se desideri visualizzare ulteriori informazioni sul prodotto sopra l'immagine, inserisci il seguente codice in functions.php.
| // Aggiungi la funzione personalizzata function quadlayers_before_single_product() { echo ' Tutto scontato del 25% per questa settimana!';} // Aggiungi l'azione add_action( 'woocommerce_before_single_product', 'quadlayers_before_single_product', 11 ); |
Questo messaggio apparirà sulle pagine dei singoli prodotti.
Personalizzazione del modello WooCommerce con i plugin
Hai difficoltà con gli aspetti di programmazione? Nessun problema. Puoi comunque personalizzare i template di WooCommerce con i plugin. Con la crescita del settore, sono disponibili innumerevoli plugin per personalizzare i tuoi template.
Ecco il plugin più efficiente: Edit WooCommerce Templates . È un plugin gratuito e facile da usare che ti permette di personalizzare i template del tuo tema. Con pochi clic, puoi cambiare template e ripristinare quelli predefiniti in qualsiasi momento.
Ecco alcuni plugin aggiuntivi di WooCommerce che ti consentono di personalizzare i modelli e migliorare le prestazioni del tuo negozio.
- Campi personalizzati WooCommerce : con questo plugin, gli utenti possono creare campi unici nelle pagine dei prodotti WooCommerce, nelle pagine di pagamento e altro ancora.
- WooCommerce Customizer : dedicato ai modelli WooCommerce, questo plugin offre una varietà di opzioni di personalizzazione aggiuntive per il tuo negozio.
- WooCommerce Single Product Page Customizer : questo plugin consente di modificare l'aspetto della pagina del singolo prodotto all'interno di WooCommerce.
Da sapere : come impostare le prenotazioni WooCommerce?
Personalizzazione delle pagine prodotto di WooCommerce: perché è essenziale?
Personalizzare le pagine prodotto di WooCommerce è fondamentale, quindi non puoi perderti questa opportunità. I vantaggi e i benefici della personalizzazione delle pagine prodotto di WooCommerce sono infiniti. In questo modo, è possibile eliminare le preoccupazioni dei clienti, creare una presentazione distintiva e migliorare la soddisfazione del cliente.
Ecco alcuni vantaggi cruciali derivanti dall'implementazione della personalizzazione nelle pagine dei prodotti:
Pagine ottimizzate per la conversione
Una pagina prodotto personalizzata può aumentare i tassi di conversione. È possibile implementare numerose opzioni, tra cui opzioni di ricerca e filtro. Pertanto, i clienti troveranno e acquisteranno i prodotti più facilmente, con meno punti di attrito.
Rendilo più attraente
L'obiettivo della personalizzazione è spesso quello di progettare e impaginare pagine prodotto che coinvolgano e attraggano i clienti. L'interesse dei clienti può essere suscitato da immagini accattivanti, descrizioni di prodotto accattivanti ed elementi esteticamente gradevoli.
L'esperienza utente potrebbe essere migliorata
Assicurati che le tue scelte di design siano chiare e intuitive, che la velocità di caricamento sia elevata, che la navigazione sia semplice e che i tuoi clienti vivano un'esperienza ottimale. Questo aumenterà le conversioni e ti farà fidelizzare i clienti.
Da sapere : i migliori componenti aggiuntivi per i prodotti WooCommerce
Modi per personalizzare le pagine dei prodotti
Per mantenere l'aspetto grafico del tuo negozio al passo con i tempi, devi personalizzare le pagine prodotto. Ecco tre metodi fondamentali per personalizzare le pagine prodotto con successo:
- Migliora le pagine dei prodotti WooCommerce con i plugin
Con WooCommerce puoi creare facilmente un negozio online. Sono disponibili vari plugin per migliorare il tuo negozio, inclusi quelli che personalizzano le pagine dei prodotti.
Personalizzare le pagine dei prodotti con i plugin WooCommerce è semplice:
Plugin
- Componenti aggiuntivi per prodotti WooCommerce : utilizzando questo plugin puoi aggiungere caselle di controllo, menu a discesa e caselle di testo alle pagine dei tuoi prodotti.
- WooCommerce 360º Image : utilizzando questo plugin puoi ruotare le immagini a tuo piacimento.
- Video del prodotto per WooCommerce : il plugin consente di aggiungere video ai prodotti.
- Tabella delle taglie per WooCommerce : questo plugin semplifica l'aggiunta di tabelle delle taglie ai tuoi prodotti.
- Raccomandazioni sui prodotti : questo plugin ti consente di aggiungere una sezione di raccomandazioni alla pagina del tuo prodotto.
Correlati : Oltre 40 migliori plugin WooCommerce [gratuiti e a pagamento]
- Personalizzazione delle pagine prodotto di WooCommerce con CSS
Utilizzare il codice CSS per personalizzare i prodotti WooCommerce può far risaltare il tuo negozio online e offrire ai clienti un'esperienza unica. Per modificare le pagine prodotto, scrivi il codice CSS.
Dopo aver effettuato l'accesso, vai su Aspetto → Personalizza.
Codice CSS per CTA nero
Aggiungendo questo codice al CSS aggiuntivo, il colore CTA predefinito verrà modificato in nero.
| button.alt, input[type=”button”].alt, input[type=”reset”].alt, input[type=”submit”].alt, .button.alt, .widget-area .widget a.button.alt { colore-sfondo: #1d1a1a; colore-bordo: #333333; colore: #ffffff; } |
Codice CSS per CTA blu
Inoltre, per convertire il nero in blu, utilizzare il seguente codice CSS.
| button.alt, input[type=”button”].alt, input[type=”reset”].alt, input[type=”submit”].alt, .button.alt, .widget-area .widget a.button.alt { background-color: #4f5dd5; border-color: #333333; color: #ffffff; } |
- Aggiungi codice personalizzato alle pagine dei prodotti WooCommerce
Se hai una solida conoscenza tecnica, puoi facilmente implementare la personalizzazione della pagina del prodotto tramite codice personalizzato.
Scopri : perché le FAQ sono essenziali per il tuo negozio WooCommerce?
Fase 1: stabilire un modello globale
Per iniziare, è necessario stabilire un modello globale che verrà utilizzato per tutte le pagine dei prodotti.
Iniziare con un commento PHP che indichi il nome del modello in alto.
Crea un file template-custom-product.php e inseriscilo nel tema attivato.
| <?php /*Template Name: Customize Product*/ ?> |
Questo modello utilizza la pagina prodotto predefinita di WooCommerce. Ecco il codice.
| $params = array('posts_per_page' => 5, 'post_type' => 'product'); $wc_query = new WP_Query($params); ?> have_posts()) : ?> have_posts()) : $wc_query->the_post(); ?> |
È un modello base. Anche se funziona, con WooCommerce puoi fare di più.
WooCommerce offre diverse funzioni per personalizzare le pagine di visualizzazione dei prodotti, che includono un'ampia gamma di informazioni:
| the_permalink() – Visualizza l'URL del prodotto. the_content() – Visualizza la descrizione completa del prodotto. the_excerpt() – Visualizza una breve descrizione del prodotto. the_ID() – Visualizza l'ID del prodotto. the_title() – Visualizza il nome del prodotto. the_post_thumbnail() – Visualizza l'immagine del prodotto. |
Passaggio 2: aggiungere funzionalità nel file functions.php del tema attivato
Visualizza le categorie dei prodotti WooCommerce
Le categorie sono il luogo in cui puoi categorizzare i tuoi prodotti. Attiva il tema e importa questo frammento nel file functions.php per indicare la categoria di un prodotto.
se ( ! definito( 'ABSPATH' ) ) { uscita; } globale $prodotto; ?> get_sku() || $product->is_type( 'variabile' ) ) ) : ?> get_sku() ) ? $sku : esc_html__( 'N/D', 'woocommerce' ); ?> get_id(), ', ', ' ' . _n( 'Categoria:', 'Categorie:', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', ' ' ); ?> get_id(), ', ', ' ' . _n( 'Tag:', 'Tag:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', ' ' ); ?> |
Visualizza le miniature delle categorie di prodotti
Per ogni categoria di prodotto è disponibile una miniatura. Quando sei pronto a configurare la visualizzazione personalizzata dei tuoi prodotti, aggiungi questo codice al file template.php o functions.php del tuo tema.
| funzione cwresponse_get_thumbnail(){ if(is_page(205)){ $args = array( 'tax_query' => array( array( 'taxonomy' => 'product_cat', 'field' => 'slug' ) ) ) ; $random_products = get_posts( $args ); foreach ( $random_products as $post ) : setup_postdata( $post ); ?> endforeach; wp_reset_postdata(); } } add_action('wp_footer', 'cwresponse_get_thumbnail'); |
Eliminare l'intestazione della descrizione.
Quando si utilizza Woocommerce, è sufficiente deselezionare il campo descrizione per ogni scheda prodotto e modificare il file functions.php per includere il seguente codice.
| add_filter( 'woocommerce_product_description_heading', '__return_null' ); |
Rimuovi titolo prodotto
Ecco come eliminare il titolo nelle schede dei singoli prodotti di WooCommerce: inserisci questo codice in functions.php.
| remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title' ); |
Passaggio 3: modifica dei modelli WooCommerce
Inserisci il codice seguente nel file content-single-product.php o nella directory single product in woocommerce/templates. È preferibile usare functions.php.
<div class="images"><?php if ( has_post_thumbnail() ) { $image_caption = get_post( get_post_thumbnail_id() )-> post_excerpt; $image_link = wp_get_attachment_url( get_post_thumbnail_id() ); $image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array( 'title' => get_the_title( get_post_thumbnail_id() ) ) ); $attachment_count = count( $product->get_gallery_attachment_ids() ); if ( $attachment_count > 0 ) { $gallery = '[product-gallery]'; } else { $gallery = ''; } echo apply_filters( 'woocommerce_single_product_image_html', sprintf( ' <a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%S" data-rel="prettyPhoto' . $gallery . '">%s</a> ', $image_link, $image_caption, $image ), $post->ID ); } else { echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%S" /> ', wc_placeholder_img_src(), __( 'Segnaposto', 'woocommerce' ) ), $post->ID ); } ?><?php do_action( 'woocommerce_product_thumbnails' ); ?></div>In alternativa, puoi semplicemente scrivere codice CSS.
.images { float: giusto! importante; }
Finalmente! Hai finito.
Per saperne di più: Come aggiungere la spedizione a WooCommerce?
Conclusione
La creazione di pagine prodotto e modelli WooCommerce unici e visivamente accattivanti migliora l'esperienza di acquisto dei clienti.
Utilizzando override, hook, filtri e personalizzazione CSS potrai personalizzare le pagine dei tuoi prodotti per soddisfare le aspettative dei tuoi clienti e allinearle all'identità del tuo marchio.
Ottimizza la reattività mobile del tuo negozio online basato su WooCommerce e personalizzalo per migliorare l'esperienza utente complessiva. Inizia a implementare pratiche di personalizzazione e fai in modo che il tuo negozio ottenga il massimo valore.
Cerchi un aiuto professionale per personalizzare WooCommerce? Contattaci oggi stesso!
