Jak wyświetlać produkty WooCommerce według kategorii?

Opublikowany: 2020-08-16

Produkty wyświetlania WooCommerce według kategorii Prowadzisz sklep WooCommerce i chcesz wyświetlać produkty według kategorii w WordPressie? Ten post zawiera szczegółowe wyjaśnienie, jak wyświetlać produkty WooCommerce według kategorii. Jeśli znasz WooCommerce, wiesz, że kategorie produktów odgrywają ważną rolę w organizowaniu Twoich produktów pod kątem prawidłowego wyświetlania i dostępu dla Twoich klientów.

Wyświetlaj produkty WooCommerce według kategorii

Od razu po wyjęciu z pudełka, WooCommerce daje kilka opcji dotyczących tego, co możesz wyświetlać na stronach archiwum, takich jak produkty, kategorie lub podkategorie lub zarówno produkty, jak i kategorie . Jednak większość użytkowników WooCommerce wybiera trzecią opcję wyświetlania zarówno produktów, jak i kategorii/podkategorii. sortuj kategorie woocommerce

Ta opcja pozwoli odwiedzającemu wybrać produkty bezpośrednio na stronie głównej lub zawęzić wyszukiwanie, klikając archiwum kategorii produktów.

Jednak głównym minusem tego jest to, że wyświetla kategorie/podkategorie razem, bez rozdzielenia między nimi. To sprawia, że ​​układ wygląda nieco bałaganiowo ze względu na różne wymiary obrazu.

Z punktu widzenia eksperta, nawet jeśli Twoje obrazy są tego samego rozmiaru, jeśli jeden z wierszy na stronie archiwum zawiera zarówno kategorie, jak i produkty, brak przycisku „Dodaj do koszyka” dla kategorii powoduje, że ten wiersz wygląda na zdezorganizowany, ponieważ nie wszystkie jego elementy mają takie same wymiary.

W tym krótkim samouczku dowiesz się, jak wyświetlać kategorie na osobnej liście przed wyświetleniem produktów.

  • Zidentyfikuj lub rozróżnij kod w WooCommerce, który służy do wyświetlania kategorii i podkategorii na stronach archiwum.
  • Utwórz niestandardową wtyczkę do kodu.
  • Napisz funkcję, która będzie umieszczać kategorie lub podkategorie przed listami produktów.
  • Utwórz niestandardową stylizację danych wyjściowych.

a) Wyświetlaj zarówno produkty, jak i kategorie lub podkategorie

Kroki, aby wyświetlić zarówno produkty, jak i kategorie lub podkategorie.

  1. Zaloguj się do swojej witryny WordPress i uzyskaj dostęp do pulpitu nawigacyjnego jako administrator.
  2. Z menu Dashboard kliknij menu Wygląd > Dostosuj. Kliknij na stronę Sklepu i wybierz WooCommerce > Katalog produktów. W opcji Wyświetl w sklepie wybierz Pokaż kategorie i produkty . W opcji wyświetlania kategorii wybierz Pokaż podkategorie i produkty, jak pokazano poniżej: Wyświetlaj produkty WooCommerce według kategorii
  3. Pamiętaj o zapisaniu wprowadzonych zmian.
  4. To będzie wynik : Wyświetlaj produkty WooCommerce według kategorii

b) Wyświetl kategorię produktów WooCommerce

Możesz jednak wyświetlić kategorię produktów WooCommerce za pomocą poniższego fragmentu kodu, który należy umieścić w pliku functions.php.

Kroki, aby wyświetlić kategorię produktów WooCommerce

Oto kroki, które powinieneś wykonać:

  1. Zaloguj się do swojej witryny WordPress i uzyskaj dostęp do pulpitu nawigacyjnego jako administrator.
  2. Z menu Dashboard kliknij Wygląd Menu > Edytor motywów Po otwarciu strony Edytor motywów poszukaj pliku funkcji motywu, w którym dodamy funkcję, która wyświetli kategorię Produkt WooCommerce.
  3. Dodaj następujący kod do pliku php :
 function woocommerce_product_category( $args = array() ) {

    $woocommerce_category_id = get_queried_object_id();

  $argumenty = tablica(

             'rodzic' => $woocommerce_category_id
  );

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

  jeśli ( $warunki ) {

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

             foreach ( $terms jako $term ) {

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

            woocommerce_subcategory_thumbnail( $term );

             echo '<h2>';

             echo '<a href="'. esc_url(get_term_link($term)).'" class="'. $term->slug. '">';

             echo $term->nazwa;

             echo '</a>';

             echo '</h2>';

             echo '</li>';

             }

             echo '</ul>';

  }

}

add_action( 'woocommerce_before_shop_loop', 'woocommerce_product_category', 100 );
  1. To będzie wynik: Wyświetlaj produkty WooCommerce według kategorii

Potrzebuje jednak niestandardowego kodu CSS, aby dobrze wyświetlać produkty. Zrobimy to później w tym samouczku.

Jak działa kod

Ten kod działa po prostu za pomocą funkcji woocommerce_product_category() function która wyprowadza kategorie lub podkategorie przed uruchomieniem pętli, która wyprowadza produkty. Może zastąpić motyw, ponieważ funkcja jest podłączana.

c) Lista podkategorii kategorii produktów WooCommerce

Bardzo łatwo jest uzyskać podkategorię kategorii produktów WooCommerce za pomocą niestandardowej funkcji, która wykorzystuje ślimak nadrzędnej kategorii produktów.

Kroki, aby wyświetlić podkategorie kategorii produktów WooCommerce

  1. Zaloguj się do swojej witryny WordPress i uzyskaj dostęp do pulpitu nawigacyjnego jako administrator.
  2. Z menu Dashboard kliknij menu Wygląd > Edytor motywów . Po otwarciu strony Edytor motywów poszukaj pliku funkcji motywu, w którym dodamy funkcję wyświetlającą podkategorie kategorii produktów WooCommerce.
  3. Dodaj następujący kod do pliku php :
 funkcja woocommerce_get_product_category_of_subcategories( $category_slug ){

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

foreach($children_ids jako $children_id){

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

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

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

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

return '<span class="subcategories-' . $category_slug . '">' . implode( ', ', $terms_html) . '</span>';

}
  1. To będzie wynik: Lista podkategorii kategorii produktów WooCOMmerce

Jak działa kod.

Obiekt WP_Term pobiera rodzica kategorii produktu. Następnie pobiera identyfikator podrzędny w tablicy, a na końcu kategorie podrzędne są wyświetlane w kodzie HTML, uruchamiając pętlę przez tablicę identyfikatorów podrzędnych.

d) Identyfikacja kodu używanego przez WooCommerce do wyświetlania kategorii i produktów w archiwach

Zanim stworzymy wtyczkę, pierwszym krokiem jest zdecydowanie określenie, w jaki sposób WooCommerce generuje kategorie i podkategorie. Oznacza to, że musimy ręcznie poszukać kodu źródłowego WooCommerce, aby znaleźć odpowiednią funkcję.

Aby uprościć ten proces, po prostu poszukaj archive-product.php , które znajduje się w folderze szablonów. Jest to plik, którego WooCommerce używa do wyświetlania stron archiwum. Teraz musisz znaleźć kod, który wyświetla kategorie i produkty:

 <?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( 'zawartość', 'produkt' ); ?>

<?php koniec; // koniec pętli. ?>

<?php woocommerce_product_loop_end(); ?>

Jak działa Kodeks:

Funkcja woocommerce_product_subcategories() function wyprowadza kategorie lub podkategorie przed uruchomieniem pętli, która wyprowadza produkty. Powodem, dla którego zwróciłem uwagę na tę funkcję, jest to, że można ją podłączyć, co oznacza, że ​​możemy ją zastąpić w naszym motywie.

To jednak nie zadziała, ponieważ WooCommerce ma wbudowaną stylizację do czyszczenia elementów, która pojawiałaby się na początku wiersza z domyślnym wyświetlaczem. Więc co powinniśmy zrobić? Odpowiedź jest prosta. Musimy wyłączyć wyświetlanie kategorii i podkategorii na naszych stronach archiwum, aby wyświetlane były tylko produkty.

Następnym krokiem jest utworzenie nowej funkcji, która wyprowadza kategorie produktów lub podkategorie i powiązanie jej z woocommerce_before_shop_loop action , upewniając się, że używamy wysokiego priorytetu, aby była uruchamiana po funkcjach, które są już podłączone do tej akcji.

Należy jednak pamiętać, że WooCommerce dodaje wyraźne informacje do każdej trzeciej listy produktów. Oznacza to, że nie możemy użyć funkcji woocommerce_product_subcategories() function ani jej edytowanej wersji do wyświetlenia kategorii. Wyjaśnienie tego jest takie, że ta funkcja wyczyści trzecią, szóstą (i tak dalej) kategorię lub produkt na liście, nawet jeśli użyjemy tej funkcji do oddzielnego wyświetlania kategorii. Oznacza to, że musimy stworzyć funkcję, która ją zastąpi. Można to zrobić, tworząc wtyczkę.

e) Tworzenie wtyczki

Musisz najpierw utworzyć nowy starszy i nadać mu unikalną nazwę w katalogu wp-content/plugins . W tym przykładzie zachowaj ostrożność podczas wykonywania kroków, aby osiągnąć potrzebną nam funkcjonalność. Będę używał tej nazwy njengah-separate-products-categories-in-archives .

Wewnątrz tego folderu musisz utworzyć nowy plik, ponownie o unikalnej nazwie. Będę używał tej samej nazwy dla tego folderu njengah-separate-products-categories-in-archives.php .

Kroki tworzenia wtyczki

  1. Otwórz plik i dodaj następujący kod:
 <?php
/**
* Nazwa wtyczki: Kategoria produktu WooCommerce
* Opis: Wyświetlaj kategorie WooCommerce na stronach produktów WooCommerce

**/
  1. Przed napisaniem naszej funkcji musisz wyłączyć wyświetlanie kategorii na ekranach administracyjnych, logując się do witryny WordPress i uzyskując dostęp do pulpitu nawigacyjnego jako administrator.
  2. Z menu Dashboard kliknij menu Wygląd > Dostosuj. Kliknij na stronę Sklepu i wybierz WooCommerce > Katalog produktów. W opcji Wyświetl w sklepie wybierz Pokaż produkty . W opcji wyświetlania kategorii wybierz Pokaż produkty .
  3. Pamiętaj o zapisaniu wprowadzonych zmian.
  4. To będzie wynik : Wyświetlaj produkty WooCommerce według kategorii
  5. Dodaj to do pliku wtyczki:
 function njengah_product_subcategories( $args = array()) {

}

add_action( 'woocommerce_before_shop_loop', 'njengah_product_subcategories', 50 );
  1. Następnie musisz dodać ten kod w funkcji:
  2.  $parentid = get_queried_object_id();

$argumenty = tablica(

'rodzic' => $id_rodzica

);

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

jeśli ( $warunki ) {

echo '<ul class="product-cats">';

foreach ( $terms jako $term ) {

echo '<li class="category">';

woocommerce_subcategory_thumbnail( $term );

echo '<h2>';

echo '<a href="'. esc_url(get_term_link($term)).'" class="'. $term->slug. '">';

echo $term->nazwa;

echo '</a>';

echo '</h2>';

echo '</li>';

}

echo '</ul>';

}

    To będzie wynik: Wyświetlaj produkty WooCommerce według kategorii

Jak widać na powyższym obrazku, kategorie nie są dobrze zorganizowane. Oznacza to, że musimy dodać naszą niestandardową stylizację. Jednak wcześniej nauczmy się, jak działa kod.

Jak działa kod

Utworzona przez nas funkcja identyfikuje aktualnie odpytywany obiekt i definiuje jego identyfikator jako $parentid . Następnie używa get_terms() do identyfikowania terminów z aktualnie poszukiwanym elementem jako ich rodzicem. Jeśli jest to strona główna sklepu, zwróci kategorie najwyższego poziomu, a jeśli jest to archiwum kategorii, zwróci podkategorie.

Ponadto funkcja sprawdza, czy istnieją jakieś terminy, przed otwarciem pętli for each i elementu ul . Oznacza to, że dla każdego terminu tworzy element li , a następnie wyprowadza category image using woocommerce_subcatgeory_thumbnail() , po którym następuje nazwa kategorii w linku do jej archiwum.

Kroki stylizacji aukcji kategorii

Oto kroki, które musisz wykonać, ale aby to zrobić, potrzebujemy arkusza stylów w naszej wtyczce, który będziemy musieli umieścić w kolejce.

  1. Utwórz folder o nazwie CSS , a wewnątrz niego utwórz plik o nazwie CSS. Aby to zadziałało, należy to zrobić w folderze wtyczek .
  2. Dodaj ten kod u góry funkcji, którą już utworzyłeś:
 funkcja njengah_product_cats_css() {




/* zarejestruj arkusz stylów */

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




/* umieść arkusz stylów w kolejce */

wp_enqueue_style ( ' njengah _product_cats_css ' );




}




add_action( 'wp_enqueue_scripts', 'njengah _product_cats_css' );
  1. Następnym krokiem jest otwarcie arkusza stylów i dodanie poniższego kodu. Należy jednak pamiętać, że WooCommerce używa stylizacji mobile-first, więc tego też będziemy używać.
 ul.produkt-koty li {
styl listy: brak;
margines lewy: 0;
margines-dolny: 4.236em;
wyrównanie tekstu: środek;
pozycja: względna;
}

ul.produkt-koty li img {
margines: 0 auto;
}


@media screen i (min-szerokość:768px) {

ul.produkt-koty {
margines lewy: 0;
oba czyste;
}

ul.produkt-koty li {
szerokość: 29.4117647059%;
pływak: lewy;
marża prawa: 5,8823529412%;
}

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

}
  1. To będzie wynik: Wyświetlaj produkty WooCommerce według kategorii

Wniosek

W tym poście podkreśliłem różne sposoby wyświetlania produktów WooCommerce według kategorii. Z tego krótkiego samouczka możesz zrozumieć, dlaczego kategorie produktów są świetną funkcją w WooCommerce, ale sposób ich wyświetlania nie zawsze jest idealny.

Ponadto nauczyłeś się tworzyć wtyczkę, która wyświetla kategorie produktów lub podkategorie oddzielnie od list produktów oraz jak stylizować listy kategorii. Najwybitniejszą częścią tego samouczka jest stworzenie niestandardowej wtyczki, która wyświetla listę kategorii lub podkategorii na stronie, podłączając funkcję do innego haka akcji w pliku szablonu WooCommerce.

Podobne artykuły

  1. Jak usunąć domyślne sortowanie produktów WooCommerce?
  2. Jak uzyskać aktualną nazwę kategorii produktu w WooCommerce?
  3. Jak sprzedawać produkty cyfrowe za pomocą WooCommerce
  4. Jak sortować kategorie WooCommerce w celu lepszego doświadczenia użytkownika?
  5. Jak dodać numery GTIN do produktów w WooCommerce?
  6. Ukryj lub usuń pole ilości na stronie produktu WooCommerce
  7. Jak ukryć pole kodu kuponu WooCommerce?
  8. Jak dodać tekst przed ceną w WooCommerce »Dodaj tekst przed ceną
  9. Jak programowo zmienić cenę produktu w WooCommerce?
  10. Jak przenieść opis pod obraz w WooCommerce?
  11. Jak usunąć efekt powiększenia na obrazie produktu WooCommerce?
  12. Jak dodać opis po cenie w WooCommerce
  13. Jak zmienić rozmiar obrazów produktów WooCommerce?
  14. Jak ukryć produkt w WooCommerce lub ukryć produkty według kategorii lub ról