Wyświetlanie produktów WooCommerce z użyciem WP_Query

Wpis ten stanowi uzupełnienie do mojego poprzedniego artykułu opisującego pobieranie danych produktów WooCommerce z użyciem WP_Query. Skoro umiemy już pobierać dane, to warto byłoby je wyświetlić w naszym motywie.

Bazą dla naszych przykładów będzie poniższy kod, który opisywałem już we wspomnianym artykule o pobieraniu danych:

<?php
$params = array('posts_per_page' => 5, 'post_type' => 'product');
$wc_query = new WP_Query($params);
?>
<?php if ($wc_query->have_posts()) : ?>
    <?php while ($wc_query->have_posts()) :
                $wc_query->the_post(); ?>
        <?php the_title(); ?>
    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
<?php else:  ?>
<p><?php _e( 'Brak produktów' ); ?></p>
<?php endif; ?>

Ponieważ produkty WooCommerce są po prostu wpisami typu product to podstawowe ich informacje możemy wyświetlić z użyciem standardowych funkcji takich jak:

the_title() – nazwa produktu
the_excerpt() – skrócony opis produktu
the_content() – pełna treść opisu produktu
the_permalink() – URL do produktu
the_ID() – ID produktu
the_post_thumbnail() – zdjęcie produktu

Przykładowe wykorzystanie powyższych funkcji:

<?php
$params = array('posts_per_page' => 5, 'post_type' => 'product');
$wc_query = new WP_Query($params);
?>
<ul>
<?php if ($wc_query->have_posts()) : ?>
    <?php while ($wc_query->have_posts()) :
                $wc_query->the_post(); ?>
    <li>
       <h3>
             <a href="<?php the_permalink(); ?>">
             <?php the_title(); ?>
             </a>
       </h3>
<?php the_post_thumbnail(); ?>
<?php the_excerpt(); ?>
</li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<li><?php _e( 'Brak produktów' ); ?></li>
<?php endif; ?>
</ul>

Jednak WooCommerce posiada też wiele innych elementów, które na pewno warto wyświetlać w określonych rodzajach list produktów. Poniżej kilka przykładów wraz z kodem do wstawienia w pętli wyświetlającej produkty:

Zdobycie danych produktu

Wiele z poniższych przykładów wykorzystuje dodatkowe dane i metody dostępne w obiektach klasy WC_Product – aby stworzyć obiekt tej klasy dla danego produktu musimy wywołać następujący kod w pętli wyświetlającej nasze produkty:

$product = new WC_Product(get_the_ID());

Alternatywnie można wykorzystać funkcję get_product:

$product = get_product(get_the_ID());

Cena produktu

Cenę produktu najprościej wyświetlić poprzez metodę get_price_html:

echo $product->get_price_html();

Przy czym należy pamiętać o tym, że w zależności od tego czy produkt jest przeceniony lub nie otrzymamy trochę inne struktury HTML.

Dodatkowo możemy mieć potrzebę wykorzystania innego sposobu wyświetlania cen. Dlatego warto zapoznać się z następującymi metodami:

$product->get_sale_price() – zwraca cenę promocyjną (bez podatku)
$product->get_regular_price() – zwraca cenę normalna (bez podatku)
$product->get_price() – zwraca aktywną cenę (bez podatku)
$product->get_price_excluding_tax() – zwraca aktywną cenę bez podatku
$product->get_price_including_tax() – zwraca aktywną cenę z podatkiem
wc_price() – dodaje symbol waluty do zadanej ceny (powyższe funkcjie zwracają cenę bez symbolu waluty)

Zatem przykładowo chcąc pokazać cenę promocyjną z podatkiem i symbolem waluty, musimy użyć poniższego kodu:

echo wc_price($product->get_price_including_tax(1, $product->get_sale_price()));

W tym miejscu warto dodać, że jako pierwszy argument metody get_price_including_tax / get_price_excluding_tax przyjmują liczbę produktów – w naszym wypadku 1.

Jak widać kosztem dużo dłuższego kodu mamy pełną kontrolę nad sposobem wyświetlania cen.

Ocena produktu

Ocenę produktu, podobnie jak cenę, możemy wyświetlić bardzo prosto, korzystając z metody get_rating_html():

echo $product->get_rating_html();

Jednak w tym wypadku jesteśmy skazani na standardową strukturę HTML ocen WooCommerce. Alternatywnie możemy z użyciem metodget_rating_count() (zwraca liczbę ocen) oraz get_average_rating() (zwraca ocenę produktu na bazie ocen użytkowników) stworzyć własną strukturę do wyświetlania ocen.

Liczba recenzji produktu

Liczbę recenzji produktu wyświetlimy poprzez metodę get_review_count():

echo $product->get_review_count();

Polecam opakować tą wartość w link do strony produktu i elementu #reviewsw niej, dzięki czemu od razu po kliknięciu linka pojawią się opinie na temat produktu:

<a href="<?php the_permalink(); ?>#reviews">
    Opinie: <?php echo $product->get_review_count(); ?>
</a>

Wyróżnianie produktów

Do odróżnienia wybranych produktów od innych można wykorzystać następujące metody:

$product->is_on_sale() – dla produktów w cenach wyprzedażowych
$product->is_featured() – dla produktów wyróżnionych
$product->is_in_stock() – dla produktów będących na magazynie
$product->is_sold_individually() – dla produktów sprzedawanych pojedynczo
$product->is_downloadable() – dla produktów, które są dostępne do pobrania
$product->is_virtual() – dla produktów cyfrowych

Przykładowy kod:

<?php if($product->is_on_sale()) : ?>
<strong><?php _e('Wyprzedaż', 'my-theme'); ?></strong>
<?php endif; ?>

Przycisk dodaj do koszyka

Na koniec chyba najbardziej przydatne zagadnienie – czyli dodawanie produktu do koszyka.

Zacznijmy od bazowego koszyka:

<form class="cart" method="post" enctype="multipart/form-data">
     <input type="hidden" name="add-to-cart" value="<?php echo esc_attr($product->id); ?>">
     <button type="submit">
         <?php echo $product->single_add_to_cart_text(); ?>
     </button>
</form>

Jak łatwo się domyślić kluczowym elementem jest tutaj ukryte pole o nazwie add-to-cart, które jako wartość przechowuje ID produktu.

Warto pamiętać, że koszyka w tej formie możemy używać tylko wtedy gdy mamy jakiś ajaksowo odświeżany koszyk w motywie – inaczej istnieje duża szansa na to, że użytkownik nie zobaczy żadnego komunikatu o dodaniu produktu do koszyka.

Dlatego osobiście stosuję przekierowanie na stronę produktu z użyciem atrybutu action i funkcji the_permalink():

<form class="cart" action="<?php the_permalink() ?>" method="post" enctype="multipart/form-data">
     <input type="hidden" name="add-to-cart" value="<?php echo esc_attr($product->id); ?>">
     <button type="submit"><?php echo $product->single_add_to_cart_text(); ?></button>
</form>

Dodatkowo możemy też dodać pole do określania liczby produktów:

<form class="cart" action="<?php the_permalink() ?>" method="post" enctype="multipart/form-data">
    <div class="quantity">
         <input type="number" step="1" min="1" max="9" name="quantity" value="1" title="<?php _e('Szt.', 'my-theme'); ?>" class="input-text qty text" size="4">
    </div>
    <input type="hidden" name="add-to-cart" value="<?php echo esc_attr($product->id); ?>">
    <button type="submit"><?php echo $product->single_add_to_cart_text(); ?></button>
</form>

Na koniec cały kod koszyka warto opatrzyć w dwa dodatkowe warunki – przycisk nie może się pokazywać, gdy produktu nie można kupić oraz wtedy gdy ma warianty – wtedy użytkownik powinien być przeniesiony na stronę produktu. Cały kod wraz z obsługą tych dwóch przypadków widoczny jest poniżej:

<?php if($product->has_child()) : ?>
<a href="<?php the_permalink(); ?>"><?php _e('Zobacz dostępne warianty', 'my-theme'); ?></a>
<?php elseif($product->is_in_stock()) : ?>
<form class="cart" action="<?php the_permalink() ?>" method="post" enctype="multipart/form-data">
    <div class="quantity">
         <input type="number" step="1" min="1" max="9" name="quantity" value="1" title="<?php _e('Szt.', 'my-theme'); ?>" class="input-text qty text" size="4">
    </div>
    <input type="hidden" name="add-to-cart" value="<?php echo esc_attr($product->id); ?>">
    <button type="submit"><?php echo $product->single_add_to_cart_text(); ?></button>
</form>
<?php endif; ?>

Podsumowanie

Pokazane w powyższym wpisie funkcje klasy WC_Product, to tylko część jej prawdziwych możliwości. Zachęcam do lektury dokumentacji by poznać pozostałe pola i metody tej użytecznej części API wtyczki WooCommerce.