Cum să ascundeți și să eliminați produsele înrudite în WooCommerce
Publicat: 2021-07-17Căutați o modalitate simplă de a ascunde produse similare în magazinul dvs.? Avem ceva pentru tine. În acest articol, vă vom arăta diferite moduri de a elimina produse similare din WooCommerce .
Care sunt produsele înrudite?
După cum sugerează și numele, produsele conexe sunt produse care sunt într-un fel legate de un alt articol. În WooCommerce, produsele conexe sunt recomandări care au legătură cu produsul pe care cumpărătorul îl vizionează și tind să completeze articolul principal. Acestea apar de obicei în partea de jos a paginilor de produse și vă ajută afacerea să crească vânzările și veniturile. De exemplu, produsele legate de un telefon pot fi căști, huse pentru telefon, accesorii pentru cameră și așa mai departe.
De ce să eliminați produsele înrudite din WooCommerce?
Dacă produsele înrudite ne ajută să ne creștem vânzările, de ce am dori să le eliminăm? Există mai multe situații în care ați putea dori să ascundeți produsele aferente în WooCommerce. De exemplu, dacă vindeți doar câteva produse care nu au legătură, este posibil să nu doriți să le afișați. În plus, dacă tema dvs. nu funcționează bine cu secțiunea de produse aferentă, poate fi necesar să o eliminați din magazin.
În plus, uneori, codul CSS de la unele teme sau pluginuri vă poate distruge site-ul sau părți ale acestuia. Dacă există un conflict cu secțiunea de produse aferentă, o puteți elimina.
În plus, dacă pagina dvs. de produs este aglomerată sau are prea multe produse similare, puteți fie să afișați mai puține articole, fie să eliminați cu totul secțiunea.
Înainte de a vă arăta cum să le eliminați, să vedem cum să configurați produse similare în WooCommerce.
Cum să configurați produse similare în WooCommerce
Configurarea produselor conexe în WooCommerce este destul de simplă. În tabloul de bord WordPress , accesați Produse și deschideți orice produs. În editorul de produse WooCommerce, accesați secțiunea Date despre produs , selectați fila Produse conectate și veți vedea o opțiune pentru a configura Upsells și Cross-sells.
Chiar dacă upsells și cross-sells sunt un fel de produs asociat pe care WooCommerce îl oferă în mod implicit, opțiunile de personalizare sunt destul de limitate. Dacă doriți să afișați produse similare, puteți utiliza un plugin dedicat.
Pentru această demonstrație, vom folosi un instrument gratuit numit Produse personalizate pentru WooCommerce. După instalarea și activarea pluginului, veți vedea încă o opțiune în secțiunea de produse legate.
Puteți căuta produsele pe care doriți să le afișați ca produse conexe. De exemplu, vom enumera patru produse.
Apoi actualizați setările și dacă verificați pagina produsului din frontend, veți vedea produsele aferente selectate.
Ca alternativă, puteți elimina unele produse similare și puteți afișa mai puține articole. De exemplu, să presupunem că în loc de 4 elemente, doriți să afișați trei. Eliminați produsul pe care doriți să-l ascundeți, actualizați pagina și verificați interfața.
Aceasta este una dintre cele mai bune personalizări pe care le puteți aplica magazinului dvs. În loc să afișați produse asociate aleatoriu, puteți selecta articolele pe care doriți să le asociați fiecărui produs. Vă recomandăm să efectuați câteva teste și să verificați ratele de conversie pentru a găsi cele mai bune combinații.
NOTĂ : Merită remarcat faptul că unele șabloane includ o secțiune Produse înrudite care preia produse care au aceleași etichete sau categorii. Chiar dacă nu puteți specifica aceste articole, puteți utiliza aceleași etichete sau categorii pentru produsele pe care doriți să le afișați împreună.
Să aruncăm o privire asupra diferitelor metode de a ascunde produsele conexe .
Cum să ascundeți și să eliminați produsele înrudite în WooCommerce
Există mai multe metode de a elimina produsele legate de WooCommerce:
- Cu pluginuri
- Programatic (codare)
- Folosind un generator de pagini
- Cu CSS
- Din opțiunile temei
Să aruncăm o privire mai atentă la fiecare metodă.
1) Ascundeți produsele asociate cu pluginuri
Există mai multe plugin-uri pe care le puteți folosi pentru a ascunde produse similare. Pentru acest tutorial, vom folosi NS Remove Related Products. Mai întâi, trebuie să instalați și să activați pluginul. Accesați Pluginuri > Adăugați nou , căutați instrumentul și instalați-l pe site-ul dvs.
După activarea pluginului, veți vedea că ați eliminat cu succes toate produsele aferente din paginile dvs. unice de produse. Acesta este un plugin plug-and-play și nu necesită configurații suplimentare.
Dacă verificați oricare dintre paginile cu un singur produs, nu veți vedea niciun produs similar.
Dacă doriți să afișați din nou produsele aferente, dezactivați pluginul. Deoarece NS Remove Related Products este un instrument ușor, menținerea acestuia instalată nu va afecta viteza și performanța site-ului dvs. web.
2) Eliminați produsele asociate în mod programatic
Dacă aveți abilități de codare și vă simțiți confortabil să editați codul și să vă modificați fișierele, aceasta este o metodă foarte interesantă pentru dvs. În această secțiune, vă vom învăța cum să modificați fișierul functions.php al temei și să eliminați produsele legate de WooCommerce din magazinul dvs. online.
NOTĂ : Această metodă implică editarea unora dintre fișierele temei dvs., așa că înainte de a merge mai departe, asigurați-vă că aveți o copie de rezervă completă a site-ului dvs. WordPress/WooCommerce. În acest fel, vă puteți restaura site-ul în cazul în care ceva nu merge bine.
Pentru a elimina produsele asociate, vom edita tema functions.php . Pentru a face acest lucru, există două metode diferite:
- Printr-o temă pentru copii
- Prin intermediul unui plugin specific site-ului
Am creat un ghid pas cu pas pentru a vă învăța cum să creați teme pentru copii. După ce ați generat o temă copil pentru site-ul dvs., puteți adăuga fragmentul de cod personalizat în fișierul functions.php al temei secundare. Pe de altă parte, dacă te bazezi pe un plugin dedicat, îi vei adăuga direct codul personalizat.
Să aruncăm o privire rapidă la ambele opțiuni.
2.1) Tema copilului
Dacă ați urmărit blogul nostru, probabil știți că nu vă recomandăm să editați fișierele temei părinte, deoarece atunci când tema primește o actualizare, toate modificările dvs. se vor pierde. Cu alte cuvinte, fișierele dvs. personalizate vor fi înlocuite cu fișierele noi din noua versiune.
De aceea, vă recomandăm să utilizați o temă copil dacă trebuie să adăugați cod personalizat temei dvs. Crearea unei teme pentru copil este destul de simplă. Pentru această demonstrație, vom folosi un plugin numit Child Themify.
Mai întâi, instalează și activează Child Themify în magazinul tău.
Sub secțiunea Aspect , veți vedea o nouă opțiune numită Creare temă copil .
De acolo, puteți genera o temă copil pentru tema părinte.
După ce ați creat o temă copil, activați-o și accesați editorul de teme.
Aici, vom adăuga un pic de cod în fișierul functions.php al temei. În mod implicit, WordPress afișează fișierul style.css în editor, dar puteți selecta fișierul functions.php din coloana din dreapta.
După selectarea fișierului, copiați codul de mai jos.
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
Apoi lipiți-l în editor și actualizați fișierul.
Asta e! Acum verificați pagina produsului din partea din față și veți vedea că secțiunea de produse aferente nu mai este vizibilă.
2.2) Fragmente de cod
O altă alternativă este să adăugați un fragment de cod personalizat folosind un plugin. Pentru acest tutorial, vom folosi Code Snippets, unul dintre pluginurile gratuite specifice site-ului disponibile pe piață.
Mai întâi, instalați și activați pluginul pe site-ul dvs.
Apoi, veți vedea noi setări în partea stângă.
În mod implicit, pluginul va afișa câteva fragmente de cod personalizate, dar acestea nu sunt active, așa că nu vă afectează site-ul.
Pentru a elimina produse similare din WooCommerce, vom adăuga un nou fragment pe site.
Dați un nume fragmentului și apoi copiați acest cod.
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
Lipiți-l în secțiunea Cod , selectați opțiunea Run snippet everywhere și activează-l.
Odată ce fragmentul dvs. este activ, verificați paginile cu un singur produs și veți vedea că produsele aferente nu sunt acolo.
Acesta este modul în care puteți elimina sau ascunde produsele legate de WooCommerce cu puțină codare. Acum să vedem cum să o facem folosind un generator de pagini.
3) Ascundeți produsele conexe folosind un generator de pagini
O altă opțiune interesantă pentru a ascunde produsele asociate din paginile individuale de produse WooCommerce este utilizarea unui plugin dedicat pentru crearea de pagini.
Pentru acest tutorial, vom folosi Divi builder, unul dintre cei mai populari și mai ușor de utilizat generatori de pagini de acolo. În primul rând, trebuie să instalați și să activați pluginul pe site-ul dvs. Deoarece este un produs premium, va trebui să-l achiziționați de pe site-ul Elegant Themes.
După ce descărcați pluginul din contul dvs. Elegant Themes, instalați-l și activați-l.
Generatorul Divi vine cu o experiență de editare vizuală care vă va ajuta să vă editați paginile direct din front end.
Acum să vedem cum să-l folosim pentru a elimina produsele legate de WooCommerce. Deschideți orice pagină de produs și apoi faceți clic pe butonul Activare Visual Builder din bara de sus.
WordPress va încărca constructorul Divi și veți putea edita șabloanele de pagină de acolo.
Acum faceți clic pe elementul Produse înrudite și veți vedea mai multe opțiuni. Pentru a elimina această secțiune, pur și simplu selectați butonul de ștergere.
Veți vedea instantaneu că acea secțiune dispare din pagină.
În plus, puteți edita și alte elemente ale paginii dvs. de produs, dar, deocamdată, să lăsăm totul așa cum este și să salvăm modificările.
Unul dintre marile avantaje ale constructorului Divi este că puteți vedea schimbările în timp real. Pentru a vă asigura că totul arată bine, puteți verifica pagina produsului din front end și puteți vedea rezultatele.
Este demn de remarcat faptul că constructorul Divi funcționează cu majoritatea temelor, nu doar Divi sau Extra by Elegant Themes.
Pentru mai multe ghiduri despre cum să vă personalizați site-ul folosind Divi, aruncați o privire la următoarele ghiduri:
- Cum să personalizați pagina produsului WooCommerce cu Divi
- Adăugați butonul Adaugă în coș în paginile magazinului Divi
- Formularul de contact Divi nu funcționează? Cum se remediază
4) Eliminați produsele înrudite cu CSS
Dacă nu doriți să editați fișierele tematice sau să utilizați pluginuri, există un simplu fragment CSS care vă va ajuta să ascundeți produsele asociate din paginile dvs. unice de produse.
Mai întâi, în tabloul de bord WordPress , accesați Aspect > Personalizare .
Deschideți secțiunea CSS suplimentară .
Și adăugați următorul cod CSS:
.produse asemanatoare {
afișaj: niciunul;
}
Personalizatorul WordPress vine cu un expert de previzualizare live care vă permite să vedeți toate actualizările în timp real, așa cum se arată mai jos.
După cum puteți vedea, este foarte simplu să utilizați CSS pentru a ascunde produsele aferente. Pur și simplu actualizați configurația după lipirea codului și sunteți gata.
5) Eliminați produsele din opțiunile temei
Unele teme premium vin cu un panou tematic dedicat, care include câteva opțiuni pentru a vă personaliza magazinul WooCommerce. În cele mai multe cazuri, opțiunile de eliminare a produselor asociate se află în opțiunile unei singure pagini de produs.
În plus, unele teme WordPress vin cu șabloane dedicate care includ o secțiune de produse conexe pe care o puteți activa/dezactiva. Vă recomandăm să aruncați o privire asupra temei dvs. sau să contactați echipa de asistență pentru a afla.
Bonus: Cum să dezactivați individual produsele asociate
Aceasta este o metodă avansată de eliminare a produselor legate de WooCommerce din paginile dvs. de produse. Vom adăuga un fragment de cod pentru a adăuga o casetă de selectare în tabloul de bord WooCommerce pe care o puteți bifa pentru a activa/dezactiva produsele asociate pentru fiecare produs.
Trebuie să adăugați următorul cod în fișierul functions.php al temei copilului sau folosind un plugin specific site-ului. Pentru această demonstrație, vom folosi pluginul Code Snippets, așa că pur și simplu mergem la setările pluginurilor și creăm un nou fragment.
Îi dăm un nume și lipim mai jos.
Explicația codului
Această bucată de cod va adăuga o casetă de selectare pe pagina produsului pe care o puteți bifa pentru a elimina secțiunea de produse aferentă. Am numit caseta de selectare „Eliminați produsele asociate”, dar o puteți personaliza schimbând linia etichetei.
// 1. Adăugați o casetă de selectare pe pagina produsului pentru a elimina produsele asociate add_action( 'woocommerce_product_options_general_product_data', 'quadlayers_add_related_products_checkbox'); funcția quadlayers_add_related_products_checkbox()
{woocommerce_wp_checkbox( array(
'id' => 'hide_related',
'class' => '',
'label' => 'Elimină produsele asociate'
)
);
}
Următoarea parte a codului va salva caseta de selectare într-un câmp personalizat.
// 2. Salvați câmpul casetei de selectare
add_action( 'save_post_product', 'quadlayers_save_related_products_checkbox');
funcția quadlayers_save_related_products_checkbox( $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' );
}
În cele din urmă, această parte a codului verifică dacă caseta de selectare pe care tocmai am creat-o este bifată și, dacă este, elimină secțiunea de produse aferente.
// 3. Ascundeți produsele conexe într-o singură pagină de produs
add_action( 'woocommerce_after_single_product_summary', 'quadlayers_hide_related_products_checkbox', 1 );
funcția quadlayers_hide_related_products_checkbox() {
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 );
}
}
Lipiți tot codul împreună și salvați modificările. Acum este timpul să vedem dacă a funcționat, așa că accesați pagina Produse și alegeți oricare dintre produsele publicate.
În interiorul editorului, veți vedea o nouă opțiune numită Ascunde produse înrudite.
Când activați această casetă de selectare, secțiunea de produse aferente nu va fi afișată pe pagina respectivă a produsului. Deci, acum, dacă verificați partea frontală, veți vedea ceva de genul acesta.
Aceasta este o opțiune excelentă pentru a avea flexibilitatea de a afișa numai secțiunea de produse aferente pe anumite pagini de produse. Pentru mai multe informații despre acest lucru, puteți arunca o privire la aceasta.
Modificarea numărului de produse conexe pe care le puteți afișa pe o pagină
Aceasta este o altă opțiune interesantă pentru a schimba numărul de produse conexe pe care le afișați pe pagină. Acest lucru poate fi util pentru a avea o secțiune mai curată Produse înrudite sau când doriți să afișați doar câteva articole conexe.
Pentru a face acest lucru, puteți fie să adăugați următorul cod la funcțiile.php al temei copil, fie să utilizați pluginul Code Snippets.
/**
* Modificați numărul de produse aferente
*/
funcția woo_related_products_limit() {
global $produs;
$args['posts_per_page'] = 6;
returnează $args;
}
add_filter( 'woocommerce_output_related_products_args', 'quadlayers_related_products_args', 20 );
funcția quadlayers_related_products_args( $args ) {
$args['posts_per_page'] = 3; // 3 produse similare
$args['coloane'] = 1; // dispuse pe 1 coloane
returnează $args;
}
Dacă aruncați o privire mai atentă la cod, veți vedea că vom afișa 3 produse similare într-o coloană. Pur și simplu ajustați codul în funcție de cerințele dvs. și salvați modificările. Veți vedea toate modificările reflectate pe front end.
Cum să utilizați produse similare pentru a crește ratele de conversie
Unul dintre principalele beneficii ale produselor conexe este acela de a vă ajuta să creșteți ratele de conversie. Ideea este de a afișa produse care au legătură cu articolul pe care cumpărătorul îl vizionează, astfel încât să cumpere mai multe produse. Aceste produse conexe completează sau îmbunătățesc de obicei performanța articolului principal. De exemplu, dacă vizionați un laptop, produsele înrudite pot fi o carcasă pentru laptop, un hard disk extern, cablu HDMI și așa mai departe.
Aceasta este o strategie populară în comerțul electronic. De exemplu, magazinele online populare precum Amazon sau Flipkart afișează mai multe produse similare în funcție de comenzile anterioare ale utilizatorului, istoricul căutărilor, mărcile și așa mai departe.
Concluzie
Una peste alta, produsele conexe vă pot ajuta să vă creșteți vânzările. Cu toate acestea, există unele situații în care poate fi necesar să le ascundeți.
În acest ghid, am văzut diferite metode de eliminare a produselor asociate din WooCommerce:
- Folosind pluginuri
- Programatic (codare)
- Folosind un generator de pagini dedicat
- Cu fragmente CSS
- Din opțiunile temei
Cel mai simplu mod de a ascunde secțiunea de produse aferente este utilizarea unui plugin. Pur și simplu trebuie să activați pluginul și acesta va ascunde automat produsele aferente. Pe de altă parte, dacă vă simțiți confortabil cu codarea, puteți edita fișierul functions.php sau puteți adăuga un mic script CSS.
Ca alternativă, dacă doriți să eliminați produse similare din pagini individuale, puteți face acest lucru cu ajutorul unui generator de pagini. În sfârșit, dacă aveți o temă premium, verificați dacă vă oferă opțiunea de a ascunde produsele aferente din panoul tematic. Când aveți instalat un generator de pagini, îl puteți folosi pentru a ascunde produsele aferente din magazin.
Pentru mai multe sfaturi pentru a profita la maximum de magazinul dvs., aruncați o privire la următoarele ghiduri:
- Cum să adăugați produse WooCommerce
- Personalizați pagina produsului WooCommerce
- Cum se editează pagina magazinului WooCommerce
Ați eliminat produsele legate de WooCommerce din magazinul dvs.? Ce metoda ai folosit? Anunțați-ne în secțiunea de comentarii de mai jos!