Oggi Woocommerce ha conquistato il settore dell'e-commerce grazie alla sua flessibilità e alle sue opzioni di personalizzazione all'avanguardia. Nel mondo dell'e-commerce, occupa una posizione di rilievo. Ad oggi, detiene il 27% della quota di mercato dell'e-commerce.
Ma i modelli e le pagine di prodotto precostituite non soddisfano le esigenze di tutte le aziende. WooCommerce offre numerose opzioni di personalizzazione.
Per ottenere buoni risultati, il vostro negozio deve seguire le migliori pratiche di personalizzazione. Una componente chiave della personalizzazione è rappresentata dalle pagine dei prodotti e dai modelli. Una strategia di personalizzazione ben implementata può ridurre i carrelli abbandonati.
Poiché la maggior parte dei clienti visita il vostro negozio online, dovreste rendere più semplice la navigazione e la personalizzazione dei prodotti e dei modelli per garantire il successo.
Questo articolo mostra come personalizzare i modelli di WooCommerce, modificare i modelli dei prodotti e personalizzare le pagine dei prodotti.
Perché è importante per i proprietari di negozi personalizzare i modelli WooCommerce?
WooCommerce offre moltissime opzioni di personalizzazione. È possibile personalizzare qualsiasi cosa, dalla cassa alle pagine del negozio, alle pagine delle categorie, alle pagine di ringraziamento, ecc. Questo aiuta il vostro negozio a distinguersi dalla massa, ma per essere veramente distintivo, la personalizzazione dei modelli di WooCommerce potrebbe essere utile.
È essenziale modificare le pagine predefinite del sito per ottenere un aspetto diverso da quello della concorrenza. È inoltre possibile personalizzare i modelli predefiniti per dare alla propria azienda un vantaggio.
I modelli utilizzati possono essere personalizzati per aggiungere funzionalità e dettagli al vostro negozio online. Grazie a queste caratteristiche, è possibile offrire agli acquirenti un'esperienza migliore. Per questo motivo, è necessario mantenere aggiornato il proprio negozio di e-commerce approfondendo la modifica dei modelli di WooCommerce. Continuate a leggere per scoprire come modificare i modelli di WooCommerce.
Leggi: Come aggiornare la carta di debito su WooCommerce
Personalizzazione dei modelli di WooCommerce con PHP
I plugin e gli snippet di codice consentono di modificare quasi tutti gli aspetti del sito web. Utilizzando WooCommerce, è possibile modificare i modelli in modo programmatico.
Di seguito sono riportati due modi per personalizzare i modelli in modo programmatico:
- Modelli di sovrascrittura
- Con ganci
Entrambi i metodi funzionano, quindi scegliete quello più facile per voi. È necessario comprendere le principali differenze tra questi metodi per stabilire quando utilizzarli.
Ganci e sovrascrittura dei modelli
Con i ganci, è possibile apportare semplici modifiche utilizzando azioni e filtri. Sovrascrivendo i file dei modelli, si possono eseguire personalizzazioni più complesse.
Inoltre, si noti di non sovrascrivere un file di template con un gancio se utilizzato in un file di template specifico. Sovrascrivendo il modello, i ganci usati in quel file verranno sostituiti e non saranno più efficaci.
Scegliete il metodo più adatto alle vostre esigenze, dopo averne valutato le necessità.
Modifica dei modelli di WooCommerce sovrascrivendoli
Quando si effettuano personalizzazioni complesse, è meglio sovrascrivere i modelli piuttosto che usare i ganci.
Allo stesso modo, la modifica di functions.php è molto simile. È necessario modificare i file principali del modello di WooCommerce invece dei file del tema.
Fare clic su Plugin > Plugin Editor, scegliere WooCommerce dal menu a discesa e scegliere template per visualizzare i file dei template.
Questa sezione contiene tutti i file principali da modificare, ossia archive-product.php, content-product-cat.php e content-product.php. È anche possibile modificare i file dei modelli in più punti, come il carrello, il checkout e l'e-mail.
I file del modello WooCommerce hanno molte cose che si possono modificare. Questo permette di personalizzare sia le sottodirectory che le cartelle.
Il passo successivo è quello di vedere i modelli WooCommerce personalizzati.
Aggiungere shortcode ai modelli WooCommerce.
Gli shortcode sono un modo comune per personalizzare il codice di WooCommerce. Per la modifica dei modelli, WordPress e WooCommerce mettono a disposizione una serie di shortcode.
Di seguito è riportato uno script che visualizza la dashboard di WooCommerce My Account su ogni pagina di prodotto. Aggiungerlo al file single-product.php e aggiornarlo.
| <?php if ( ! defined( ‘ABSPATH’ ) ) { exit; // Exit if accessed directly } get_header( ‘shop’ ); while ( have_posts() ) : the_post(); wc_get_template_part( ‘content,’ ‘single-product’ ); endwhile; // end of the loop. do_action( ‘woocommerce_sidebar’ ); $t= ‘<div id=”myacc”><h4>My Account</h4>’; $t.= do_shortcode(“[woocommerce_my_account]”); $t.=”</div>”; echo $t; get_footer( ‘shop’ ); |
La dashboard viene visualizzata dopo l'anteprima delle pagine dei prodotti.
Assicurarsi che il cliente sappia di averlo acquistato in precedenza
Anche i modelli di WooCommerce possono essere modificati per offrire sconti ai clienti fedeli. Anche in questo caso, copiate e incollate il codice nella pagina single-product.php.
| get_header( ‘shop’ ); while ( have_posts() ) : the_post(); wc_get_template_part( ‘content’, ‘single-product’ ); endwhile; // end of the loop. $current_user = wp_get_current_user(); if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ): echo ‘<div class=”user-bought”>♥ Hey ‘ . $current_user->first_name . ‘, you\’ve purchased this before. Buy again using this coupon: <b>PURCHASE_AGAIN_21</b></div>’; endif; get_footer( ‘shop’ ); |
I clienti vedranno il messaggio di checkout dopo aver visualizzato un prodotto già acquistato.
Esplorare: Magento Vs. WooCommerce: Qual è la scelta migliore nel 2023?
Modificare i modelli di WooCommerce utilizzando i ganci
I ganci sono utili anche per personalizzare i modelli di WooCommerce, se la sovrascrittura dei file dei modelli non fa per voi. È possibile aggiungere gli hook come azioni o filtri al proprio sito web per aumentarne rapidamente la funzionalità e apportare semplici modifiche.
Inoltre, è possibile modificare i modelli del negozio tramite i ganci di WooCommerce. Questo approccio è consigliato solo per semplici personalizzazioni. È meglio sovrascrivere i modelli per modifiche complesse.
Aprire il file functions.php in Aspetto > Editor del tema e copiare e incollare il frammento di codice con i ganci per le azioni o i filtri.
Ecco alcuni esempi di ganci disponibili per la modifica dei modelli WooCommerce.
Aggiunta di informazioni a una singola immagine del prodotto
Se si desidera visualizzare informazioni aggiuntive sul prodotto sopra l'immagine, inserire il seguente codice in functions.php.
| // Add custom function function quadlayers_before_single_product() { echo ‘<h2>Everything is 25% off for this week!</h2>’; } // Add the action add_action( ‘woocommerce_before_single_product’, ‘quadlayers_before_single_product’, 11 ); |
Nelle pagine dei singoli prodotti viene visualizzato questo messaggio.
Personalizzazione del modello WooCommerce con i plugin
Avete difficoltà con gli aspetti di codifica? Nessun problema. Potete comunque personalizzare i modelli WooCommerce con i plugin. Con la crescita del settore, i plugin per personalizzare i vostri modelli sono infiniti.
Ecco il plugin più efficiente: Edit WooCommerce Templates. È un plugin gratuito facile da usare che consente di personalizzare i modelli del tema. Con pochi clic, è possibile cambiare i modelli e ripristinare i valori predefiniti in qualsiasi momento.
Ecco alcuni dei plugin WooCommerce aggiuntivi che consentono di personalizzare i modelli e migliorare le prestazioni del vostro negozio.
- Campi personalizzati WooCommerce: Con questo plugin, gli utenti possono creare campi unici all'interno delle pagine dei prodotti WooCommerce, delle pagine di checkout e altro ancora.
- Personalizzatore WooCommerce: Dedicato ai modelli WooCommerce, questo plugin offre una serie di opzioni di personalizzazione aggiuntive per il vostro negozio.
- Personalizzatore della pagina del prodotto singolo di WooCommerce: Questo plugin consente di modificare l'aspetto della pagina del prodotto singolo all'interno di WooCommerce.
Conoscere: Come impostare le prenotazioni di WooCommerce?
Personalizzazione delle pagine dei prodotti di WooCommerce: Perché è essenziale?
La personalizzazione delle pagine di prodotto di WooCommerce è fondamentale, quindi non potete lasciarvela sfuggire. I benefici e i vantaggi della personalizzazione delle pagine di prodotto di WooCommerce sono infiniti. In questo modo è possibile eliminare le preoccupazioni dei clienti, creare una presentazione distintiva e migliorare la soddisfazione dei clienti.
Ecco alcuni vantaggi fondamentali della personalizzazione delle pagine dei prodotti:
Pagine ottimizzate per la conversione
Una pagina di prodotto personalizzata può aumentare i tassi di conversione. È possibile implementare molte opzioni, tra cui quelle di ricerca e di filtraggio. Pertanto, i clienti troveranno e acquisteranno i prodotti più facilmente, con meno punti di attrito.
Renderlo più attraente
L'obiettivo della personalizzazione è spesso quello di progettare e impaginare pagine di prodotto che coinvolgano e attraggano i clienti. L'interesse dei clienti può essere suscitato da immagini accattivanti, descrizioni dei prodotti allettanti ed elementi esteticamente gradevoli.
L'UX potrebbe essere migliorata
Assicuratevi che le vostre scelte di design siano chiare e intuitive, che la velocità di caricamento sia rapida, che la navigazione sia semplice e che i vostri clienti abbiano un'ottima esperienza. In questo modo aumenterete le conversioni e otterrete clienti abituali.
Conoscere: I migliori componenti aggiuntivi per prodotti WooCommerce
Modi per personalizzare le pagine dei prodotti
Per rimanere al passo con l'aspetto visivo del vostro negozio, dovete personalizzare le pagine dei prodotti. Ecco tre metodi fondamentali per personalizzare con successo le pagine dei prodotti:
- Migliorare le pagine dei prodotti WooCommerce con i plugin
Utilizzando WooCommerce, è possibile creare facilmente un negozio online. Sono disponibili vari plugin per migliorare il vostro negozio, compresi quelli che personalizzano le pagine dei prodotti.
Personalizzare le pagine dei prodotti con i plugin di WooCommerce è facile:
Plugin
- Componenti aggiuntivi per prodotti WooCommerce: Utilizzando questo plugin, è possibile aggiungere caselle di controllo, menu a tendina e caselle di testo alle pagine dei prodotti.
- Immagine WooCommerce a 360º: Utilizzando questo plugin, è possibile ruotare le immagini a proprio piacimento.
- Video prodotto per WooCommerce: Il plugin consente di aggiungere video dei prodotti.
- Tabella delle taglie per WooCommerce: Questo plugin semplifica l'aggiunta di tabelle delle taglie ai prodotti.
- Raccomandazioni sui prodotti: Questo plugin consente di aggiungere una sezione di raccomandazioni alla pagina del prodotto.
Correlato: 40+ Migliori Plugin WooCommerce [Gratis+Pagato]
- Personalizzazione delle pagine dei prodotti di WooCommerce con i CSS
L'uso dei CSS per personalizzare i prodotti di WooCommerce può far risaltare il vostro negozio online e offrire ai clienti un'esperienza unica. Per modificare le pagine dei prodotti, scrivere il codice CSS.
Una volta effettuato l'accesso, andare su Aspetto → Personalizza.
Codice CSS per la CTA nera
Aggiungendo questo codice al CSS aggiuntivo, il colore predefinito della CTA sarà nero.
| button.alt, input[type=”button”].alt, input[type=”reset”].alt, input[type=”submit”].alt, .button.alt, .widget-area .widget a.button.alt { background-color: #1d1a1a; border-color: #333333; color: #ffffff; } |
Codice CSS per la 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; } |
- Aggiungere codice personalizzato alle pagine dei prodotti di WooCommerce
Se siete pieni di conoscenze tecniche, potete implementare comodamente la personalizzazione della pagina del prodotto tramite codice personalizzato.
Imparare: Perché le FAQ sono essenziali per il vostro negozio WooCommerce?
Passo 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 template all'inizio.
Creare un file template-custom-product.php e inserirlo nel tema attivato.
| <?php /*Template Name: Customize Product*/ ?> |
Questo modello utilizza la pagina prodotto predefinita di WooCommerce. Ecco il codice.
| <?php $params = array(‘posts_per_page’ => 5, ‘post_type’ => ‘product’); $wc_query = new WP_Query($params); ?> <?php if ($wc_query->have_posts()) : ?> <?php while ($wc_query->have_posts()) : $wc_query->the_post(); ?> <?php the_title(); ?> <?php endwhile; ?> <?php wp_reset_postdata(); ?> <?php else: ?> <p> <?php _e( ‘No Products’); ?> </p> <?php endif; ?> |
È un modello di base. Anche se è sufficiente, si può fare di più con WooCommerce.
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. |
Passo 2: Aggiungere le funzionalità nel functions.php del tema attivato
Visualizzare le categorie dei prodotti WooCommerce
Le categorie sono il luogo in cui vengono classificati i prodotti. Attivare il tema e importare questo snippet nel file functions.php per indicare la categoria di un prodotto.
<?php if ( ! defined( ‘ABSPATH’ ) ) { exit; } global $product; ?> <div class=”product_meta”> <?php do_action( ‘woocommerce_product_meta_start’ ); ?> <?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( ‘variable’ ) ) ) : ?> <span class=”sku_wrapper”><?php esc_html_e( ‘SKU:’, ‘woocommerce’ ); ?> <span class=”sku”><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( ‘N/A’, ‘woocommerce’ ); ?></span></span> <?php endif; ?> <?php echo wc_get_product_category_list( $product->get_id(), ‘, ‘, ‘<span class=”posted_in”>’ . _n( ‘Category:’, ‘Categories:’, count( $product->get_category_ids() ), ‘woocommerce’ ) . ‘ ‘, ‘</span>’ ); ?> <?php echo wc_get_product_tag_list( $product->get_id(), ‘, ‘, ‘<span class=”tagged_as”>’ . _n( ‘Tag:’, ‘Tags:’, count( $product->get_tag_ids() ), ‘woocommerce’ ) . ‘ ‘, ‘</span>’ ); ?> <?php do_action( ‘woocommerce_product_meta_end’ ); ?> </div> |
Visualizzare le miniature delle categorie di prodotti
Per ogni categoria di prodotto è disponibile una miniatura. Quando si è pronti a impostare la visualizzazione personalizzata dei prodotti, aggiungere questo codice al file template.php o functions.php del tema.
| <?php function 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 ); ?> <div><a href=”<?php the_permalink(); ?>”><?php the_post_thumbnail(); ?></a></div> <?php endforeach; wp_reset_postdata(); } } add_action(‘wp_footer’, ‘cwresponse_get_thumbnail’); |
Eliminare l'intestazione della descrizione.
Quando si utilizza Woocommerce, è sufficiente deselezionare il campo della descrizione per ogni scheda prodotto e modificare il file functions.php per includere il seguente codice.
| add_filter( 'woocommerce_product_description_heading', '__return_null' ); |
Rimuovere il titolo del prodotto
Ecco come eliminare il titolo nelle schede dei singoli prodotti di woocommerce: inserire questo codice in functions.php.
| remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title' ); |
Passo 3: Cambiare i modelli di WooCommerce
Inserire il codice sottostante nel file content-single-product.php o nella cartella single product sotto woocommerce/templates. È meglio 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(), __( ‘Placeholder’, ‘woocommerce’ ) ), $post->ID ); } ?> <?php do_action( ‘woocommerce_product_thumbnails’ ); ?> </div> |
In alternativa, è possibile scrivere semplicemente del codice CSS.
.images { float: right! important; }
Finalmente! Avete finito.
Per saperne di più: Come aggiungere le spedizioni a WooCommerce?
Conclusione
La creazione di pagine e modelli di prodotto WooCommerce unici e visivamente accattivanti migliora l'esperienza di acquisto dei clienti.
L'utilizzo di override, hook, filtri e personalizzazione dei CSS vi consentirà di personalizzare le pagine dei prodotti per rispondere alle aspettative dei clienti e allinearsi all'identità del vostro marchio.
Ottimizzate la reattività mobile del vostro negozio online basato su WooCommerce e personalizzatelo per migliorare l'esperienza complessiva dell'utente. Iniziate a implementare le pratiche di personalizzazione e mettete il vostro negozio in condizione di ottenere il massimo valore.
Cercate un aiuto professionale per personalizzare WooCommerce? Contattateci oggi stesso!
