Jak stworzyć widok listy produktów WooCommerce

Czy chcesz utworzyć widok listy produktów WooCommerce na swojej stronie internetowej? Są bardzo popularne, aby wyświetlać klientom więcej informacji o produkcie na samej stronie sklepu. Dlatego przedstawimy Ci samouczek krok po kroku, jak przełączyć się do widoku listy produktów w tym samouczku.

Ale zanim przejdziemy przez ten proces, zobaczmy, czego możesz potrzebować, aby utworzyć widok listy produktów.

Po co tworzyć widok listy produktów w WooCommerce?

Domyślnie produkty na stronie Twojego sklepu są wyświetlane w formie siatki. Tak, całkowicie zależą one również od aktywnego motywu Twojej witryny. Ale w przypadku większości motywów są one wyświetlane w postaci siatki z jednym produktem po drugim, jak kafelki.

Ale w widoku listy produkty są wyświetlane ze znacznie większą liczbą szczegółów. Każdy produkt jest wyświetlany jeden po drugim na pionowej liście z dodatkowymi informacjami , takimi jak szczegóły wysyłki, opis produktu i inne. Na przykład porównajmy widok siatki i widok listy sklepu internetowego Best Buy.

Domyślny widok siatki produktów na stronie jest reprezentowany w następujący sposób:

Nie można jednak bezpośrednio przełączyć się do widoku listy witryny. Ale jeśli chcesz zobaczyć więcej produktów, produkty zostaną wyświetlone w widoku listy w następującym układzie:

Widać wyraźnie, że więcej szczegółów produktu jest wyświetlanych w widoku listy niż w widoku siatki. Klienci mogą łatwo zobaczyć szczegóły wysyłki, model produktu i numery SKU, opcje porównywania i listy życzeń itd. w widoku listy. Natomiast w widoku siatki nie można dodać tych informacji, ponieważ spowoduje to, że witryna będzie wyglądać na przeciążoną.

W rzeczywistości, jeśli prowadzisz sklep internetowy z produktami hurtowymi, katalogami produktów lub systemem zamawiania restauracji , widok listy jest wygodniejszy dla Twoich klientów. Wszystkie niezbędne dane mogą zostać udostępnione Twoim klientom na jednej stronie. Dzięki temu nie będą musieli klikać poszczególnych stron produktów, aby wyświetlić dodatkowe informacje.

Jak stworzyć widok listy produktów WooCommerce?

Najłatwiejszym sposobem utworzenia widoku listy produktów WooCommerce jest użycie wtyczki . Wtyczki WordPress pomagają Twojej witrynie zwiększyć funkcjonalność i zwiększyć jej elastyczność. Podobnie można ich użyć do przeglądania produktów na liście.

Chociaż istnieje wiele wtyczek, które umożliwiają tworzenie widoku listy produktów, oto niektóre z najlepszych:

Widok siatki/listy dla WooCommerce

Widok siatki/listy dla WooCommerce to jedna z najlepszych darmowych wtyczek do tworzenia widoku listy produktów. Jest bardzo prosty w użyciu i po prostu dodaje przełącznik, aby włączyć widok listy lub siatki na stronie sklepu WooCommerce.

Wtyczka zapewnia również różne opcje dostosowywania stylu listy i siatki. Zapewnia zaawansowane opcje modyfikacji przycisku przełącznika siatki/listy, za pomocą którego można nawet zmienić jego pozycję. Podobnie produkty na stronie można również zmienić zgodnie z własnymi upodobaniami za pomocą tej wtyczki.

Kluczowe cechy:

• Przycisk przełączania listy i sieci
• Zaawansowane dostosowywanie przycisku przełącznika
• Opcje produktów na stronę
• Przyjazny dla krótkich kodów
• Kompatybilność z głównymi wtyczkami WooCommerce

Cena £:

Widok siatki/listy dla WooCommerce to darmowa wtyczka. Jest dostępny w oficjalnym repozytorium wtyczek WordPress.

Tabela produktów WooCommerce

Tabela produktów WooCommerce to wtyczka premium, która może pomóc w stworzeniu widoku listy produktów. Początkowo jest to jedna z wtyczek WooCommerce do projektowania tabeli w Twojej witrynie. Ale można go łatwo zmodyfikować, aby wyświetlać produkty w widoku listy tabelarycznej.

Wtyczka jest bardzo łatwa w konfiguracji i pozwala użytkownikom zamawiać wiele produktów jednocześnie. Zapewnia również wbudowaną opcję wyszukiwania i sortowania widoku listy. Może to być bardzo wygodna funkcja dla użytkowników, ponieważ mogą oni bardzo łatwo znaleźć pożądane produkty.

Kluczowe cechy:

• Opcja widoku listy tabelarycznej dla produktów
• Natychmiastowe wyszukiwanie produktów i opcje sortowania
• Szybkie zamawianie jednej strony
• Łatwy w użyciu interfejs
• Szybkie przyciski „Dodaj do koszyka”

Cena £:

Tabela produktów WooCommerce to wtyczka premium, która zaczyna się od 499 USD rocznie. Obejmuje 20 licencji na witrynę z 30-dniową gwarancją zwrotu pieniędzy i priorytetowym wsparciem.

Teraz, gdy przyjrzeliśmy się kilku wtyczkom, omówimy również, jak z nich korzystać. Ale zanim zaczniemy, upewnij się, że poprawnie skonfigurowałeś WooCommerce, nie pomijając żadnych kroków i użyj jednego z kompatybilnych motywów WooCommerce.

Utwórz widok listy produktów WooCommerce za pomocą wtyczki

Aby utworzyć widok listy produktów WooCommerce, w tej demonstracji użyjemy widoku siatki/listy dla WooCommerce . Jest to bezpłatne, bardzo łatwe w użyciu i proste rozwiązanie do tworzenia widoku listy produktów.

Ale aby zacząć korzystać z dowolnej wtyczki, musisz ją najpierw zainstalować i aktywować.

1. Zainstaluj i aktywuj wtyczkę

Aby zainstalować wtyczkę, przejdź do Wtyczki> Dodaj nowy z pulpitu WordPress. Następnie wyszukaj słowa kluczowe dla wtyczki i kliknij Zainstaluj teraz , gdy ją znajdziesz.

Po chwili instalacja zostanie zakończona. Na koniec Aktywuj wtyczkę po jej zainstalowaniu.

Jeśli chcesz korzystać z wtyczki premium, musisz ją przesłać i zainstalować ręcznie. Aby uzyskać więcej informacji, zapoznaj się z naszym szczegółowym przewodnikiem, aby ręcznie zainstalować wtyczkę WordPress.

2. Skonfiguruj ustawienia wtyczki

Po aktywacji wtyczki możesz skonfigurować jej ustawienia, aby utworzyć widok listy produktów WooCommerce. Otwórz BeRocket > Widok siatki/listy z pulpitu WordPress. Będziesz mieć dostęp do wszystkich opcji dostosowywania widoku listy produktów tutaj.

Trzy główne dostosowania obejmują przyciski, liczbę produktów i niestandardowy CSS.

2.1. Opcje przycisków

Wtyczka zapewnia mnóstwo dostosowań przycisków, aby przełączać siatkę lub widok listy produktów.

Opcje ogólne obejmują domyślne style przycisków dla widoku na komputery i urządzenia mobilne w Twojej witrynie. Możesz również dodać do strony stały styl przycisku. Podobnie możesz dostosować pozycje przycisków, które mają być wyświetlane na stronie od lewej, prawej strony, nad menu lub paginacją albo tuż pod menu.

Wraz z tymi opcjami możesz również edytować maksymalną szerokość urządzenia mobilnego, niestandardową klasę i dopełnienie przycisku.

Ponadto w wtyczce dostępnych jest więcej ustawień i stylów przycisków. Możesz wybrać obecny przycisk i edytować go bardziej za pomocą szczegółowych opcji ustawień wstępnych. Co więcej, możesz także zmienić style przycisków z szerokością przycisku, wysokością, rozmiarem tekstu, wysokością linii i innymi.

Dodatkowo możesz także dostosować zwykły przycisk, przycisk myszy nad przyciskiem i wybrane style przycisków. Każda zawiera korekty koloru tła, szerokości i koloru obramowania oraz opcji cieni.

Dokonaj wszystkich niezbędnych modyfikacji i kliknij Zapisz zmiany .

2.2. Opcje liczenia produktów

Możesz także dostosować opcje liczby produktów za pomocą wtyczki Grid/List View for WooCommerce podczas tworzenia widoku listy produktów. Po pierwsze, możesz włączyć lub wyłączyć korzystanie z liczby produktów.

Jeśli ją włączysz, możesz dalej dodawać dane wejściowe dla produktów na stronę, wartość liczby produktów i wartość rozdzielacza. Tutaj można również ustawić pozycję liczby produktów wraz z własnymi opcjami przycisków i miejscem ich wyświetlania.

2.3. Niestandardowy CSS/JavaScript

Wtyczka umożliwia również dodawanie niestandardowego kodu CSS lub JavaScript podczas tworzenia widoku listy produktów WooCommerce. Istnieją wyznaczone pola skryptów, w których można dodać niestandardowy CSS i JavaScript. JavaScript można dodać w różnych okolicznościach, np. przed lub po zestawieniu listy lub stylu siatki, plikach cookie, wybranych przyciskach siatki/listy i tak dalej.

Możesz także wyłączyć pliki Font Awesome CSS tutaj lub wybrać wersję Font Awesome.

Po dodaniu wymaganego niestandardowego kodu CSS lub JavaScript nie zapomnij zapisać zmian .

Po wyświetleniu podglądu strony sklepu będziesz mógł zobaczyć przełącznik do przełączania między widokiem siatki a widokiem listy. Tutaj pokazana jest również liczba produktów, a opis produktu jest również dołączony do produktów.

Jak pokazano na poniższej demonstracji, możesz przełączyć się do widoku listy produktów, klikając przycisk widoku listy .

Twoi klienci mogą nawet wrócić do widoku siatki, jeśli muszą. Wystarczy kliknąć przycisk widoku siatki .

Otóż ​​to! W ten sposób możesz utworzyć widok listy produktów WooCommerce i umożliwić swoim klientom przełączanie się między widokiem siatki a widokiem listy.

Bonus: Włącz tryb katalogu w WooCommerce

Przedstawiliśmy Ci już jeden z najprostszych sposobów tworzenia widoku listy produktów WooCommerce. Są bardzo przydatne do zaprezentowania Twoich produktów na stronie katalogu. Jednak, aby pomóc Ci włączyć tryb katalogu w WooCommerce , jako bonus udostępnimy Ci również prosty przewodnik.

Aby to zrobić, musisz dodać kilka fragmentów kodu do pliku functions.php w swojej witrynie, który jest jednym z podstawowych plików motywu. Dlatego utwórz motyw podrzędny dla następnych kroków i utwórz kopię zapasową swojej witryny, aby zmiany zostały zapisane podczas aktualizacji motywu WordPress. Jeśli potrzebujesz pomocy, możesz również użyć jednej z wtyczek motywu potomnego do WordPress, aby utworzyć motyw potomny.

Po aktywowaniu motywu potomnego przejdź do opcji Wygląd > Edytor plików motywu i otwórz plik functions.php motywu. Następnie możesz zacząć dodawać fragmenty kodu na końcu edytora i zaktualizować plik .

Pliki motywów zależą od aktywnego motywu Twojej witryny. Użyliśmy tutaj motywu Divi, więc Twój edytor może wyglądać nieco inaczej.

Najpierw musisz usunąć przycisk Dodaj do koszyka, a następnie ukryć ceny produktów. Dlatego musisz dodać następujące fragmenty kodu w edytorze.

1. Usuń przycisk Dodaj do koszyka

Możesz użyć poniższego skryptu, aby ukryć przycisk dodawania do koszyka na stronie sklepu i stronie produktu. Po prostu wklej go do pliku functions.php swojego motywu.

 remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

Ta funkcja usunie stronę dodawania do koszyka zarówno dla strony produktu WooCommerce, jak i strony sklepu.

Jeśli chcesz, aby produkty nie można było kupić , możesz również dodać następujący fragment kodu.

 add_filter( 'woocommerce_is_purchasable', '__return_false');

Zastąpi również przycisk dodawania do koszyka przyciskiem „Czytaj więcej”.

2. Ukryj ceny produktów

Ceny produktów możesz ukryć na różne sposoby w WooCommerce. Mogą być ukryte dla wszystkich użytkowników lub wszystkich oprócz administratora.

Jeśli chcesz ukryć ceny produktów dla wszystkich użytkowników , użyj następującego skryptu:

 add_filter( 'woocommerce_get_price_html', 'QuadLayers_remove_price');
funkcja QuadLayers_remove_price($cena){
zwrócić ;
}

Ewentualnie, jeśli chcesz ukryć ceny dla wszystkich oprócz administratora , użyj następującego fragmentu kodu:

 add_filter( 'woocommerce_get_price_html', 'QuadLayers_remove_price');
funkcja QuadLayers_remove_price($cena){
if ( is_admin() ) zwraca $cenę;
zwrócić ;
} 

Ponadto w razie potrzeby możesz również ukryć produkty tylko na stronie sklepu . Wszystko, co musisz zrobić, to wkleić następujący fragment kodu do pliku functions.php

 add_filter( 'woocommerce_after_shop_loop_item_title', 'remove_woocommerce_loop_price', 2 );
funkcja remove_woocommerce_loop_price() {
if( ! is_shop() ) return; // Ukryj ceny tylko na stronie sklepu
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
}

Dobra robota! Możesz teraz utworzyć widok listy produktów WooCommerce i poprawnie włączyć tryb katalogu w swojej witrynie. Jeśli potrzebujesz alternatywnych metod wyświetlania trybu katalogu, mamy szczegółowy przewodnik po włączeniu trybu katalogu w WooCommerce. Podobnie, jeśli potrzebujesz więcej informacji, aby usunąć przycisk dodawania do koszyka lub ukryć ceny w WooCommerce, również je omówiliśmy.

Wniosek

Mamy nadzieję, że już teraz jesteś w stanie stworzyć listę produktów WooCommerce dla swojego sklepu internetowego. Możesz łatwo użyć dedykowanej wtyczki, aby umożliwić klientom przejście do widoku listy produktów. Wtyczki umożliwiają nawet przełączenie się z powrotem do widoku siatki, jeśli to konieczne, wraz z wieloma innymi opcjami dostosowywania.

Udostępniliśmy Ci również kilka podstawowych kroków, aby dostosować stronę sklepu, włączyć tryb katalogu w Twojej witrynie, w którym możesz również wyświetlić widok listy produktów. Jeśli chcesz wprowadzić zmiany na kilku innych stronach WooCommerce, możesz także dostosować stronę koszyka, stronę kategorii, a nawet stronę kasy za pomocą wtyczek, takich jak WooCommerce Checkout Manager.

Czy możesz bez problemu dodać widok listy produktów w swoim sklepie internetowym? Czy kiedykolwiek tego próbowałeś? Daj nam znać w komentarzach.

Tymczasem oto kilka naszych artykułów, które mogą Cię zainteresować:

• Jak dostosować galerię produktów WooCommerce
• Zmień brak produktów w koszyku Wiadomość
• Jak dodać obraz produktu do kasy WooCommerce?