Cum să afișați produsele WooCommerce după categorie

Publicat: 2020-08-16

WooCommerce Afișează produse după categorie Conduceți un magazin WooCommerce și doriți să afișați produse pe categorii în WordPress? Această postare are o explicație detaliată despre cum să afișați produsele WooCommerce în funcție de categorie. Dacă sunteți familiarizat cu WooCommerce, știți că categoriile de produse joacă un rol important în organizarea produselor dvs. pentru afișarea și accesul corect de către clienți.

Afișați produsele WooCommerce după categorie

Imediat din cutie, WooCommerce vă oferă câteva opțiuni cu privire la ceea ce puteți afișa în paginile dvs. de arhivă, cum ar fi produse, categorii sau subcategorii sau ambele produse și categorii . Cu toate acestea, majoritatea utilizatorilor WooCommerce optează pentru a treia opțiune pentru a afișa atât produse, cât și categorii/subcategorii. sortați categoriile woocommerce

Această opțiune va permite vizitatorului dvs. fie să selecteze produse chiar de pe pagina de pornire, fie să își rafinați căutarea făcând clic către o arhivă a categoriilor de produse.

Cu toate acestea, principalul dezavantaj al acestui lucru este că afișează categoriile/subcategorii împreună, fără nicio separare între cele două. Acest lucru face ca aspectul să pară puțin dezordonat din cauza dimensiunilor diferite ale imaginii.

Dintr-un punct de vedere expert, chiar dacă imaginile tale au aceeași dimensiune, dacă una dintre rândurile din pagina de arhivă include atât categorii, cât și produse, absența unui buton „Adaugă în coș” pentru categorii face ca rândul respectiv să pară dezorganizat, deoarece nu toate elementele sale au aceleași dimensiuni.

În acest scurt tutorial, veți învăța cum să afișați categoriile într-o listă separată înainte de a afișa produse.

Identificați sau distingeți codul în WooCommerce, care este folosit pentru a afișa categorii și subcategorii pe paginile de arhivă.
Creați un plugin personalizat pentru cod.
Scrieți o funcție care va pune categorii sau subcategorii înaintea listelor de produse.
Creați un stil personalizat pentru rezultat.

a) Afișați atât Produse, cât și Categorii sau Subcategorii

Pași pentru afișarea atât a produselor, cât și a categoriilor sau subcategoriilor.

Conectați-vă la site-ul dvs. WordPress și accesați tabloul de bord ca utilizator administrator.
Din meniul Tablou de bord, faceți clic pe Meniu Aspect > Personalizare. Faceți clic pe pagina Magazin și selectați WooCommerce > Catalog de produse. În opțiunea Afișare magazin , selectați Afișare categorii și produse . În opțiunea de afișare a categoriei , selectați Afișare subcategorii și produse după cum se arată mai jos:
Nu uitați să salvați modificările pe care le faceți.
Acesta va fi rezultatul :

b) Afișează categoria de produse WooCommerce

Cu toate acestea, puteți afișa Categoria de produs WooCommerce folosind un fragment de cod de mai jos, care ar trebui să fie plasat în fișierul functions.php.

Pași pentru afișarea categoriei de produse WooCommerce

Iată pașii pe care ar trebui să îi urmați:

Conectați-vă la site-ul dvs. WordPress și accesați tabloul de bord ca utilizator administrator.
Din meniul Dashboard, faceți clic pe Meniu Aspect > Editor de teme Când pagina Editor de teme este deschisă, căutați fișierul cu funcțiile temei unde vom adăuga funcția care va afișa categoria Produs WooCommerce.
Adăugați următorul cod în fișierul php :

 funcția woocommerce_product_category( $args = array() ) {

    $woocommerce_category_id = get_queried_object_id();

  $args = matrice(

             'parent' => $woocommerce_category_id
  );

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

  dacă ( $termeni ) {

             echo '<ul class="woocommerce-categories">';

             foreach ( $term ca $term ) {

             echo '<li class="woocommerce-product-category-page">';

            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', 'woocommerce_product_category', 100 );

Acesta va fi rezultatul:

Cu toate acestea, are nevoie de ceva CSS personalizat pentru a afișa bine produsele. Vom face acest lucru mai târziu în acest tutorial.

Cum funcționează codul

Acest cod funcționează pur și simplu folosind funcția woocommerce_product_category() function care scoate categoriile sau subcategorii înainte de a rula bucla care scoate produsele. Poate suprascrie tema, deoarece funcția este conectabilă.

c) Listați subcategorii ale unei categorii de produse WooCommerce

Este foarte ușor să obțineți subcategoria categoriilor de produse WooCommerce utilizând o funcție personalizată care profită de categoria de produse părinte slug.

Pași pentru listarea subcategoriilor unei categorii de produse WooCommerce

Conectați-vă la site-ul dvs. WordPress și accesați tabloul de bord ca utilizator administrator.
Din meniul Dashboard, faceți clic pe Meniu Aspect > Editor de teme . Când pagina Editor de teme este deschisă, căutați fișierul cu funcțiile temei unde vom adăuga funcția care va enumera subcategorii unei categorii de produse WooCommerce.
Adăugați următorul cod în fișierul php :

 funcția woocommerce_get_product_category_of_subcategories( $category_slug ){

$terms_html = array();
$taxonomie = 'product_cat';
$parent = get_term_by( 'slug', $category_slug, $taxonomie );
$children_ids = get_term_children( $parent->term_id, $taxonomie);

foreach($children_ids ca $children_id){

    $term = get_term( $children_id, $taxonomie );

    $term_link = get_term_link( $term, $taxonomie);

    if ( is_wp_error( $term_link ) ) $term_link = '';

    $terms_html[] = '<a href="' . esc_url( $term_link ) . '" rel="tag" class="' . $term->slug . '">' . $term->nume . „</a>”;
}

returnează „<span class="subcategorii-' . $category_slug . '">' . implode( ', ', $terms_html ) . „</span>”;

}

Acesta va fi rezultatul:

Cum funcționează codul.

Obiectul WP_Term primește categoria de produse părinte. Apoi, primește ID-ul copilului într-o matrice și, în sfârșit, categoriile copil sunt afișate în HTML, rulând o buclă prin matricea ID-ului copilului.

d) Identificarea codului folosit de WooCommerce pentru a scoate categoriile și produsele în arhive

Înainte de a crea un plugin, primul pas este cu siguranță să identificăm modul în care WooCommerce scoate categorii și subcategorii. Aceasta înseamnă că trebuie să căutăm manual codul sursă WooCommerce pentru a găsi funcția relevantă.

Pentru a simplifica procesul pentru dvs., căutați pur și simplu archive-product.php , care se află în folderul șabloane. Acesta este fișierul pe care WooCommerce îl folosește pentru a afișa paginile de arhivă. Acum trebuie să găsiți codul care scoate categoriile și produsele:

 <?php
/**
* woocommerce_before_shop_loop hook
*
* @hooked woocommerce_result_count - 20
* @hooked woocommerce_catalog_ordering - 30
*/

do_action('woocommerce_before_shop_loop');
?>

<?php woocommerce_product_loop_start(); ?>

<?php woocommerce_product_subcategories(); ?>

<?php while ( have_posts() ): the_post(); ?>

<?php wc_get_template_part('conținut', 'produs'); ?>

<?php endwhile; // sfârșitul buclei. ?>

<?php woocommerce_product_loop_end(); ?>

Cum funcționează codul:

Funcția woocommerce_product_subcategories() function scoate categoriile sau subcategorii înainte de a rula bucla care scoate produsele. Motivul pentru care v-am atras atenția asupra acestei funcții este că este conectabilă, ceea ce înseamnă că am putea să o înlocuim în tema noastră.

Cu toate acestea, acest lucru nu va funcționa, deoarece WooCommerce are un stil încorporat pentru ștergerea articolelor, care ar apărea la începutul unui rând cu afișarea implicită. Deci ce ar trebui sa facem? Răspunsul este simplu. Trebuie să dezactivăm afișarea categoriilor și subcategoriilor pe paginile noastre de arhivă, astfel încât să fie afișate doar produsele.

După aceasta, următorul pas este să creați o nouă funcție care scoate categoriile sau subcategorii de produse și să o conectați la woocommerce_before_shop_loop action , asigurându-vă că folosim o prioritate ridicată, astfel încât să se declanșeze după funcțiile care sunt deja conectate la acțiunea respectivă.

Cu toate acestea, este important să rețineți că WooCommerce adaugă compensații la fiecare a treia listă de produse. Aceasta înseamnă că nu putem folosi funcția woocommerce_product_subcategories() function sau o versiune editată a acesteia pentru a afișa categoriile. Explicația pentru aceasta este că această funcție va șterge a treia, a șasea (și așa mai departe) categorie sau produs listat, chiar și atunci când folosim această funcție pentru a afișa categoriile separat. Aceasta înseamnă că trebuie să creăm o funcție care să o înlocuiască. Acest lucru se poate face prin crearea unui plugin.

e) Crearea pluginului

Mai întâi trebuie să creați un nou mai vechi și să îi dați un nume unic în directorul wp-content/plugins . Pentru acest exemplu, aveți grijă când urmați pașii, astfel încât să puteți obține funcționalitatea de care avem nevoie. Voi folosi acest nume njengah-separate-products-categories-in-archives .

În acest folder, trebuie să creați un fișier nou, din nou cu un nume unic. Voi folosi același nume și pentru acest folder njengah-separate-products-categories-in-archives.php .

Pași pentru crearea pluginului

Deschideți fișierul și adăugați următorul cod:

 <?php
/**
* Nume plugin: Categoria de produse WooCommerce
* Descriere: Afișați categoriile WooCommerce pe paginile produselor WooCommerce

**/

Înainte de a scrie funcția noastră, trebuie să dezactivați listele de categorii din ecranele de administrare, conectându-vă la site-ul dvs. WordPress și accesând tabloul de bord ca utilizator administrator.
Din meniul Tablou de bord, faceți clic pe Meniu Aspect > Personalizare. Faceți clic pe pagina Magazin și selectați WooCommerce > Catalog de produse. În opțiunea Afișare magazin , selectați Afișare produse . În opțiunea de afișare a categoriei , selectați Afișare produse .
Nu uitați să salvați modificările pe care le faceți.
Acesta va fi rezultatul :
Adăugați asta la fișierul plugin:

 funcția njengah_product_subcategories( $args = array()) {

}

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

Apoi trebuie să adăugați acest cod în funcție:

 $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>';

}

Acesta va fi rezultatul: Afișați produsele WooCommerce după categorie

După cum puteți vedea din imaginea de mai sus, categoriile nu sunt bine organizate. Aceasta înseamnă că trebuie să adăugăm stilul nostru personalizat. Cu toate acestea, înainte de asta, să aflăm cum funcționează codul.

Cum funcționează codul

Funcția pe care am creat-o identifică obiectul interogat curent și își definește id-ul ca $parentid . Apoi folosește get_terms() pentru a identifica termenii cu elementul interogat curent ca părinte. Dacă aceasta este pagina principală a magazinului, va returna categorii de nivel superior, iar dacă aceasta este o arhivă de categorii, va returna subcategorii.

Mai mult, funcția verifică dacă există termeni, înainte de a deschide un pentru fiecare buclă și un element ul . Aceasta înseamnă că pentru fiecare termen, creează un element li și apoi scoate category image using woocommerce_subcatgeory_thumbnail() , urmată de numele categoriei într-un link către arhiva acesteia.

Pași pentru stilarea listelor de categorii

Aceștia sunt pașii pe care trebuie să îi urmați, dar pentru a face acest lucru avem nevoie de o foaie de stil în interiorul pluginului nostru, pe care va trebui să o punem în coadă.

Creați un folder numit CSS și în interiorul acestuia, creați un fișier numit CSS. Acest lucru ar trebui făcut în folderul plugin pentru ca acest lucru să funcționeze .
Adăugați acest cod în partea de sus a funcției pe care ați creat-o deja:

 funcția njengah_product_cats_css() {




/* înregistrează foaia de stil */

wp_register_style( 'njengah _product_cats_css', plugins_url( 'css/style.css', __FILE__ ) );




/* pune în coadă foaia de stil */

wp_enqueue_style( 'njengah _product_cats_css');




}




add_action( 'wp_enqueue_scripts', 'njengah _product_cats_css');

Următorul pas este să deschideți foaia de stil și să adăugați codul de mai jos. Cu toate acestea, este important să rețineți că WooCommerce folosește stilul pe mobil, așa că acesta este ceea ce vom folosi și noi.

 ul.product-cats li {
stil-listă: niciunul;
margine-stânga: 0;
margine-jos: 4.236em;
text-align: centru;
poziție: relativă;
}

ul.product-cats li img {
marja: 0 auto;
}


Ecran @media și (lățime minimă: 768 px) {

ul.product-cats {
margine-stânga: 0;
clar: ambele;
}

ul.product-cats li {
latime: 29,4117647059%;
plutește la stânga;
marja-dreapta: 5,8823529412%;
}

ul.product-cats li:nth-of-type(3) {
margine-dreapta: 0;
}

}

Acesta va fi rezultatul:

Concluzie

În această postare, am evidențiat diferite moduri în care puteți afișa produsele WooCommerce pe categorii. Din acest scurt tutorial, puteți înțelege de ce categoriile de produse sunt o caracteristică excelentă în WooCommerce, dar modul în care sunt afișate nu este întotdeauna ideal.

În plus, ați învățat cum să creați un plugin care scoate categorii sau subcategorii de produse separat de listele de produse și cum să stilați listele de categorii. Cea mai remarcabilă parte a acestui tutorial este crearea pluginului personalizat care scoate o listă de categorii sau subcategorii pe pagină, prin conectarea funcției la un alt cârlig de acțiune în fișierul șablon WooCommerce.

Articole similare

Cum să eliminați Sortarea implicită a produselor WooCommerce
Cum să obțineți numele curent al categoriei de produse în WooCommerce
Cum să vinzi produse digitale cu WooCommerce
Cum să sortați categoriile WooCommerce pentru o experiență mai bună a utilizatorului
Cum să adăugați numere GTIN pe produse în WooCommerce
Ascundeți sau eliminați câmpul Cantitate din pagina produsului WooCommerce
Cum să ascundeți câmpul Cod cupon WooCommerce
Cum adăugați text înainte de preț în WooCommerce » Adăugați text înainte de preț
Cum să schimbați prețul produsului în mod programatic în WooCommerce
Cum să mutați descrierea sub imagine în WooCommerce
Cum să eliminați efectul de zoom pe imaginea produsului WooCommerce
Cum să adăugați o descriere după preț în WooCommerce
Cum să redimensionați imaginile produselor WooCommerce
Cum să ascundeți un produs în WooCommerce sau să ascundeți produsele după categorie sau roluri