Jak zmienić stronę sklepu WooCommerce (opcje i personalizacja)
Opublikowany: 2024-05-21Będąc jedną ze standardowych stron WooCommerce, strona sklepu może zawierać dodatkowe ustawienia. W tym artykule możesz przeczytać o podstawach strony sklepu WooCommerce, ustawianiu funkcji, opcjach, skrótach, zaawansowanym dostosowywaniu i sposobie zmiany strony.
Spis treści
- Dostosowywanie strony sklepu WooCommerce (podstawy)
- Wyświetlanie produktów i dodawanie skrótów
- Dostosowywanie strony sklepu (więcej opcji)
Dostosowywanie strony sklepu WooCommerce (podstawy)
Domyślnie WooCommerce używa strony sklepu do wyświetlania produktów.
Dość łatwo jest ustawić układ strony (ilość produktów, kolumn), który może zależeć również od tematu.
Na przykład Storefront zapewnia stronie sklepu WooCommerce następujące opcje projektowania strony.
Przejdźmy do procesu i miejsc konfiguracji strony sklepu WooCommerce.
Wybór strony
Najpierw możesz sprawdzić zakładkę WooCommerce → Ustawienia → Produkty . Istnieją ustawienia strony sklepu WooCommerce, w tym te, które napisałem w ostatniej części.
Jeśli nie widzisz żadnych stron, prawdopodobnie będziesz musiał je dodać w menu Strony lub mógł wystąpić błąd podczas pobierania stron z bazy danych.
Jeśli skorzystasz z istniejącej strony z treścią, katalog produktów pojawi się po treści.
Ustawienia Katalogu Produktów
Następnie możesz przejść do Wygląd → Dostosuj i kliknąć WooCommerce → Katalog produktów . Może to również zależeć od motywu (i jego zgodności z WooCommerce).
Zasadniczo ustawienia dotyczą układu strony sklepu, liczby wyświetlanych produktów, kategorii, sortowania, stronicowania, kolejności produktów i kolumn.
Personalizacja będzie miała wpływ na ostateczny kształt strony sklepu WooCommerce.Menu
WordPress pozwala nam budować niestandardowe struktury menu. Aby dodać link do strony sklepu do menu, możesz przejść do Wygląd → Menu . Istnieje również możliwość zmiany tytułu w menu lub dodania ikony/favikony.
Strona sklepu jako strona główna
Istnieje możliwość wybrania strony sklepu WooCommerce jako strony głównej. W takim przypadku prawdopodobnie wystarczy jedno łącze w menu.
Adres URL strony sklepu
Każda strona lub post WordPress ma swój unikalny adres URL za pomocą ślimaka strony. Możesz to zmienić na ekranie edycji produktu lub szybko edytując stronę.
Jeśli ustawisz stronę sklepu jako stronę główną, adres URL zostanie przepisany do domeny głównej (bez ślimaka).Linki bezpośrednie
Po kliknięciu niektórych produktów WooCommerce w katalogu strony sklepu zostaniesz przekierowany do ich adresów URL. Możliwe jest również skonfigurowanie struktury linków do produktów.
CSS
Możliwe jest również wykorzystanie CSS w celu dostosowania wyglądu strony sklepu. Niezbędny kod można umieścić w pliku style.css motywu lub poprzez Wygląd → Dostosuj i wstaw dodatkowy CSS.
Mógłbym także zmienić szerokość kolumny za pomocą CSS, ale myślę, że WooCommerce zajmuje się układem strony produktu (kolumny/produkty), więc lepiej jest używać krótkich kodów (w dalszej części postu).
Widżety
Co więcej, opcje motywu mogą dać więcej opcji układu, na przykład paski boczne, w których można używać widżetów i niestandardowego kodu. W artykule używam układu Storefront o pełnej szerokości.
Ok, zobaczmy, jak ulepszyć w WooCommerce standardową stronę sklepu za pomocą krótkich kodów.
Wyświetlanie produktów i dodawanie skrótów
Domyślne opcje mogą wystarczyć, ale możliwe jest dostosowanie/zmiana strony sklepu WooCommerce o dodatkowe produkty, opcje i kategorie. Najszybszą opcją jest użycie opcji edytora stron (niektóre mogą być dołączone do motywu) i krótkich kodów WooCommerce.
Krótkie kody WooCommerce dla przykładowej strony produktu
Jak widać, strona sklepu WooCommerce przed zawartością wyświetli dodatkowe produkty i sekcje.
Istnieje także możliwość zmiany standardowej strony sklepu WooCommerce za pomocą dodatkowych bloków WooCommerce i motywów.
Oczywiście miło jest pamiętać, że niektóre produkty mogą wyświetlać się wielokrotnie.
Dostosowywanie strony sklepu (więcej opcji)
Odejdźmy od widocznych produktów i zadbajmy o funkcjonalną stronę strony sklepu WooCommerce.
Produkty pojawiają się ze zdjęciem, tytułem, ceną, recenzjami i przyciskami „dodaj do koszyka”.
Przekierowanie, AJAX, symbol zastępczy
Wróćmy do WooCommerce → Ustawienia → Produkty . Jak widać, istnieją 3 ważne opcje do wykorzystania:
- Przekieruj do koszyka - tę opcję można zastosować także w przypadku strony sklepu WooCommerce.
- Włącz AJAX dla przycisku dodaj do koszyka - opcja ta zapobiega przeładowaniu strony po dodaniu produktu do koszyka. Nie będzie działać z poprzednią opcją.
- Placeholder image - wybranie identyfikatora dla domyślnego zdjęcia produktu, jeśli produkt go nie posiada (widoczne w adresie URL obrazu w menu Media).
Dostosowywanie tytułów produktów
Jak pokazałem powyżej, istnieje możliwość zmiany koloru tytułu produktu. Można również dostosować tytuły na interfejsie bez zmiany każdego produktu w backendzie za pomocą filtru the_title lub niestandardowego kodu zmieniającego zmienną $title.
Recenzje produktu
Istnieje możliwość umieszczenia gwiazdek pod tytułami produktów - odpowiadają one średniej ocenie produktu.
Ustawienia recenzji produktów znajdują się w WooCommerce → Ustawienia → Produkty .
Możesz przeczytać więcej na temat wyłączania recenzji produktów WooCommerce .Cena produktu
Domyślnie WooCommerce wyświetla cenę regularną i promocyjną pod tytułem produktu.
W przypadku produktów zmiennych pojawi się przedział cenowy.
Istnieje możliwość decydowania o sposobie wyświetlania cen.
Możesz przeczytać więcej o produktach WooCommerce .Istnieją również dodatkowe wtyczki umożliwiające modyfikację cen produktów.
Pokaż najniższą cenę
Na przykład WP Desk stworzył wtyczkę, aby oferować rozwiązanie dla dyrektywy Omnibus .
Biurko WPOmnibus biurowy WP 69 dolarów
Upewnij się, że Twój sklep WooCommerce jest zgodny z dyrektywą UE Omnibus i pokazuje najniższą cenę produktu w ciągu ostatnich 30 dni. Skorzystaj z wtyczki WordPress WP Omnibus, aby spełnić wymagania nowej Dyrektywy i zyskać zaufanie klientów.
Dodaj do koszyka lub Wyświetl szczegółyAktywne instalacje: ponad 1000 |Ostatnia aktualizacja: 24 marca
Ostatnia aktualizacja: 2024-03-04Współpracuje z WooCommerce 8.4 - 8.6.xRabaty cenowe
Możliwe jest również ustawienie rabatów produktowych, które będą miały wpływ na cenę na stronie produktu WooCommerce. Na przykład Elastyczne ceny mogą skonfigurować opcję Kup jeden, aby otrzymać jeden darmowy rabat lub rabaty na całe kategorie, role użytkowników lub sumę zamówienia.
Biurko WPElastyczne ceny WooCommerce 79 dolarów
Klienci uwielbiają wyprzedaże i okazje cenowe. Użyj tego! Twórz promocje, takie jak Kup jeden, odbierz jeden za darmo , aby zwiększyć sprzedaż w swoim sklepie. Najbardziej dynamiczna wtyczka cenowa dla WooCommerce.
Dodaj do koszyka lub Wyświetl szczegółyOstatnia aktualizacja: listopad 23
Ostatnia aktualizacja: 2024-04-15Współpracuje z WooCommerce 8.5 - 8.8.xPrzycisk Dodaj do koszyka
WooCommerce ma ogólny tytuł przycisku Dodaj do koszyka. Jak zatem zmienić tekst przycisku? Możesz:
- zmienić tłumaczenie (ciąg znaków) tekstu „Dodaj do koszyka”,
- użyj filtrów woocommerce_product_add_to_cart_text i woocommerce_product_add_to_cart_text, aby dostosować tekst przycisku,
- lub wypróbuj wtyczkę.
Biurko WPNiestandardowa cena dla WooCommerce PRO 49 dolarów
Pozwól swoim klientom płacić tyle, ile chcą, umożliwiając im nadawanie cen produktów w WooCommerce. Nowa cena będzie ustalana na podstawie danych wprowadzonych przez użytkowników. Użyj ceny niestandardowej w przypadku darowizn lub kampanii marketingowych!
Dodaj do koszyka lub Wyświetl szczegółyAktywne instalacje: ponad 2000 |Ocena WordPressa:
Ostatnia aktualizacja: 21.05.2024Współpracuje z WooCommerce 8.6 - 8.9.xWybór ilości na stronie sklepu
Na standardową stronę sklepu WooCommerce można dodać tylko jeden produkt na jedno kliknięcie. Możliwe jest jednak pokazanie selektora ilości za pomocą niestandardowego kodu.
Jak widać, istnieje wiele opcji konfiguracji strony sklepu WooCommerce. Możliwości jest wiele, w tym pokazanie większej ilości danych, niestandardowych meta lub elementów graficznych. Ale myślę, że ważniejsze jest oferowanie dobrych produktów . Sprzedawania czegoś złego lub bezwartościowego nie można zamaskować niektórymi opcjami, sztuczkami CSS i atrakcyjnym wyglądem.
Streszczenie
Masz pytania dotyczące zmiany strony sklepu WooCommerce? Jeśli chcesz dostosować WooCommerce, na przykład pola produktu lub strony kasy, możesz rzucić okiem na bezpłatne wtyczki WP Desk .