Cum să adăugați produse legate de WooCommerce: 3 metode

Publicat: 2022-01-15

Căutați modalități de a vă îmbunătăți conversiile produselor? Adăugarea unei secțiuni de produse personalizate pentru magazinul dvs. online poate fi o modalitate excelentă de a vă determina clienții să cumpere mai multe articole. Pentru a vă ajuta să faceți acest lucru, v-am adus ghidul nostru despre cum să adăugați produse legate de WooCommerce.

Afișarea produselor similare poate fi o modalitate excelentă de a vă îmbunătăți conversiile. Dacă prezentați clienților dvs. gama corectă de produse, cu siguranță vă va îmbunătăți vânzările. Dar înainte de a trece la procesul de a face acest lucru, să vedem de ce aveți nevoie de secțiunea de produse aferente pe scurt.

De ce să folosiți secțiuni de produse înrudite în WooCommerce?

Vânzarea încrucișată este o parte importantă a îmbunătățirii ratelor de conversie. Oferind clienților opțiuni de a cumpăra produse similare, îi puteți încuraja să ia în considerare cumpărarea mai multor produse pentru valoarea adăugată. În mod similar, puteți folosi și vânzările încrucișate pentru a promova produsele pe care le vedeți cumpărate împreună. Dacă vă puteți urmări bine achizițiile, puteți alege oricând să adăugați anumite produse la lista de vânzări încrucișate pentru mai multe profituri.

Această metodă în sine este foarte proeminentă în afacerile online la scară largă. De exemplu, pe Amazon, îi puteți vedea oferind vânzări încrucișate folosind secțiuni etichetate „ Cumparate frecvent împreună” , „ clienții au cumpărat și ei” sau „ produse de marcă similare”.

Deci, dacă doriți să vă creșteți vânzările , vă recomandăm să adăugați și să personalizați secțiunea Produse legate de WooCommerce. Acum că aveți o idee despre importanța acesteia, să vedem cum le putem adăuga pe site-ul dvs. de comerț electronic.

Cum să adăugați produse legate de WooCommerce

În mod implicit, WooCommerce vă permite să personalizați trei tipuri diferite de produse conexe. Aceste opțiuni sunt:

  • Up-Sells : produse care sunt afișate la vizualizarea paginii produsului.
  • Vânzări încrucișate : produse care sunt afișate la vizualizarea paginii coșului.
  • Produse înrudite: produse care sunt afișate automat pe pagina produsului pe baza etichetelor și categoriilor de produse.

Deși puteți adăuga manual ce produse să afișați în up-sells și cross-sells pentru fiecare WooCommerce, puteți configura numai secțiunile de produse conexe setând corect etichetele și categoriile.

În total, există 3 moduri majore de a adăuga produsele aferente în WooCommerce. Sunt:

  • Din tabloul de bord WooCommerce
  • Folosind un plugin
  • Din punct de vedere programatic

Notă: Asigurați-vă că ați instalat una dintre temele compatibile WooCommerce și că ați configurat WooCommerce corect pe site-ul dvs. web pentru a evita orice probleme inutile în acest proces.

Configurați produsele asociate WooCommerce în tabloul de bord WooCommerce

Pentru a configura vânzările în sus și vânzările încrucișate pentru un anumit produs, accesați Produse > Toate produsele din tabloul de bord WordPress. Apoi, faceți clic pe butonul Editați al oricăror produse specifice pentru care doriți să adăugați vânzări în plus și vânzări încrucișate.

adăugați produse legate de woocommerce - produs deschis

Apoi, derulați în jos și sub Date despre produs, faceți clic pe Produse conectate. Acum, mergeți mai departe și enumerați toate produsele pe care doriți să le afișeze ca produse înrudite pentru produsul respectiv. Acestea pot include atât vânzările în plus, cât și vânzările încrucișate.

În cele din urmă, actualizați produsul.

adăugați produse legate de woocommerce - produse legate

Când previzualizați un anumit produs pe site-ul dvs. web, veți putea vedea produsele asociate în partea din față a site-ului dvs.

În mod similar, veți putea vedea și produsele legate de vânzări încrucișate atunci când previzualizați pagina coșului.

adăugați produse legate de wocommerce - demo de vânzări încrucișate

Cu toate acestea, produsele legate de WooCommerce sunt destul de diferite de secțiunea „ Este posibil să-ți placă” pe care ți-o oferă vânzările încrucișate și vânzările în plus. În mod implicit, WooCommerce selectează aleatoriu produsele pentru a fi afișate în secțiunile „Este posibil să vă placă” folosind etichetele și categoriile. Această opțiune nu este configurabilă folosind opțiunile implicite ale WooCommerce.

Puteți personaliza aceste produse asociate fie folosind plugin-uri pentru produse legate de WooCommerce, fie prin programare folosind WooCommerce Hooks.

Vom discuta în continuare cum să le facem pe ambele în acest ghid. Deci, dacă doriți să aflați cum să vă personalizați mai mult produsele legate de WooCommerce, vă recomandăm să continuați să citiți. Să începem cu metoda pluginului , deoarece este mai prietenoasă pentru începători.

Cum să adăugați produse legate de WooCommerce folosind un plugin

Utilizarea unui plugin este una dintre cele mai ușoare modalități de a adăuga și de a personaliza produsele aferente. Aceste plugin-uri sunt concepute special pentru a vă ajuta să alegeți manual ce produse să adăugați la secțiunile dvs. de produse legate de WooCommerce.

Există o serie de plugin-uri disponibile în WordPress cu diverse caracteristici. Unele dintre ele vă permit să adăugați secțiuni asociate personalizabile pe care le puteți adăuga în orice parte a site-ului dvs. În timp ce alte lucrează, oferindu-vă glisoare și bannere complet personalizabile.

Desigur, opțiunea de a-ți alege pluginul depinde de tine. Dar pentru demonstrația de astăzi, vom folosi pluginul Produse personalizate pentru WooCommerce de Scott Nelle. Acest plugin funcționează prin metoda simplă de a vă permite să specificați produse de adăugat pentru produsele aferente oricăror produse pe care le doriți.

Dar pentru a începe să utilizați pluginul, trebuie să îl instalați și să îl activați mai întâi.

1. Instalați și activați pluginul

Deschideți tabloul de bord WP admin și faceți clic pe Plugins > Add New pentru a începe. Apoi, utilizați bara de căutare din dreapta sus pentru a căuta Produse personalizate pentru WooCommerce . Apoi, faceți clic pe Instalați acum în fila pluginului și apoi Activați -l după finalizarea instalării. Acum, ar trebui să terminați de activat și instalat pluginul.

adăugați produse legate de wocommerce - instalați pluginul

Dacă doriți să utilizați un plugin care nu este inclus în depozitul WordPress, va trebui să le instalați manual. Avem un ghid detaliat pentru a instala manual un WordPress dacă aveți nevoie de mai multe informații despre el.

2. Adăugați produse înrudite prin Pagina de produse

Pluginul în sine funcționează permițându-vă să adăugați o secțiune de produse asociate fiecărui produs specific. Puteți face acest lucru deschizând oricare dintre produsele dvs. WooCommerce și specificându-l sub Date despre produs. Dacă nu adăugați produse în secțiunea de produse asociate, pluginul revine la comportamentul WooCommerce implicit de alegere aleatorie a produselor asociate WooCommerce folosind etichete.

Deci, deschideți Produse > Toate produsele din tabloul de bord WP Admin din nou și faceți clic pe Editați pentru produsul pe care doriți să adăugați produsele aferente. Aceasta este aceeași cu abordarea anterioară din tabloul de bord WooCommerce.

Din nou, derulați în jos sub Date despre produs și faceți clic pe Produse conectate . Acum, ar trebui să vedeți un câmp nou etichetat Produse înrudite . Acum tot ce trebuie să faceți este să introduceți manual numele produsului pe care doriți să îl adăugați ca produs asociat pentru produsul respectiv.

adauga produse legate de wocommerce - produse conexe add

Actualizați produsul și veți putea vedea modificările pe pagina produsului dvs.:

adăugați produse legate de wocommerce - produse conexe editate

Adăugați produse legate de WooCommerce în mod programatic

Alternativ, dacă nu doriți să utilizați un plugin WooCommerce pentru a gestiona și personaliza produsele legate de WooCommerce, puteți alege și să le adăugați folosind un fragment de cod. Pentru aceasta, trebuie să adăugați câteva rânduri de coduri în fișierul functions.php al temei. Cu toate acestea, această metodă vă poate fi aplicabilă numai dacă aveți o înțelegere de bază a programării.

Vă recomandăm să creați o temă copil și să faceți o copie de rezervă a site-ului dvs. WordPress pentru a face acest lucru. Acest lucru vă asigură că modificările sunt salvate chiar dacă actualizați tema WordPress. Dacă aveți nevoie de ajutor, puteți chiar să utilizați unul dintre cele mai bune pluginuri pentru teme pentru copii pentru WordPress pentru a crea unul.

După ce ați trecut la tema copilului, puteți accesa fișierul functions.php făcând clic pe Aspect > Editor de teme. Apoi, faceți clic pe Theme Functions sau pe fișierul functions.php . Aceasta va deschide fișierul în editorul de teme.

adăugați produse legate de woocommerce - funcții php

Apoi, puteți utiliza următorul fragment de cod și îl puteți lipi în editor.

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

funcția QuadLayers_related_products_by_same_title( $related_posts, $product_id, $args ) {
$produs = wc_get_product( $product_id );
$titlu = $produs->get_name();
$related_posts = get_posts( array(
'post_type' => 'produs',
'post_status' => 'publicare',
'title' => $titlu,
'fields' => 'ID-uri',
'posts_per_page' => -1,
'exclude' => matrice ($product_id),
));
returnează $related_posts;
} 

Fragmentul de cod funcționează pur și simplu oferindu-vă produse similare cu același titlu. În acest fel, dacă aveți produse identice cu aceleași nume, acestea vor fi adăugate la secțiunea dvs. de produse legate de WooCommerce. Actualizați fișierul functions.php făcând clic pe Actualizare fișier și ar trebui să terminați.

Credite autorului original al codului aici.

Cum să eliminați produsele legate de WooCommerce

În plus, puteți alege să eliminați secțiunea de produse legate de WooCommerce de pe site-ul dvs., folosind aceeași metodă ca mai sus. Puteți alege fie să eliminați în întregime toate produsele aferente, fie doar pentru anumite produse.

1. Eliminați toate produsele înrudite

Pentru a elimina toate secțiunile legate de produse din fiecare pagină de produs, pur și simplu deschideți fișierul functions.php al temei copilului și lipiți următorul fragment de cod.

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

In cele din urma. actualizați fișierul. Acest lucru ar trebui să elimine în întregime secțiunea de produse aferente din toate produsele dvs. WooCommerce.

Credite autorului codului aici.

2. Eliminați Produsele înrudite doar pentru Produse specifice

De asemenea, puteți utiliza fragmente de cod pentru a elimina secțiunea de produse asociată doar pentru anumite produse de pe site-ul dvs., dacă este necesar. Următorul cod va adăuga pur și simplu o opțiune pentru a-l ascunde pe toate produsele dvs.

Mai întâi, să mergem mai departe și să lipim acest lucru pe fișierul functions.php al temei dvs. în același mod ca înainte.

 add_action( 'woocommerce_product_options_general_product_data', 'QuadLayers_add_related_checkbox_products');

funcția QuadLayers_add_related_checkbox_products() { 
woocommerce_wp_checkbox( array( 
'id' => 'hide_related', 
'class' => '', 
'label' => 'Ascunde produsele similare'
) 
); 
}

// ------------------------------------------
// 2. Salvați caseta de selectare în câmpul personalizat

add_action( 'save_post_product', 'QuadLayers_save_related_checkbox_products');

funcția QuadLayers_save_related_checkbox_products( $product_id ) {
global $pagenow, $typenow;
if ( 'post.php' !== $pagenow || 'produs' !== $typenow ) return;
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if ( isset( $_POST['hide_related'] ) ) {
update_post_meta( $product_id, 'hide_related', $_POST['hide_related'] );
} else delete_post_meta( $product_id, 'hide_related' );
}

// ------------------------------------------
// 3. Ascundeți produsele conexe @ o singură pagină de produs

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

funcția QuadLayers_hide_related_checkbox_products() {
global $produs;
dacă (! gol (get_post_meta($produs->get_id(), 'hide_related', true ) ) ) {
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
}
} 

adăugați produse legate de wocommerce - eliminați condiționat produsele asociate

Apoi, accesați Produse > Toate produsele din tabloul de bord WordPress și faceți clic pe Editați pentru produsul în care doriți să ascundeți produsele aferente. Când derulați sub Date despre produs, ca în abordările anterioare, faceți clic pe fila General .

Ar trebui să vedeți o nouă opțiune Ascundere produse înrudite . Activați această opțiune pentru a ascunde produsele asociate din pagina de produs anume.

Credite autorului codului aici.

Cum să personalizați numărul și coloanele de produse înrudite

În plus, puteți personaliza și secțiunea de produse aferente configurând numărul de produse afișate, precum și rândurile și coloanele de pe site-ul dvs.

Pentru aceasta, vom folosi, de asemenea, cârlige WooCommerce și funcții personalizate în fișierul nostru functions.php . Continuați și deschideți fișierul folosind editorul de teme din nou și inserați acest fragment de cod:

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

funcția QuadLayers_change_number_related_products( $args ) {
$args['posts_per_page'] = 4; // # de produse conexe
$args['coloane'] = 4; // # de coloane pe rând
returnează $args;
} 

Acest cod funcționează pur și simplu prin configurarea secțiunii de produse legate de WooCommerce în 4 coloane și 4 rânduri. Puteți schimba oricând această valoare folosind $args['posts_per_page'] = 4 și $args['columns'] = 4.

Mai mult, puteți configura această secțiune folosind și coduri CSS suplimentare. Acestea pot fi folosite pentru a modifica aspectul și alinierea coloanelor și rândurilor, astfel încât secțiunea să se potrivească mai bine site-ului dvs. Puteți utiliza următorul fragment CSS pentru aceasta.

 @media (lățime minimă: 768 px) {
.site-main .related.products ul.products li.product {
latime: 22%;
plutește la stânga;
marja-dreapta: 4%;
}

Pur și simplu inserați-l sub CSS suplimentar în personalizarea temei . Îl puteți accesa făcând clic pe Aspect > Personalizare din tabloul de bord WordPress. Aceasta va deschide personalizarea temei.

Apoi, faceți clic pe fila CSS suplimentară și inserați scriptul CSS aici. Puteți ajusta alinierea produselor aferente în funcție de nevoile site-ului dvs. În cele din urmă, faceți clic pe Publicare când ați terminat.

adăugați produse legate de wocommerce - CSS suplimentar

Credite autorului codului aici.

Concluzie

Și asta se încheie ghidul nostru pentru a adăuga produse legate de WooCommerce. Este una dintre cele mai bune modalități de a îmbunătăți vânzările site-ului dvs. de comerț electronic. Dar cu acest ghid, ar trebui să le puteți adăuga, personaliza sau chiar elimina dacă doriți.

Pentru a rezuma, puteți adăuga produsele asociate în WooCommerce folosind 3 moduri:

  • Din tabloul de bord WooCommerce
  • Folosind un plugin
  • Din punct de vedere programatic

În plus, am inclus chiar câțiva pași mai folositori pentru a personaliza aceste produse asociate. Acestea includ eliminarea acestora din paginile de produse și modificarea numărului de produse asociate și a coloanelor acestora. Sperăm să vă fie de folos și atunci când adăugați produsele aferente. Puteți găsi și mai multe informații în tutorialul nostru detaliat pentru a personaliza produsele legate de WooCommerce.

Dacă doriți să aflați mai multe despre personalizarea diferitelor alte secțiuni și pagini WooCommerce, vă rugăm să luați în considerare câteva dintre celelalte articole ale noastre, cum ar fi:

  • Cum să adăugați o imagine la produs în WooCommerce
  • Personalizați mesajele de eroare WooCommerce Checkout
  • Cum să personalizați șabloanele WooCommerce

Spuneți-ne dacă ați reușit să personalizați și să gestionați secțiunile de produse legate de WooCommerce folosind articolul nostru. Dacă au apărut probleme, vă rugăm să ne anunțați în secțiunea de comentarii. Vom face tot posibilul pentru a vă ajuta cât de mult putem.