Cum să adăugați file personalizate de produse în WooCommerce
Publicat: 2022-03-17Doriți să adăugați file de produse personalizate pe pagina dvs. de produse WooCommerce ? Ai venit la locul potrivit. În acest articol, vom arăta cum să afișați filele de produse personalizate pe pagina de produse a magazinului dvs. online .
Dar înainte de a ne aprofunda în asta, să înțelegem mai bine ce sunt filele de produs și de ce ați putea dori să adăugați o filă de produs personalizată la pagina dvs. de produs WooCommerce. Pe scurt, să începem cu ideea de bază a filelor de produse.
Ce sunt filele de produse în WooCommerce?
Filele de produse ajută la organizarea paginii de produs prin gruparea informațiilor similare într-una sau mai multe file . Fiecare filă individuală conține un anumit set de date și este separată de restul detaliilor produsului. În acest fel, informațiile devin ușor accesibile, mai puțin aglomerate, plăcute vizual și ușor de urmărit.
Majoritatea produselor din zilele noastre au o mulțime de informații esențiale care trebuie comunicate cumpărătorului. Dar, acomodarea tuturor acestor informații într-un singur loc poate fi dificilă. De aceea, veți vedea adesea mai multe file de produse pe paginile produselor, cum ar fi o scurtă descriere, descriere lungă, specificații tehnice, recenzii și multe altele.
Sper că acest lucru vă oferă o idee despre filele de produse. Acum, să aruncăm o privire la câteva dintre motivele pentru care poate fi necesar să adăugați file personalizate de produse în WooCommerce.
De ce să adăugați file personalizate de produse în WooCommerce?
Mai sus, am văzut că filele de produse sunt un mijloc excelent de organizare a informațiilor despre produse. Cu toate acestea, filele implicite nu au suficient spațiu pentru a completa toate informațiile suplimentare. Ce se întâmplă dacă doriți să includeți o descriere lungă, specificații tehnice, fișe tehnice, tutoriale video etc.? Vă va fi greu să organizați toate aceste informații cu filele implicite.
Cu toate acestea, adăugând o filă de produs personalizată pentru fiecare set de informații, puteți organiza detaliile produsului într-un mod mult mai bun. De asemenea, vă oferă libertatea de a adăuga toate informațiile necesare fără să vă faceți griji cu privire la completarea paginii și la copleșirea utilizatorului.
În ceea ce privește clienții, filele de produse le ajută cumpărătorilor să identifice informațiile de care sunt interesați și să ignore restul. De exemplu, un utilizator obișnuit ar putea să nu fie interesat de specificațiile tehnice detaliate și va fi suficient din descrierea produsului și descrierea lungă. Cu toate acestea, o persoană expertă în tehnologie va fi mai interesată de specificațiile tehnice și fișele de date, care îi vor facilita găsirea informațiilor necesare.
În plus, în calitate de proprietar de magazin, puteți folosi filele personalizate pentru a evidenția politicile cheie ale companiei de care un utilizator trebuie să fie conștient. De exemplu, puteți adăuga o filă Întrebări frecvente pentru a răspunde la cele mai frecvente întrebări. În mod similar, puteți adăuga o politică de returnare într-o filă separată etc.
Prin urmare, este întotdeauna recomandat să vă organizați informațiile despre produse în file de produse ușor de urmărit. Pentru ca utilizatorul dvs. să obțină ceea ce își dorește în cel mai ușor mod posibil, fără a trece prin nicio bătaie de cap.
Până acum, sper că ați înțeles importanța filelor personalizate de produse WooCommerce. Acum să trecem la pasul următor și să adăugăm file personalizate de produse în WooCommerce.
Cum să adăugați file personalizate de produse WooCommerce
Putem adăuga file personalizate de produse în WooCommerce în 2 moduri majore :
- Folosind un plugin
- Din punct de vedere programatic
Să aruncăm o privire la ambele metode una câte una. Vom începe cu metoda pluginului. Deci, hai să ne scufundăm.
1. Adăugați file personalizate de produse utilizând un plugin
Există mai multe plugin-uri WordPress pentru a adăuga file personalizate de produse WooCommerce, așa că nu ezitați să utilizați oricare dintre acestea. Cu toate acestea, pentru demonstrație, vom folosi pluginul Custom Product Files pentru WooCommerce dezvoltat de YIKES , Inc.
Pluginul vine atât în versiune gratuită, cât și în versiune premium. Versiunea gratuită acoperă cerințele de bază. Cu toate acestea, dacă sunteți interesat de funcții mai avansate, puteți opta pentru planurile premium, care încep de la 29,99 USD pe an cu 1 an de actualizări și suport.
Acum să vedem cum putem folosi pluginul pentru a adăuga file personalizate de produse în WooCommerce. Să mergem!
1.1. Instalați și activați pluginul
În primul rând, trebuie să instalați și să activați pluginul pe site-ul dvs. Pentru a instala pluginul, accesați tabloul de bord WP Admin și navigați la Plugins > Adăugați nou. Căutați pluginul Custom Product Files pentru WooCommerce de la YIKES , Inc. și faceți clic pe butonul Instalați acum pentru a instala pluginul. Odată ce instalarea este finalizată, apăsați pe Activare pentru a activa pluginul pe site-ul dvs.
Dacă doriți să utilizați versiunea premium sau un plugin premium, va trebui să instalați pluginul manual.
Grozav! Acum ați instalat cu succes pluginul pe site-ul dvs. Este timpul să adăugați file personalizate de produse folosind pluginul Custom Product Files pentru WooCommerce.
1.2. Adăugați file personalizate de produse la produsele WooCommerce
După ce pluginul este activ, puteți adăuga file personalizate de produse la un produs WooCommerce din pagina Editare produs. Din tabloul de bord WP Admin, navigați la Produse > Toate produsele. Acum, plasați cursorul peste produsul căruia doriți să adăugați file personalizate și faceți clic pe Editați.
Aceasta va deschide pagina de editare a produsului. Derulați în jos la secțiunea Date despre produs și faceți clic pe File personalizate. Veți avea două opțiuni, Adăugați o filă și Adăugați o filă salvată (mai multe despre asta mai târziu). Faceți clic pe butonul Adăugați o filă și se va deschide formularul Nouă filă personalizată.
În formularul Filă nouă, specificați titlul filei și adăugați conținut relevant. Simțiți-vă liber să adăugați text, imagini, linkuri, multimedia etc. Mai mult, puteți adăuga mai multe file personalizate făcând clic pe butonul Adăugați o filă din partea de jos. Dacă aveți mai mult de o filă personalizată, le puteți modifica ordinea prin săgețile Mutare Ordine file. După ce ați terminat, apăsați pe Salvare file pentru a salva filele personalizate nou create.
Voila! La fel de ușor. Acum ați creat propria filă de produs personalizat. Acum, navigați la partea frontală a paginii dvs. de produs pentru a vedea fila personalizată în direct pe site-ul dvs.
Cu toate acestea, adăugarea unei file personalizate la mai multe produse, unul câte unul, poate fi obositoare și nu este o abordare eficientă. De aceea, pluginul vine cu o funcție File salvate.
Să aruncăm o privire la Filele salvate și să vedem cum le putem adăuga la produsele WooCommerce.
1.3. Creați file salvate
Filele salvate acționează ca șabloane pe care le puteți salva pentru utilizare ulterioară. După ce ați creat o filă Salvată, o puteți adăuga la un produs în doar câțiva pași simpli. Astfel, Filele salvate fac adăugarea de file personalizate la mai multe produse rapid și ușor.
Pentru a crea o filă salvată, accesați Tabloul de bord WP Admin și faceți clic pe File de produse personalizate . Aici, veți vedea o listă cu toate filele salvate pe care le-ați creat anterior. Acum, faceți clic pe butonul Adăugați o filă din partea de sus și vă va duce la formularul Filă nouă.
În formularul Filă nouă, specificați titlul filei și adăugați un nume pentru referință. Apoi, adăugați conținutul Tab. Acestea pot include text, imagini, multimedia, linkuri etc. După ce sunteți mulțumit de toate modificările, faceți clic pe butonul Salvare filă pentru a salva fila.
La fel, puteți adăuga câte file doriți pentru o utilizare ulterioară. Pentru a găsi toate filele salvate pe care le-ați creat, mergeți la WP Admin Dashboard > Custom Product Files. Aici veți găsi toate filele salvate și puteți edita, șterge sau adăuga file noi de aici.
După ce ați creat propriile file salvate, le puteți adăuga la orice produs în doar câteva clicuri. Să vedem cum să facem asta.
1.4. Adăugați file salvate la produsele WooCommerce
Adăugarea unei file salvate la un produs urmează un proces similar cu adăugarea unei file obișnuite. Accesați pagina Editare produs și derulați în jos la secțiunea Date despre produs. Faceți clic pe File personalizate și apoi faceți clic pe butonul Adăugați o filă salvată .
Alegeți din lista de file salvate fila pe care doriți să o adăugați. Acesta va încărca toate datele filei selectate. Acum, puteți doar să-l salvați așa cum este sau să-i faceți modificări în funcție de cerințele dvs. Puteți adăuga mai multe file personalizate făcând clic pe butoanele respective și reordonați filele după preferință.
În cele din urmă, există o casetă de selectare pentru a înlocui o filă salvată. Practic, deconectează fila de la fila Salvată originală. Astfel, în viitor, dacă faceți modificări la fila salvată, acestea nu vor fi reflectate pentru acest produs.
După ce ați salvat fila de produs personalizat, aceasta va apărea imediat pe pagina produsului. Pentru a verifica, trebuie doar să navigați la front-end-ul site-ului dvs. și să accesați pagina produsului respectiv și să vedeți fila personalizată în acțiune.
Mai sus, am văzut cum să adăugați file personalizate de produse în WooCommerce folosind un plugin terță parte. Cu toate acestea, există o altă modalitate de a obține aceeași funcționalitate, și anume, folosind fragmente de cod personalizate. Să vedem cum puteți adăuga filele de produse personalizate la pagina produsului WooCommerce în mod programatic.
2. Adăugați filele de produse personalizate în mod programatic
Înainte de a trece la fragmentele de cod pentru a adăuga file personalizate de produse în WooCommerce, să vedem mai întâi cum să adăugăm fragmente de cod la WooCommerce.
2.1. Accesați Editorul de coduri pentru WordPress
În primul rând, vă recomandăm să creați o copie de rezervă completă a site-ului dvs. și să utilizați o temă copil pentru a edita fișierul functions.php . Dacă nu știți, consultați ghidul nostru despre cum să creați o temă pentru copii. Ca alternativă, verificați aceste pluginuri pentru teme pentru copii dacă nu doriți să o faceți manual.
După ce ați terminat de creat o temă copil, accesați Tabloul de bord WP Admin și navigați la Aspect > Editor de teme. Asigurați-vă că selectați tema copil și deschideți fișierul functions.php . Acum puteți adăuga fragmente de cod personalizate la sfârșitul fișierului functions.php . După ce ați terminat, faceți clic pe butonul Actualizare fișier pentru ca modificările să intre în vigoare.
Alternativ, puteți utiliza pluginul Fragmente de cod pentru a adăuga fragmente de cod personalizate pe site-ul dvs. În primul rând, trebuie să instalați pluginul din depozitul WordPress. Doar accesați WP Admin Dashboard > Plugin-uri > Adăugați nou. Căutați pluginul Code Snippets și instalați-l pe site-ul dvs.
După aceea, accesați setarea pluginului din tabloul de bord WP Admin și faceți clic pe butonul Adăugați un fragment nou pentru a adăuga fragmentul de cod personalizat. La fel, puteți adăuga câte fragmente de cod personalizate sunt necesare.
Un lucru interesant despre utilizarea acestui plugin este că nu va trebui să creați nicio temă copil, deoarece pluginul se ocupă singur de fragmentele de cod. Cu toate acestea, este totuși recomandat să aveți o temă copil pentru a vă securiza site-ul dacă ceva nu merge bine.
Acum că ați învățat cum să adăugați fragmente de cod pe un site WordPress, să vedem cum putem adăuga file personalizate de produse în WooCommerce folosind fragmente de cod personalizate.
2.2. Adăugați file personalizate de produse la toate produsele din WooCommerce
Adăugarea unei file de produse personalizate la toate produsele simultan poate fi foarte eficientă, deoarece informațiile rămân aceleași pentru toate produsele. De exemplu, puteți adăuga întrebări frecvente care rămân în mare parte aceleași pentru toate produsele sau cel puțin pentru o anumită categorie de produse.
Următorul fragment de cod poate fi folosit pentru a adăuga o filă globală de produs personalizat și, de asemenea, pentru a o completa cu conținut relevant.
//Adăugați o nouă filă de produs personalizat add_filter( 'woocommerce_product_tabs', 'ql_new_custom_product_tab'); funcția ql_new_custom_product_tab( $tabs ) { //Pentru a adăuga mai multe file, actualizați eticheta pentru fiecare filă nouă din matricea $tabs['xyz'], de exemplu, custom_tab2, my_new_tab etc. $tabs['custom_tab'] = matrice( „title” => __( „Fila produs personalizat”, „woocommerce” ), //schimbați „fila Produs personalizat” cu orice text doriți 'prioritate' => 50, 'callback' => 'ql_custom_product_tab_content' ); returnează $tabs; } // Adăugați conținut la o filă de produs personalizat funcția ql_custom_product_tab_content() { // Conținutul filei personalizate //Puteți adăuga orice cod php aici și acesta va fi afișat în fila personalizată nou creată echo „<h2>Conținut personalizat filei de produs</h2>”; echo '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean facilisis in dui eget rutrum. Morbi quis sodales felis.</p>'; echo „<img src="http://hypernova/wp-content/uploads/2021/10/logo-1.jpg" width="300" height="400" align="center">'; }
Terminat! Acum, puteți naviga la front-end-ul site-ului dvs. și puteți verifica modificările.
Acum, fragmentul de mai sus poate fi folosit doar pentru a adăuga o filă de produs personalizată la toate produsele din WooCommerce. Dar ce se întâmplă dacă trebuie să adăugați file de produse personalizate numai la anumite produse? Ei bine, avem un fragment pentru tine care va duce treaba la bun sfârșit. Haideți să aruncăm o privire.
2.3. Adăugați file de produse personalizate numai la anumite produse
În primul rând, trebuie să luați ID-ul produsului al produsului, la care doriți să adăugați o filă personalizată. Doar accesați tabloul de bord WP Admin și navigați la Produse > Toate produsele. Plasați cursorul peste produsul dorit și acesta va afișa ID-ul produsului. Salvați acest ID de produs deoarece mai târziu trebuie să îl adăugam la fragmentul nostru de cod.
Copiați și inserați următorul fragment de cod în fișierul functions.php sau în pluginul Code Snippets, indiferent de metoda pe care o utilizați. Nu uitați să înlocuiți substituentul ID-ul de produs cu ID-ul dvs. de produs real.
//Adăugați o nouă filă de produs personalizat add_filter( 'woocommerce_product_tabs', 'ql_specific_custom_product_tab'); funcția ql_specific_custom_product_tab( $tabs ) { global $produs; //Preia ID-ul produsului. Înlocuiți-l cu ID-ul de produs real if( $produs->get_id() == 1911 ) { // Adaugă noua filă //Pentru a adăuga mai multe file, actualizați eticheta pentru fiecare filă nouă din $tabs['xyz'], de exemplu, custom_tab, my_new_tab etc. $tabs['specific_product_tab'] = matrice( „title” => __( „Fila produs specific”, „woocommerce” ), //schimbați „fila Produs specific” cu orice text doriți 'prioritate' => 50, 'callback' => 'ql_specific_product_tab_content' ); } returnează $tabs; } //Adăugați conținut la o filă de produs personalizat funcția ql_specific_product_tab_content() { // Conținutul filei personalizate //Puteți adăuga orice cod php aici și acesta va fi afișat în fila personalizată nou creată echo „<h2>Conținut specific filei de produs</h2>”; echo '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean facilisis in dui eget rutrum. Morbi quis sodales felis.</p>'; echo „<img src="http://hypernova/wp-content/uploads/2021/10/logo-1.jpg" width="300" height="400" align="center">'; }
Asta e. Fila de produs personalizat nou creată este acum aplicată produsului dorit și va fi afișată numai pentru produsul respectiv.
Până acum, ați văzut fragmentele de cod pentru a adăuga file personalizate de produse în WooCommerce pentru produse individuale și pentru toate produsele. Să trecem puțin mai departe și să ne uităm la câteva fragmente de cod pentru a personaliza filele de produse.
2.4. Redenumiți filele de produse
Uneori, poate fi necesar să înlocuiți titlul filei personalizate sau chiar să schimbați numele unei file implicite. De exemplu, este posibil să doriți să schimbați fila Recenzii la Evaluări în cazul unei emisiune TV sau a unui film. Folosind fragmentul de cod de mai jos, vă este ușor să schimbați titlul produsului personalizat.
//Redenumiți filele de produse în WooCommerce add_filter( 'woocommerce_product_tabs', 'ql_rename_product_tabs', 98 ); funcția ql_rename_product_tabs( $tabs ) { //Înlocuiți eticheta filei din interiorul matricei $tabs['xyz'] cu eticheta dvs. reală a filei $tabs['reviews']['title'] = __( 'Evaluări'); // Redenumiți fila recenzii $tabs['custom_tab']['title'] = __( 'Fila personalizată actualizată' ); // Redenumiți fila personalizată creată de utilizator. returnează $tabs; }
Grozav! Filele dvs. de produse au fost acum redenumite. Acum puteți naviga la front-end-ul site-ului dvs. și puteți verifica singur modificările.
2.5. Fila Reordonare
Următorul fragment de cod vă permite să schimbați ordinea filelor de produse. Funcționează pe baza unei valori prioritare.
Numărul mai mic indică o prioritate mai mare, iar un număr mai mare indică o prioritate mai mică. Astfel, fila cu cea mai mare prioritate este afișată prima, urmată de fila următoare, iar fila cu cea mai mică prioritate va fi pe ultima poziție.
Dacă aruncați o privire la codul de mai jos, acesta utilizează câteva file de produse pentru a demonstra cum funcționează. Puteți adăuga mai multe file de produse dacă este necesar și apoi le puteți reordona conform preferințelor dvs. Asigurați-vă că înlocuiți titlurile filelor cu titlurile reale ale filelor.
//Reordonați filele de produse în WooCommerce add_filter( 'woocommerce_product_tabs', 'ql_reorder_product_tabs', 98 ); funcția ql_reorder_product_tabs( $tabs ) { //reordonează filele în funcție de valoarea priorității //Înlocuiți eticheta filei din interiorul matricei $tabs['xyz'] cu eticheta dvs. reală a filei $tabs['description']['priority'] = 5; // Mai întâi descrierea $tabs['custom_tab']['priority'] = 10; // A doua filă personalizată. $tabs['specific_product_tab']['priority'] = 15; // Fila specifică produsului a treia. $tabs['reviews']['priority'] = 20; //Ultimele recenzii returnează $tabs; }
Asta e! Acum ați sortat filele de produse în propria comandă personalizată. Acum puteți naviga la front-end-ul magazinului dvs. WooCommerce pentru a verifica modificările.
2.6. Eliminați filele
Acum, ați adăugat toate aceste file, dar dacă doriți să le eliminați acum? Ei bine, se pare că există un fragment de cod care poate elimina toate filele de produs nedorite de pe pagina produsului.
Următorul fragment de cod funcționează bine atât pentru filele de produse prestabilite, cât și pentru cele personalizate. Nu uitați să schimbați titlul filei cu titlul propriu al filei.
//Elimină filele de produse din WooCommerce add_filter( 'woocommerce_product_tabs', 'ql_remove_custom_product_tabs', 98 ); funcția ql_remove_custom_product_tabs( $tabs ) { //Înlocuiți eticheta filei din interiorul matricei $tabs['xyz'] cu eticheta dvs. reală a filei unset( $tabs['reviews'] ); // Eliminați fila recenzii unset( $tabs['descriere'] ); // Eliminați fila de descriere unset( $tabs['custom_tab'] ); // Eliminați fila personalizată creată de utilizator. returnează $tabs; }
Asta e. Filele dvs. de produse nedorite au fost acum eliminate cu succes. Acum puteți naviga la front-end-ul magazinului dvs. WooCommerce și puteți verifica modificările.
Mai sus, am văzut cum să adăugați file personalizate de produse în WooCommerce utilizând pluginuri terță parte și în mod programatic. Să mergem mai departe și să vedem alte câteva moduri de a organiza produsele WooCommerce.
BONUS: Cum să sortați produsele WooCommerce
Sortarea produselor într-o anumită ordine face două lucruri. În primul rând, vă permite să evidențiați anumite produse aducându-le în partea de sus a paginii. În al doilea rând, facilitează găsirea sau derularea produselor pentru clienți, deoarece produsele sunt organizate într-un mod logic.
Opțiuni de sortare a produselor în WooCommerce
În mod implicit, WooCommerce oferă șase opțiuni de sortare și vă permite să selectați una dintre ele ca metodă de sortare implicită. Aceste opțiuni includ:
Sortare implicită (sortare personalizată + nume): Produsele, în mod implicit, sunt sortate în funcție de numele lor, dar în același timp vă permit să sortați produsele personalizate. Acest lucru este util pentru evidențierea produselor care nu se potrivesc unui singur criteriu.
Popularitate (vânzări): sortează articolele după numărul de vânzări în ordine descrescătoare, aducând cele mai bine vândute articole în top.
Evaluare medie: sortează produsele după evaluarea medie în ordine descrescătoare. Produsele cu cel mai mare rating obțin prima poziție, urmată de următoarea și așa mai departe.
Sortare după cele mai recente: sortează produsele în funcție de momentul în care sunt adăugate în magazin. Acest lucru aduce cele mai recente produse tale în top, ceea ce este bun pentru a evidenția cele mai recente completări.
Sortare după preț (asc, desc): sortează produsul în funcție de prețul lor, în ordine crescătoare sau descrescătoare, după alegerea dvs.
Schimbați metoda implicită de sortare a produselor în WooCommerce
Acum, pentru a schimba metoda implicită de sortare în WooCommerce, accesați WP Admin Dashboard și navigați la Aspect > Personalizare . Aceasta vă va duce la Personalizarea temei.
În interiorul Personalizatorului de teme, accesați meniul Catalog de produse. Acum, accesați secțiunea implicită de sortare a produselor și faceți clic pe meniul drop-down. Selectați metoda de sortare preferată și apăsați Publicare pentru a salva modificările.
Bravo! Acum ați selectat metoda preferată de sortare a produselor. Cu toate acestea, acestea nu sunt singurele modalități de a vă sorta produsele. Există multe alte moduri și metode prin care puteți sorta produsele WooCommerce. Dacă sunteți interesat, consultați ghidul nostru detaliat despre cum să sortați produsele WooCommerce.
Concluzie
Una peste alta, filele de produse personalizate sunt cu adevărat benefice, deoarece vă ajută să prezentați informații despre un produs într-un mod mai organizat. Organizarea informațiilor despre produse în file individuale facilitează pentru clienți să identifice informațiile necesare și să ia o decizie de cumpărare mai bună.
Mai mult, de asemenea, permite proprietarilor de magazine să adauge toate informațiile esențiale despre produs fără a completa o pagină întreagă și a copleși utilizatorul. Într-un fel, este un câștig-câștig pentru toată lumea.
Pentru a rezuma, am văzut mai multe moduri de a adăuga file personalizate de produse în WooCommerce:
- Folosind un plugin
- Din punct de vedere programatic
Am început cu pluginul Custom Product Files pentru WooCommerce și am văzut cum să adăugați file personalizate de produse folosind pluginul. Am văzut, de asemenea, caracteristica File salvate, care ne permite să salvăm filele utilizate frecvent pentru o utilizare ulterioară.
După aceea, ne-am uitat la fragmentele de cod pentru a adăuga file personalizate de produse în WooCommerce. Am văzut fragmente pentru a adăuga file de produse la toate produsele, precum și numai la anumite produse. Mai mult, ne-am uitat și la fragmentele de cod pentru a redenumi, reordona și elimina filele de produse. În cele din urmă, ne-am încheiat uitându-ne la opțiunile de sortare a produselor WooCommerce pentru a organiza pagina magazinului.
Ați încercat să adăugați file personalizate de produse în WooCommerce? Ce metode ai folosit? Și cum a fost experiența ta? Anunțați-ne în comentariile de mai jos.
Dacă doriți să aflați mai multe despre îmbunătățirea site-ului dvs. WooCommerce, iată câteva postări care v-ar putea interesa:
- Cum să personalizați șabloanele WooCommerce
- Cele mai bune pluginuri pentru a personaliza pagina produsului WooCommerce
- Cum să eliminați fila Informații suplimentare din WooCommerce