Cum să editați pagina magazinului WooCommerce în mod programatic (CSS și PHP)

Publicat: 2020-08-27

Căutați modalități de a vă personaliza pagina magazinului? În acest tutorial, vă vom arăta cum să editați pagina magazinului WooCommerce în mod programatic folosind atât PHP, cât și CSS .

În orice magazin online, este crucial să editați și să optimizați pagina magazinului pentru a vă crește ratele de conversie. Pagina magazinului este locul unde vă expuneți produsele și vă poate face sau distruge afacerea. Dacă conduceți un magazin WooCommerce, vă recomandăm să personalizați pagina magazinului și să profitați la maximum de ea. În acest ghid, vă vom arăta cum să editați pagina magazinului WooCommerce în mod programatic .

De ce este important să editați pagina magazinului în WooCommerce?

Pagina magazinului este una dintre cele mai importante pagini din WooCommerce. Este locul în care vă expuneți produsele vizitatorilor, astfel încât acestea să poată avea un efect uriaș asupra performanței magazinului dvs. O pagină bună de magazin poate îmbunătăți experiența utilizatorului, poate crește ratele de conversie și vă poate ajuta să generați implicarea utilizatorilor. O pagină de magazin proastă, pe de altă parte, poate face exact opusul și vă poate înăbuși afacerea.

De aceea trebuie să -l optimizați pentru a vă maximiza vânzările . Puteți face asta cu pluginuri și creatori de pagini, dar dacă aveți abilități de codare, crearea propriei soluții este calea de urmat.

Cum să editați pagina magazinului WooCommerce în mod programatic

Am văzut anterior diferite metode de personalizare a paginii magazinului. Cu toate acestea, în acest tutorial, ne vom concentra asupra modului de a edita pagina magazinului WooCommerce în mod programatic folosind un pic de cod CSS și PHP. Merită remarcat faptul că, în acest ghid, vom lucra la o temă copil și vom edita, de asemenea, șablonul WooCommerce implicit pentru magazin. Ne vom concentra pe fișierele șablon WooCommerce și pe câteva referințe la fișierul functions.php al temei copil.

În acest tutorial, veți învăța cum să editați pagina magazinului WooCommerce în mod programatic pentru:

Dezactivați șablonul implicit pentru pagina de magazin WooCommerce
Personalizați anteturile și conținutul
1. Cele mai populare produse
2. Cele mai vândute produse
3. Cel mai bine cotat
4. Afișați produsele după taxonomii
5. Personalizați pagina magazinului WooCommerce în functions.php
Editați aspectul buclei de produse și aplicați foaia de stil CSS
1. Editați numărul implicit de coloane pe rând
2. Aplicați stilul CSS pe pagina magazinului
Editați fișierele bucle ale paginii magazinului WooCommerce
1. Înlocuiți textul implicit „de vânzare” pentru un gif animat
2. Eliminați opțiunile de sortare și paginare

Inainte sa incepi

Vă rugăm să rețineți că următorul ghid implică codare avansată, așa că dacă nu aveți abilități tehnice, vă recomandăm să urmați acest alt tutorial .

Înainte de a începe, vă recomandăm să instalați și o temă copil. Puteți consulta ghidul nostru despre cum să creați o temă copil sau puteți utiliza un plugin pentru a face acest lucru în câteva clicuri. În plus, deoarece veți schimba fișierele de bază, este o idee bună să faceți o copie de rezervă completă a site-ului dvs.

Deci, acum, să vedem cum să personalizăm pagina magazinului în WooCommerce cu codificare.

1. Dezactivați șablonul implicit pentru pagina de magazin WooCommerce

Pentru a personaliza pagina magazinului, există două abordări posibile:

Puteți suprascrie fișierul WooCommerce responsabil cu imprimarea paginii magazinului
Adăugați scripturi personalizate în fișierul functions.php al temei copilului dvs. folosind cârlige WC

Puteți edita șablonul HTML WooCommerce la fel ca fișierul functions.php al temei copil, suprascriind fișierele de bază pentru a preveni ștergerea atunci când există o actualizare. Cu toate acestea, deoarece lucrurile nu funcționează exact ca în fișierul functions.php dacă WooCommerce decide să actualizeze aceste fișiere, este posibil ca personalizările dvs. să nu mai funcționeze.

Dar nu este nimic de care să vă faceți griji. WooCommerce este conștient de acest lucru, așa că rareori actualizează fișierele șablon într-un mod care să vă distrugă scripturile. Problema lucrului cu fișierul functions.php este că pagina implicită a magazinului WooCommerce va apărea în continuare după ce vă adăugați cârligele.

Deci, în primul rând, trebuie să dezactivați pagina implicită de magazin de șabloane WooCommerce pentru a vă crea șablonul de la zero .

Fișierul archive-product.php

În WooCommerce, fișierul responsabil pentru ieșirea pe pagina magazinului se numește archive-product.php și îl puteți găsi în folderul de șabloane WooCommerce ( WooCommerce > Templates > archive-product.php ). Editați pagina magazinului WooCommerce în mod programatic - Dezactivați șablonul de pagină de magazin

Pentru a suprascrie acest fișier, trebuie să îl copiați și să-l lipiți în folderul WooCommerce din tema copilului, așa cum se arată mai jos:

Acum, să aruncăm o privire la fișierul archive-product.php , astfel încât să puteți vedea cum afișează WooCommerce pagina magazinului. Pentru a face asta, deschideți mediul de dezvoltare integrat (IDE) preferat, accesați folderul șabloane al pluginului WooCommerce și deschideți fișierul. Puteți să-l editați și să vă jucați cu el, în același mod în care puteți personaliza orice alt fișier șablon WC.

Înainte de a face asta, asigurați-vă că aveți o copie de rezervă a fișierului original pentru a anula orice modificări dacă este necesar.

În fișierul archive-product.php , veți vedea mai multe do_action() . Aceste funcții sunt folosite pentru a crea cârlige WooCommerce disponibile în prezent pentru pagina magazinului. Pentru a dezactiva complet pagina magazinului WooCommerce, ștergeți pur și simplu bucla responsabilă pentru imprimarea produselor:

 if (wc_get_loop_prop('total')) {
    în timp ce (au_postări()) {
        bara();
        do_action('woocommerce_shop_loop');
        wc_get_template_part('conținut', 'produs');
    }
}

Puteți face mai multe modificări aici, dar pentru a o simplifica, vom șterge doar bucla și vom lăsa totul așa cum este. Dacă decideți să faceți mai multe modificări, rețineți că, dacă eliminați unele dintre funcțiile do_action() , shortcode-ul corespunzător nu va mai funcționa pe nicio pagină a site-ului web.

După ștergerea buclei pentru imprimarea produselor, fișierul archive-product.php va arăta astfel:

 definit('ABSPATH') || Ieșire;
get_header('magazin');
do_action('woocommerce_before_main_content');
dacă (woocommerce_product_loop()) {
    do_action('woocommerce_before_shop_loop');
    // aici am șters bucla
    do_action('woocommerce_after_shop_loop');
} altfel {
    do_action('woocommerce_no_products_found');
}
do_action('woocommerce_after_main_content');
do_action('woocommerce_sidebar');
get_footer('magazin');

Asta e! Ați dezactivat șablonul implicit de pagină de magazin și ați editat pagina magazinului WooCommerce în mod programatic ! Acum aveți o pagină de magazin goală, astfel încât să puteți începe să vă proiectați propria.

2. Personalizați anteturile și conținutul paginii magazinului WooCommerce în mod programatic

Conținutul și anteturile pot fi orice marcaj HTML care poate include imagini, tabele sau link-uri. Sau chiar ceva de genul unui container gol pentru a rula un fișier JavaScript extern. Pentru aceasta, veți avea nevoie de cunoștințe de bază despre codurile scurte WooCommerce, deoarece le veți folosi pentru a afișa produse pe pagina magazinului. Dacă nu sunteți familiarizat cu codurile scurte WC, aruncați o privire la acest ghid.

Acum, să edităm pagina magazinului WC și să afișăm produsele după cele mai populare, cele mai bine vândute, cele mai apreciate și taxonomii. În plus, vă vom arăta cum să adăugați câteva titluri și conținut în afara buclei.

2.1 Afișați cele mai populare produse

Pentru a afișa cele mai populare produse, trebuie să editați fișierul archive-product.php al temei copilului dumneavoastră. Mai întâi, utilizați următorul cod scurt

 [ products orderby="popularity" ]

Exact unde era bucla înainte de a o șterge. # afișați cele mai populare produse: 2 produse în 2 coloane

 do_action('woocommerce_before_shop_loop');
echo „<h1>CEL MAI POPULAR !!</h1>”;
do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); do_action('woocommerce_after_shop_loop');

În shortcode, veți adăuga o clasă numită m-popular , pe care o puteți utiliza mai târziu când aplicați stiluri. În exemplul de mai sus, l-am setat să afișeze 2 produse într-un singur rând de 2 coloane (columns=”2″ limit=”2″) . Rețineți că nu puteți utiliza coduri scurte aici în același mod în care le utilizați într-o postare sau într-o pagină.

Trebuie să utilizați funcția do_shortcode() pentru ca shortcode-urile să funcționeze. Dacă totul a mers bine, acum ar trebui să vedeți asta pe pagina magazinului: pagina de magazin personalizat

2.2 Cele mai vândute produse

O altă modalitate de a personaliza magazinul WooCommerce în mod programatic este sortarea produselor după cele mai bune vânzări. Pentru aceasta, pe lângă ecou shortcode-ului, veți adăuga conținut folosind un simplu marcaj HTML ( <h1> ). Aici, puteți adăuga orice alt tip de conținut care se potrivește cu formatul HTML adecvat.

Să afișăm cele mai bine vândute produse, de data aceasta într-un aspect de 2 rânduri și 3 coloane. Pentru a face asta, pur și simplu lipiți acest lucru imediat după linia echo do_shortcode() pe care ați inserat-o în pasul anterior 2.1:

 echo „<h1>Cele mai bine vândute</h1>”;
do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]');

Și ceea ce primești este asta: pagina de magazin personalizat Dacă doriți să adăugați doar cele mai bine vândute produse în loc de cele mai populare produse, înlocuiți linia echo din 2.1 cu cea din 2.2.

2.3 Produse cu cele mai bune cote

Acum, să ne jucăm mai mult cu shortcodes și să afișăm produsele de top. De data aceasta, vom folosi un shortcode fără mai multe atribute decât o clasă.

 echo „<h1>Cele mai bine evaluate</h1>”;
do_shortcode('[ top_rated_products class="t-rated" ]');

Să vedem ce se întâmplă după asta: pagina de magazin personalizat După cum puteți vedea, aspectul implicit WooCommerce are 4 coloane. Să lăsăm așa deocamdată, vom reveni mai târziu.

2.4 Afișați produsele după taxonomii pe pagina magazinului

Pe lângă afișarea celor mai bine vândute sau cel mai bine cotate produse, le puteți afișa și după taxonomii. De exemplu, următorul cod va tipări produse pentru categoriile Afișe și Îmbrăcăminte, folosind aceleași atribute pe care le utilizați înainte, dar schimbând numărul de coloane la 5.

 echo „<h1>Taxonomie de îmbrăcăminte:</h1>”;
do_shortcode('[ products category="Clothing" columns="5" limit="10" class="t-clothing" ]'); echo '<h1>Taxonomie postere:</h1>'; echo „<h2>Luați cele mai bune postere pe perete</h2>”; do_shortcode('[ products category="Posters" limit="4" class="t-posters" ]');

Și așa ar trebui să arate acum archive-product.php :

 <header class="woocommerce-products-header">
       <h1 class="woocommerce-products-header__title page-title"></h1>	
</header>
<?php
if ( woocommerce_product_loop() ) {
	do_action('woocommerce_before_shop_loop');		
	
	echo „<h1>CEL MAI POPULAR !!</h1>”;
        do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); echo „<h1>Cele mai bine vândute</h1>”; do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]'); echo „<h1>Cele mai bine evaluate</h1>”; do_shortcode('[ top_rated_products class="t-rated" ]'); echo „<h1>Taxonomie de îmbrăcăminte:</h1>”; do_shortcode('[ products category="Clothing" columns="5" limit="10" class="t-clothing" ]'); echo '<h1>Taxonomie postere:</h1>; echo „<h2>Luați cele mai bune postere pe perete</h2>”; do_shortcode('[ products category="Posters" columns="2" limit="4" class="t-posters" ]'); do_action('woocommerce_after_shop_loop'); } else { do_action( 'woocommerce_no_products_found' ); } do_action( 'woocommerce_after_main_content' ); do_action('woocommerce_sidebar'); get_footer('magazin');

În acest moment, ar trebui să puteți înțelege cum să utilizați toate codurile scurte WooCommerce și atributele acestora pentru a construi o pagină de magazin personalizată care poate îndeplini orice cerință de design.

2.5 Personalizați pagina magazinului WC în functions.php

Dacă doriți să personalizați pagina magazinului WooCommerce în mod programatic, puteți edita și fișierul functions.php . Pentru conținutul din afara buclei de produse, puteți folosi unele dintre cârligele văzute în fișierul archive-product.php , rulându-le din fișierul functions.php al temei copil. În acest fel, vă asigurați că scripturile dvs. vor funcționa în continuare chiar dacă WC decide să-și actualizeze fișierele șabloane.

Pentru acest exemplu, să adăugăm un antet personalizat cu un titlu, subtitrare, descriere și un banner. Lipiți acest script în fișierul functions.php al temei copil:

 add_action('woocommerce_before_shop_loop','shop_main_heading');
funcția shop_main_heading(){
	$conținut = '';
	$content.='<h1>Bine ați venit pe pagina fabuloasă a magazinului meu!</h1>'; 
	$content.='<h2>Construit de mine cu dragoste</h2>';
	$content.='<p>Vă mulțumim că ați trecut și ați vizitat pagina magazinului meu de pe site, vă rugăm să răsfoiți cele mai apreciate produse și să le cumpărați pe toate</p>';
	$content.='<img src="https://www.carpetright.co.uk/globalassets/static-pages/useful-links/samples/sample-banner.jpg"/>';
	echo $conținut;
}

Iată cum va arăta pagina magazinului dvs.: pagina de magazin personalizat În același mod, puteți folosi hook-ul woocommerce_after_shop_loop pentru a afișa conținut la sfârșitul paginii magazinului.

3. Editați numărul de produse pe rând și aplicați o foaie de stil CSS pe pagina magazinului WC

Până acum, ar trebui să puteți afișa produse, să le sortați după caracteristici, taxonomii, cele mai bine vândute și orice altă modalitate pe care doriți să utilizați codurile scurte WooCommerce. În plus, ar trebui să puteți insera orice tip de conținut în orice loc doriți pe pagina magazinului dvs. Dar dacă ai putea merge și mai departe și ai duce pagina magazinului la următorul nivel? Puteți edita aspectul șablonului și puteți adăuga câteva stiluri CSS pentru a personaliza și mai mult pagina de magazin WooCommerce.

3.1 Editați numărul implicit de coloane pe rând

Dacă specificați atributul coloanei codului scurt WC, puteți seta numărul de produse pe care le va afișa fiecare rând. În plus, puteți seta numărul total de produse pentru shortcode cu atributul limit:

 [ product orderby=”popularity” columns=”3” limit=”3” ]

Totuși, dacă nu definiți atributul coloane, puteți seta numărul de produse pe care doriți să le imprimați pentru fiecare rând folosind acest script în fișierul functions.php al temei copil.

 add_filter('loop_shop_columns', 'loop_columns', 999);
daca (!function_exists('loop_columns')) {
    function loop_columns() {
        returnați 4 ;//4 produse pe rând
    }
}

Acest lucru va schimba numărul implicit de produse afișate pe rând numai dacă nu există un atribut de coloană în codul scurt WooCommerce.

3.2 Aplicați unele stiluri CSS pe pagina magazinului

Pentru a aplica unele CSS pe pagina magazinului WooCommerce, puteți pur și simplu să adăugați scripturile în fișierul șablon, astfel:

 <stil>
* {
    culoare de fundal:#a2bcff;
}
</stil>

Acest lucru este ok pentru bucăți mici de CSS, dar nu este o practică recomandată. Pentru a aplica stilul CSS în modul WordPress, trebuie să utilizați cârligul wp_enqueue_scripts pentru a vă încărca scripturile dintr-un fișier diferit.

Pentru acest exemplu, vom numi acest fișier shop_style.css și îl vom stoca în folderul principal al temei copil, la același nivel de ierarhie cu fișierul implicit style.css . După crearea acestui fișier, inserați următorul script în fișierul functions.php :

 add_action( 'wp_enqueue_scripts', 'quadlayers_enqueue_css');
funcția quadlayers_enqueue_css(){    
    if( is_shop() ):
    wp_enqueue_style( 'checkout_style',
        get_stylesheet_directory_uri() . „/shop_style.css”
    );
    endif;
}

După cum puteți vedea, if(is_shop()): trebuie să fie adevărat pentru a pune în coada fișierul shop_style.css . În acest fișier, veți avea toate scripturile de stil pe care doriți să le aplicați numai la pagina magazinului . Acesta este diferit de fișierul style.css din tema copil care va aplica scripturile întregului site web. Pentru acest ghid, vom folosi următorul fișier shop_style.css , dar nu ezitați să folosiți scripturile dvs. CSS sau să îl schimbăm pe acesta:

 div.storefront-sorting:nth-child(2){
	text-align:center;
} 
#principal div.storefront-sorting h1{
	font-style:normal;
}
#principal h1,#principal h2{
	font-weight:bolder;
	font-style: oblic;
	text-align:center;
}
#principal > .m-popular,#principal > .b-sellers,#principal > .t-rated,#principal > .t-clothing,#principal > .t-posters{	
	chenar: solid #b8b8b8 1px;
	chenar-rază: 25px;
	margine-jos: 25px;
	padding-top: 35px;	
	padding-stânga: 20px;
	padding-dreapta: 20px;	
} 
#principal > .m-popular{
	culoare de fundal:#dbad97;	
}
#principal > .b-sellers {
	culoare de fundal:#b4e6a3;
}
#principal > .t-rated {
	culoare de fundal:#f0f695;	
}
#principal > .t-clothing {
	culoare de fundal:#95b4f6;	
}
#principal > .t-posters {
	culoare de fundal:#c88fe5;	
}

În fișierul CSS, veți găsi niște selectoare care conțin clase personalizate. Le-am creat înainte de a crea codurile scurte. De exemplu, am adăugat clasa „b-sellers” în codul scurt, astfel:

 do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]');

Deci, după ce adăugați stilul CSS la pagina magazinului WooCommerce, veți obține ceva de genul acesta (faceți clic pe imagine pentru a o vedea la dimensiune completă):

Faceți clic pe imagine pentru a o vizualiza la dimensiune completă.

De asemenea, rețineți că avem tema StoreFront activă și, după cum probabil știți, selectoarele CSS pot fi diferite pe fiecare site chiar dacă au aceeași temă. Deci, pentru ca acest fișier să funcționeze, ar putea fi necesar să editați selectoarele pentru site-ul dvs. specific.

BONUS : Cum se schimbă numărul de produse pe pagină

Acum, să presupunem că doriți să modificați numărul de produse pe care le afișați pe pagină pe pagina magazinului. Dacă doriți să afișați 10 produse pe pagină, de exemplu, adăugați pur și simplu următorul cod în fișierul functions.php :

 add_filter( 'loop_shop_per_page', 'new_loop_shop_per_page', 20 );

funcția new_loop_shop_per_page( $cols ) {
  $cols = 10;
  returnează $cols;
}

Unde $cols conține numărul de produse pe pagină care ia valoarea din Opțiuni -> Citire și returnează numărul de produse pe care doriți să le afișați pe fiecare pagină.

4. Editați fișierele bucle ale paginii magazinului WooCommerce

Până acum, am văzut cum să edităm fișierul șablon archive-product.php pentru a personaliza pagina magazinului WooCommerce în mod programatic. Acest fișier este locul în care rulează bucla WC pentru a afișa toate produsele paginii. Acum, deschideți folderul plugin WooCommerce în editorul de pluginuri sau IDE-ul dvs. și deschideți folderul buclă. Îl veți găsi la același nivel cu fișierul archive-product.php .

În folderul buclă, veți găsi câteva fișiere pe care le puteți edita și pentru a personaliza și mai mult pagina magazinului. Pentru a suprascrie acest fișier, trebuie să creați un folder și un fișier clonat în tema copilului. Creați un dosar nou numit buclă sub folderul WooCommerce creat anterior.

După aceasta, copiați fișierul original sale-flash.php din șabloanele de plugin și inserați-l în acest folder de buclă în tema copilului. Vom folosi fișierul sale-flash.php pentru a adăuga un gif animat la toate produsele care sunt la reducere. Dacă te uiți la fișier, vei vedea că acesta este scriptul responsabil pentru afișarea mesajului „VÂNZARE” atunci când un produs este la reducere.

4.1 Înlocuiți textul implicit „de vânzare” pentru un gif animat

În această secțiune, vă vom arăta cum să dezactivați mesajul implicit de vânzare și să îl înlocuiți cu un gif animat. Trebuie să editați fișierul flash-sale.php al temei copilului, astfel încât să arate astfel:

 definit('ABSPATH') || Ieșire;
global $post, $produs;
dacă ( $produs->este_la_vânzare() ) { 
   $an_gif = '<img src="https://i1.wp.com/tamingchaos.net/wp-content/uploads/2020/04/Sale-Gif.gif" width="100px" height="60px"/ >';
   echo $an_gif;
}

Acolo puteți înlocui fișierul gif cu orice alt gif care vă place.

4.2 Eliminați opțiunile de sortare și paginare

Acum, să aruncăm o privire la cum să dezactivați selectorul „sortare după” și funcționalitatea de paginare pe pagina magazinului WooCommerce. Similar cu ceea ce ați făcut cu fișierul sale-flash.php , puteți realiza acest lucru prin simpla salvare a unui fișier gol cu același nume.

Creați ambele fișiere în folderul loop și numiți-le orderby.php și pagination.php . Pentru a dezactiva complet ambele fișiere, ar trebui să puneți doar acest script în fiecare dintre fișiere:

 definit('ABSPATH') || Ieșire;

După ce faceți acest lucru, veți avea un antet și un subsol mai clar pe pagina magazinului dvs. În plus, paginarea poate să nu fie foarte utilă, deoarece afișați un număr mare de produse. editați pagina magazinului WooCommerce în mod programatic - Sortare și paginare Rețineți că în fișierul sale-flash.php , am șters comportamentul WooCommerce implicit și am adăugat propriul nostru afișând un gif animat. Aceasta este o sarcină de bază, dar această tehnică oferă o gamă largă de posibilități pentru dezvoltatorii avansați.

NOTE FINALE

Fișierele șablon WC ale temei copil nu împiedică suprascrierile dacă WooCommerce decide să lanseze o actualizare a șabloanelor. Cu toate acestea, acest lucru se întâmplă rar.
Acestea sunt exemple de scenarii și nu trebuie luate în producție, sunt destinate doar în scopuri didactice.

Bonus: Afișează categorii pe pagina magazinului WooCommerce

În cele din urmă, să vedem cum puteți adăuga categorii la pagina de magazin WooCommerce folosind un pic de cod. Această metodă este recomandată utilizatorilor cu abilități de codare. În afară de PHP, este recomandat să cunoașteți și un pic de CSS pentru a putea stila codul.

NOTĂ : Înainte de a începe, asigurați-vă că faceți o copie de rezervă a site-ului și creați o temă copil dacă nu aveți deja una.

Adăugați categorii la pagina Magazin

În tabloul de bord, accesați Aspect > Editor de teme și deschideți fișierul funcții.php pentru tema copil. Faceți clic pe fișierul functions.php din bara laterală Fișiere teme din dreapta și inserați următoarele scripturi pentru a adăuga funcțiile dvs. personalizate.

Funcția de mai jos va adăuga categoriile de produse înainte de a încărca celelalte elemente ale paginii dvs. de magazin. Aceasta înseamnă că cumpărătorii vor vedea toate categoriile de produse înainte de catalogul de produse.

 function product_subcategories( $args = array() ) {
$parentid = get_queried_object_id();

$args = matrice(
'parent' => $parentid
);

$terms = get_terms( 'product_cat', $args );

dacă ( $termeni ) {
echo '<ul class="product-cats">';

foreach ( $term ca $term ) {
echo '<li class="category">'; 
woocommerce_subcategory_thumbnail( $term );
ecou '<h2>';
echo '<a href="' . esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
echo $term->nume;
ecou '</a>';
ecou '</h2>';
ecou '</li>';
}

ecou '</ul>';
}

}

add_action( 'woocommerce_before_shop_loop', 'product_subcategories', 50 );

Această funcție va adăuga categoriile dvs. la pagina WooCommerce Shop. Cu toate acestea, rețineți că s-ar putea să nu arate exact așa cum doriți, așa că va trebui să stilați noua secțiune de categorii cu puțin CSS. Pentru mai multe informații despre aceasta, consultați postarea noastră despre cum să afișați și să stilați categoriile pe pagina magazinului.

Concluzie

Una peste alta, pagina magazinului este extrem de importantă și poate face sau distruge magazinul tău. De aceea, dacă aveți abilități de codificare, vă recomandăm să editați pagina magazinului WooCommerce în mod programatic și să o optimizați pentru a vă crește ratele de conversie.

În acest ghid, v-am arătat cum să adăugați, să eliminați și să personalizați diferite aspecte ale magazinului dvs. Cu toate acestea, acestea sunt doar câteva exemple și idei care vă pot ajuta să găsiți ceva inspirație și să vă duceți magazinul la nivelul următor. Acum este timpul să vă jucați și să vă dezvoltați personalizările.

Pentru mai multe ghiduri pentru a vă personaliza magazinul WooCommerce, vă recomandăm să consultați:

WooCommerce AJAX adăugare în coș
Cum să adăugați câmpuri personalizate la pagina de finalizare a achiziției?
Funcția de adăugare în coș WooCommerce în mod programatic

În cele din urmă, dacă doriți să conectați Facebook Shop cu WooCommerce, ar trebui să aruncați o privire la acest ghid complet. Ți-ai personalizat magazinul online? Ce ai schimbat? Dacă aveți întrebări, lăsați un comentariu mai jos și vom face tot posibilul să vă ajutăm! De asemenea, puteți consulta codul complet în Github.