Come aggiungere prodotti correlati a WooCommerce: 3 metodi

Stai cercando modi per migliorare le conversioni dei tuoi prodotti? L'aggiunta di una sezione di prodotti correlati personalizzati per il tuo negozio online può essere un ottimo modo per indurre i tuoi clienti ad acquistare più dei tuoi articoli. Per aiutarti a farlo, ti abbiamo portato la nostra guida su come aggiungere prodotti correlati a WooCommerce.

Mostrare prodotti simili può essere un ottimo modo per migliorare le tue conversioni. Se presenti ai tuoi clienti la corretta gamma di prodotti, migliorerai sicuramente le tue vendite. Ma prima di passare al processo, diamo un'occhiata al motivo per cui hai bisogno della sezione dei prodotti correlati in breve.

Perché utilizzare sezioni di prodotti correlati in WooCommerce?

Il cross-selling è una parte importante per migliorare i tuoi tassi di conversione. Fornendo ai clienti opzioni per acquistare prodotti simili, puoi incoraggiarli a considerare l'acquisto di più prodotti per il valore aggiunto. Allo stesso modo, puoi anche utilizzare le vendite incrociate per promuovere i prodotti che vedi essere acquistati insieme. Se riesci a monitorare bene i tuoi acquisti, puoi sempre scegliere di aggiungere prodotti specifici all'elenco delle vendite incrociate per maggiori profitti.

Questo metodo stesso è molto importante nelle attività online su larga scala. Ad esempio, su Amazon, puoi vederli fornire vendite incrociate utilizzando le sezioni etichettate " Acquistati frequentemente insieme" , " Anche i clienti hanno acquistato" o " prodotti di marchi simili".

Quindi, se vuoi aumentare le tue vendite , ti consigliamo di aggiungere e personalizzare la tua sezione Prodotti relativi a WooCommerce. Ora che hai un'idea della sua importanza, vediamo come possiamo aggiungerli al tuo sito di eCommerce.

Come aggiungere prodotti correlati a WooCommerce

Per impostazione predefinita, WooCommerce ti consente di personalizzare tre diversi tipi di prodotti correlati. Queste opzioni sono:

• Up-sells : prodotti che vengono mostrati durante la visualizzazione della pagina del prodotto.
• Vendite incrociate : prodotti che vengono mostrati durante la visualizzazione della pagina del carrello.
• Prodotti correlati: prodotti che vengono visualizzati automaticamente nella pagina del prodotto in base ai tag e alle categorie del prodotto.

Sebbene tu possa aggiungere manualmente quali prodotti mostrare negli up-sell e nei cross-sell di ciascun WooCommerce, puoi configurare le sezioni dei prodotti correlati solo impostando correttamente i tag e le categorie.

Complessivamente, ci sono 3 modi principali per aggiungere i prodotti correlati in WooCommerce. Sono:

• Dalla dashboard di WooCommerce
• Utilizzo di un plug-in
• Programmaticamente

Nota: assicurati di aver installato uno dei temi WooCommerce compatibili e di aver impostato WooCommerce correttamente sul tuo sito Web per evitare problemi inutili nel processo.

Configura i prodotti correlati a WooCommerce nella dashboard di WooCommerce

Per impostare le vendite incrociate e le vendite incrociate per un prodotto specifico, vai su Prodotti > Tutti i prodotti dalla dashboard di amministrazione di WordPress. Quindi, fai clic sul pulsante Modifica di tutti i prodotti specifici per i quali desideri aggiungere up-sell e cross-sell.

Quindi, scorri verso il basso e in Dati prodotto, fai clic su Prodotti collegati. Ora vai avanti ed elenca tutti i prodotti che desideri vengano mostrati come prodotti correlati per il particolare prodotto. Possono includere sia gli up-sell che i cross-sell.

Infine, aggiorna il prodotto.

Quando visualizzi in anteprima il particolare prodotto sul tuo sito web, sarai in grado di vedere i prodotti collegati sul front-end del tuo sito web.

Allo stesso modo, sarai anche in grado di vedere i prodotti correlati al cross-sell quando visualizzi l'anteprima della pagina del carrello.

Tuttavia, i prodotti relativi a WooCommerce sono abbastanza diversi dalla sezione " Ti potrebbe piacere" che ti forniscono i cross-sell e gli upsell. Per impostazione predefinita, WooCommerce seleziona casualmente i prodotti da mostrare nelle sezioni "Potrebbero piacerti" utilizzando i tag e le categorie. Questa opzione non è configurabile utilizzando le opzioni predefinite di WooCommerce.

Puoi personalizzare questi prodotti correlati solo utilizzando i plug-in di prodotti correlati a WooCommerce o in modo programmatico utilizzando WooCommerce Hooks.

Discuteremo ulteriormente come eseguirli entrambi in questa guida. Quindi, se desideri imparare a personalizzare di più i tuoi prodotti correlati a WooCommerce, ti consigliamo di continuare a leggere. Iniziamo con il metodo del plugin in quanto è più adatto ai principianti.

Come aggiungere prodotti correlati a WooCommerce utilizzando un plug-in

L'utilizzo di un plug-in è uno dei modi più semplici per aggiungere e personalizzare i prodotti correlati. Questi plugin sono progettati specificamente per aiutarti a scegliere manualmente quali prodotti aggiungere alle sezioni dei tuoi prodotti correlati a WooCommerce.

Ci sono un certo numero di plugin disponibili in WordPress con varie funzionalità. Alcuni di essi ti consentono di aggiungere sezioni correlate personalizzabili che puoi aggiungere a qualsiasi parte del tuo sito web. Mentre altro lavoro fornendo cursori e banner in primo piano completamente personalizzabili.

Naturalmente, l'opzione per scegliere il tuo plugin dipende da te. Ma per la demo di oggi, utilizzeremo il plug-in Prodotti correlati personalizzati per WooCommerce di Scott Nelle. Questo plug-in funziona con il semplice metodo di consentirti di specificare i prodotti da aggiungere per i prodotti correlati di tutti i prodotti che desideri.

Ma per iniziare a utilizzare il plugin, devi prima installarlo e attivarlo.

1. Installa e attiva il plug-in

Apri la dashboard dell'amministratore di WP e fai clic su Plugin> Aggiungi nuovo per iniziare. Quindi, utilizza la barra di ricerca in alto a destra per cercare prodotti correlati personalizzati per WooCommerce . Quindi, fai clic su Installa ora nella scheda del plug-in e quindi su Attivalo al termine dell'installazione. Ora dovresti aver finito di attivare e installare il plugin.

Se desideri utilizzare un plug-in che non è incluso nel repository di WordPress, dovrai installarlo manualmente. Abbiamo una guida dettagliata per installare manualmente un WordPress se hai bisogno di maggiori informazioni su di esso.

2. Aggiungi prodotti correlati tramite la pagina del prodotto

Il plug-in stesso funziona consentendoti di aggiungere una sezione di prodotti correlati a ciascun prodotto specifico. Puoi farlo aprendo uno qualsiasi dei tuoi prodotti WooCommerce e specificandolo in Dati prodotto. Se non aggiungi prodotti alla sezione dei prodotti correlati, il plug-in torna al comportamento predefinito di WooCommerce di scegliere casualmente i prodotti correlati a WooCommerce utilizzando i tag.

Quindi, apri nuovamente Prodotti > Tutti i prodotti dalla dashboard di amministrazione di WP e fai clic su Modifica per il prodotto a cui desideri aggiungere i prodotti correlati. Questo è lo stesso dell'approccio precedente dalla dashboard di WooCommerce.

Ancora una volta, scorri verso il basso sotto Dati prodotto e fai clic su Prodotti collegati . Ora dovresti vedere un nuovo campo etichettato Prodotti correlati . Ora tutto ciò che devi fare è digitare manualmente i nomi del prodotto che desideri aggiungere come prodotto correlato per il prodotto specifico.

Aggiorna il prodotto e potrai vedere le modifiche sulla pagina del tuo prodotto:

Aggiungi prodotti correlati a WooCommerce in modo programmatico

In alternativa, se non desideri utilizzare un plug-in WooCommerce per gestire e personalizzare i prodotti correlati a WooCommerce, puoi anche scegliere di aggiungerli utilizzando uno snippet di codice. Per questo, devi aggiungere alcune righe di codice al file functions.php del tuo tema. Tuttavia, questo metodo può essere applicabile solo se hai una conoscenza di base della programmazione.

Ti consigliamo di creare un tema figlio e di eseguire il backup del tuo sito Web WordPress per farlo. Ciò garantisce che le tue modifiche vengano salvate anche se aggiorni il tuo tema WordPress. Se hai bisogno di aiuto, puoi persino utilizzare uno dei migliori plugin per temi figlio per WordPress per crearne uno.

Una volta passato al tema figlio, puoi accedere al file functions.php facendo clic su Aspetto > Editor temi. Quindi, fai clic su Funzioni del tema o sul file functions.php . Questo aprirà il file nell'editor del tema.

Quindi, puoi quindi utilizzare il seguente frammento di codice e incollarlo nell'editor.

 add_filter( 'woocommerce_related_products', 'QuadLayers_related_products_by_same_title', 9999, 3 ); 

funzione QuadLayers_related_products_by_same_title($related_posts, $product_id, $args) {
$prodotto = wc_get_prodotto($id_prodotto);
$titolo = $prodotto->get_name();
$post_correlati = get_posts( array(
'post_type' => 'prodotto',
'post_status' => 'pubblica',
'titolo' => $titolo,
'campi' => 'id',
'post_per_pagina' => -1,
'exclude' => array($id_prodotto),
));
restituisce $ post_correlati;
} 

Lo snippet di codice funziona semplicemente fornendoti prodotti correlati con lo stesso titolo. In questo modo, se hai prodotti identici con lo stesso nome, verranno aggiunti alla tua sezione dei prodotti correlati a WooCommerce. Aggiorna il tuo file functions.php facendo clic su Aggiorna file e dovresti aver finito.

Crediti all'autore originale del codice qui.

Come rimuovere i prodotti correlati a WooCommerce

Inoltre, puoi anche scegliere di rimuovere la sezione dei prodotti correlati a WooCommerce dal tuo sito Web utilizzando lo stesso metodo di cui sopra. Puoi scegliere di rimuovere completamente tutti i prodotti correlati o solo per prodotti specifici.

1. Rimuovere tutti i prodotti correlati

Per rimuovere tutta la sezione dei prodotti correlati da ogni pagina del prodotto, apri semplicemente il file functions.php del tuo tema figlio e incolla il seguente snippet di codice.

 remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20); 

Infine. aggiorna il file. Questo dovrebbe rimuovere completamente la sezione dei prodotti correlati da tutti i tuoi prodotti WooCommerce.

Crediti all'Autore del Codice qui.

2. Rimuovere i prodotti correlati solo per prodotti specifici

Puoi anche utilizzare frammenti di codice per rimuovere la sezione dei prodotti correlati solo per prodotti specifici sul tuo sito web, se necessario. Il codice seguente aggiungerà semplicemente un'opzione per nasconderlo su tutti i tuoi prodotti.

Per prima cosa, andiamo avanti e incolliamo questo nel file functions.php del tuo tema nello stesso modo di prima.

 add_action( 'woocommerce_product_options_general_product_data', 'QuadLayers_add_related_checkbox_products');

funzione QuadLayers_add_related_checkbox_products() { 
woocommerce_wp_checkbox( array( 
'id' => 'hide_related', 
'classe' => '', 
'label' => 'Nascondi prodotti correlati'
) 
); 
}

// ------------------------------------------
// 2. Salva la casella di controllo nel campo personalizzato

add_action( 'save_post_product', 'QuadLayers_save_related_checkbox_products' );

funzione QuadLayers_save_related_checkbox_products($id_prodotto) {
$pagenow globale, $typenow;
if ( 'post.php' !== $pagenow || 'product' !== $typenow ) return;
if ( definito( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if ( isset($_POST['hide_related'] ) ) {
update_post_meta($id_prodotto, 'hide_related', $_POST['hide_related']);
} else delete_post_meta($id_prodotto, 'hide_related');
}

// ------------------------------------------
// 3. Nascondi i prodotti correlati alla pagina del singolo prodotto

add_action( 'woocommerce_after_single_product_summary', 'QuadLayers_hide_related_checkbox_products', 1 );

funzione QuadLayers_hide_related_checkbox_products() {
prodotto $ globale;
if ( ! empty ( get_post_meta( $product->get_id(), 'hide_related', true ) ) ) {
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);
}
} 

Quindi, vai di nuovo su Prodotti > Tutti i prodotti dalla dashboard di WordPress e fai clic su Modifica per il prodotto in cui desideri nascondere i prodotti correlati. Quando scorri sotto Dati prodotto come negli approcci precedenti, fai clic sulla scheda Generale .

Dovresti vedere una nuova opzione Nascondi prodotti correlati . Abilita questa opzione per nascondere i prodotti correlati dalla pagina del prodotto specifico.

Crediti all'autore del codice qui.

Come personalizzare il numero e le colonne dei prodotti correlati

Inoltre, puoi anche personalizzare la tua sezione dei prodotti correlati configurando il numero di prodotti visualizzati, nonché le righe e le colonne del tuo sito web.

Per questo, utilizzeremo anche gli hook di WooCommerce e le funzioni personalizzate sul nostro file functions.php . Vai avanti e apri di nuovo il file usando il tuo editor di temi e incolla questo snippet di codice:

 add_filter( 'woocommerce_output_related_products_args', 'QuadLayers_change_number_related_products', 9999 );

funzione QuadLayers_change_number_related_products($args) {
$args['posts_per_page'] = 4; // # di prodotti correlati
$args['colonne'] = 4; // N. di colonne per riga
restituisce $args;
} 

Questo codice funziona semplicemente configurando la sezione dei prodotti correlati a WooCommerce in 4 colonne e 4 righe. Puoi sempre modificare questo valore utilizzando $args['posts_per_page'] = 4 e $args['columns'] = 4.

Inoltre, puoi configurare questa sezione anche utilizzando codici CSS aggiuntivi. Possono essere utilizzati per modificare il layout e l'allineamento delle colonne e delle righe in modo che la sezione si adatti meglio al tuo sito web. Puoi usare il seguente snippet CSS per questo.

 @media (larghezza minima: 768px) {
.site-main .prodotti.correlati ul.products li.product {
larghezza: 22%;
galleggiante: sinistra;
margine-destra: 4%;
}

Basta incollarlo sotto il tuo CSS aggiuntivo nel personalizzatore del tema . Puoi accedervi facendo clic su Aspetto > Personalizza dalla dashboard di WordPress. Questo aprirà il personalizzatore del tema.

Quindi, fai clic sulla scheda CSS aggiuntivo e incolla qui lo script CSS. Puoi regolare l'allineamento dei relativi prodotti in base alle esigenze del tuo sito web. Infine, fai clic su Pubblica quando hai finito.

Crediti all'autore del codice qui.

Conclusione

E questo conclude la nostra guida per aggiungere prodotti correlati a WooCommerce. È uno dei modi migliori per migliorare le vendite del tuo sito eCommerce. Ma con questa guida dovresti essere in grado di aggiungerli, personalizzarli o persino rimuoverli se lo desideri.

Per riassumere, puoi aggiungere i prodotti correlati in WooCommerce utilizzando 3 modi:

• Dalla dashboard di WooCommerce
• Utilizzo di un plug-in
• Programmaticamente

Inoltre, abbiamo anche incluso alcuni passaggi più utili per personalizzare questi prodotti correlati. Includono la rimozione dalle pagine dei prodotti e la modifica del numero di prodotti correlati e delle relative colonne. Ci auguriamo che ti siano utili anche quando aggiungi i prodotti correlati. Puoi trovare ancora più informazioni sul nostro tutorial dettagliato per personalizzare i prodotti relativi a WooCommerce.

Se vuoi saperne di più sulla personalizzazione di varie altre sezioni e pagine di WooCommerce, considera di dare un'occhiata ad alcuni dei nostri altri articoli come:

• Come aggiungere un'immagine al prodotto in WooCommerce
• Personalizza i messaggi di errore di WooCommerce Checkout
• Come personalizzare i modelli WooCommerce

Facci sapere se sei stato in grado di personalizzare e gestire le sezioni dei tuoi prodotti relativi a WooCommerce utilizzando il nostro articolo. In caso di problemi, faccelo sapere nella sezione commenti. Faremo del nostro meglio per aiutarti il ​​più possibile.