Jak dostosować szablon strony produktu WooCommerce?

Szukasz sposobów na edycję szablonów stron produktów? Jesteśmy z Tobą. W tym przewodniku poznasz różne sposoby dostosowywania szablonu strony produktu WooCommerce .

WooCommerce zawiera wiele opcji dostosowywania. Jedną z ciekawszych opcji jest możliwość edycji domyślnych szablonów Twojego sklepu eCommerce. A fakt, że można je dostosować za pomocą więcej niż jednej metody, jest jeszcze bardziej imponujący.

Przyjrzyjmy się niektórym korzyściom, których możesz oczekiwać od dostosowywania szablonów stron produktów.

Korzyści z edytowania szablonów strony produktu

Edycja szablonów stron produktów poprawia wrażenia zarówno właściciela witryny, jak i klientów. Domyślny szablon strony produktu WooCommerce jest dobry dla większości witryn. Zawiera wszystkie niezbędne informacje o Twoim produkcie, których potrzebują kupujący. Jednak posiadanie unikalnej strony produktu daje cenną przewagę, dzięki której możesz wyróżnić się na tle konkurencji .

Mimo że w domyślnym szablonie znajdują się odpowiednie informacje o produkcie, zrobienie dobrego pierwszego wrażenia pomoże Ci zwiększyć sprzedaż. W tym celu nadal możesz chcieć dodać lub usunąć niektóre szczegóły. Może być również konieczna zmiana niektórych elementów strony produktu w zależności od rodzaju sprzedawanego produktu lub usługi, wymagań klientów lub bieżących trendów. Na przykład możesz wyświetlać i regularnie aktualizować informacje o rabatach, ofertach i rocznych wyprzedażach, aby przyciągnąć więcej odwiedzających.

Ponadto istnieją zmiany kolorów, układu i typografii, które możesz zastosować, aby Twoja witryna była wyjątkowa i wywierała wrażenie na kupujących.

Oto niektóre z najczęstszych zmian, które możesz zastosować w szablonach stron produktów, ale możesz zrobić o wiele więcej. Przyjrzyjmy się różnym metodom edycji szablonów stron produktów w WooCommerce.

Jak dostosować szablon strony produktu WooCommerce

Istnieją różne sposoby edytowania szablonu strony produktu WooCommerce :

1. Programowo
2. Z kreatorami stron
3. Korzystanie z wtyczki

Zanim zaczniemy, jest kilka rzeczy, o których warto pamiętać.

• Upewnij się, że poprawnie skonfigurowałeś WooCommerce i nie przegap żadnych kroków, aby uniknąć problemów
• Ponieważ zmodyfikujemy niektóre pliki motywów, które zawierają delikatne informacje o Twojej witrynie, zalecamy wykonanie kopii zapasowej witryny WordPress i utworzenie motywu podrzędnego lub jednej z tych wtyczek motywów podrzędnych, zanim przejdziesz dalej
• W tej demonstracji użyjemy motywu Divi. Pliki motywów mogą się różnić w Twojej witrynie w zależności od motywu, ale powinieneś być w stanie wykonać wszystkie kroki bez żadnych problemów
• >Upewnij się, że używasz jednego z kompatybilnych motywów WooCommerce na swojej stronie

Teraz bez zbędnych ceregieli przejdźmy do metod edycji szablonów stron produktów.

1) Programowo dostosuj szablon strony produktu WooCommerce

Ta metoda jest wysoce zalecana, jeśli chcesz wprowadzić proste poprawki do szablonów stron produktów. Możesz je łatwo edytować za pomocą kodu, ale lepiej, jeśli masz podstawową wiedzę programistyczną , jeśli użyjesz tego podejścia.

Będziemy tutaj głównie używać haków WooCommerce, więc jeśli nie jesteś z nimi zaznajomiony, możesz zajrzeć do naszego przewodnika, jak korzystać z haków WooCommerce. Jest to bardzo przydatne, ponieważ haki pozwalają również dostosować dowolny rodzaj szablonu WooCommerce.

Rzućmy okiem na kilka przykładów rzeczy, które możesz zrobić, aby edytować szablony stron produktów.

1.1) Usuwanie elementów ze strony produktu

Jeśli chcesz usunąć elementy ze strony produktu , możesz użyć jednego z poniższych fragmentów, które wykorzystują haki do usuwania lub ukrywania żądanych elementów. Wszystko, co musisz zrobić, to wybrać właściwy i dodać kod do plików motywu witryny.

Wszystkie dostępne hooki można znaleźć w komentarzach do pliku content-single-product.php w plikach szablonów wtyczki WooCommerce. Alternatywnie możesz odnieść się do tej strony.

Oto kilka przykładów fragmentów kodu, których możesz użyć do usunięcia elementu ze stron produktów:

 // usuń tytuł
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
// usuń gwiazdki oceny
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
// usuń meta produktu 
remove_action( 'woocommerce_single_product_summary','woocommerce_template_single_meta',40 );
// usuń opis
remove_action( 'woocommerce_single_product_summary','woocommerce_template_single_excerpt',20 );
// usuń obrazy
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images',20 );
// usuń powiązane produkty
remove_action( 'woocommerce_after_single_product_summary','woocommerce_output_related_products',20);
// usuń dodatkowe zakładki informacyjne
remove_action('woocommerce_after_single_product_summary','woocommerce_output_product_data_tabs',10);

Po znalezieniu zaczepu do usunięcia żądanego elementu przejdź do Wygląd > Edytor motywów na pulpicie nawigacyjnym WordPress i otwórz plik functions.php . Następnie dodaj żądany fragment kodu za pomocą funkcji remove_action na dole pliku.

Na przykład, aby usunąć tytuł strony produktu, wklejamy następujący fragment:

Następnie naciśnij Aktualizuj plik i sprawdź swoją witrynę z interfejsu. Zobaczysz, że tytuł został usunięty ze strony produktu.

1.2) Dodaj nowe elementy

Możesz także użyć haków, aby dostosować szablon strony WooCommerce i dodać do niego nowe elementy. Aby dołączyć element, musisz użyć funkcji add_action z wymaganym zaczepem.

Na przykład, aby dodać tekst do strony produktu, możesz wkleić następujący fragment do pliku functions.php swojego motywu podrzędnego.

 add_action('woocommerce_before_single_product_summary',function(){
  printf('<h4><a href="?added-content">Gratulacje, właśnie dodałeś link!</a></h4>');
}
);

Spowoduje to dodanie nowej treści do strony produktu. Po prostu dostosuj powyższy kod, aby zmienić tekst i rozmiar, aby dodać dowolne elementy do stron produktów.

1.3) Zmień kolejność elementów

Inną opcją jest dostosowanie szablonu strony produktu WooCommerce poprzez zmianę kolejności niektórych elementów. Podobnie jak w przypadku usuwania i dodawania elementów, musisz dodać fragmenty kodu do pliku function.php motywu potomnego.

Aby zmienić kolejność elementów, musisz najpierw usunąć haczyk z szablonu strony produktu, a następnie ponownie dodać haczyk w innej pozycji. Jest to kombinacja fragmentów kodu, których użyliśmy w poprzednich krokach.

W poniższym przykładzie skrypt przeniesie opis produktu tuż pod tytuł, zmieniając kolejność pozycji.

 // zmień kolejność opisu
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6 );

Podobnie możesz użyć dowolnego z wymaganych haków, aby zmienić kolejność elementów szablonów stron produktów. Tylko upewnij się, że wprowadzasz prawidłowe zlecenia pozycji.

Jeśli chcesz uzyskać więcej przykładów na ten temat, zapoznaj się z naszym przewodnikiem, jak programowo edytować stronę produktu WooCommerce.

2) Edytuj szablon strony produktu WooCommerce za pomocą kreatorów stron

Kreatory stron to świetne narzędzia, które ułatwiają proces tworzenia i dostosowywania stron internetowych. Dotyczy to również szablonów stron produktów. Jeśli nie masz umiejętności programowania, możesz dostosować szablon strony produktu WooCommerce za pomocą kreatorów stron za pomocą kilku kliknięć.

Dodatkowo kreatory stron pozwalają również zapisywać szablony stron produktów z wprowadzonymi zmianami. A ponieważ większość kreatorów stron udostępnia edytor przeciągania i upuszczania do edycji szablonów, możesz zaoszczędzić dużo czasu.

W WordPressie jest wiele kreatorów stron. W tym samouczku użyjemy Divi Builder , ponieważ jest to jeden z najlepszych kreatorów stron i świetnie współpracuje z naszym motywem Divi.

Aby zacząć z niego korzystać, upewnij się, że masz Divi, a następnie zainstaluj Divi Builder na swojej stronie internetowej. Następnie możesz rozpocząć edycję szablonów.

2.1) Otwórz Edytor wizualny

Pierwszym krokiem do edycji szablonu strony produktu jest otwarcie jednej ze stron produktów i kliknięcie opcji „ Włącz Visual Builder ” na pasku administracyjnym. Zostaniesz przekierowany do Divi Visual Editor , w którym możesz dostosować szablon strony produktu.

Jeśli nie widzisz tej opcji, upewnij się, że jesteś zalogowany do pulpitu WordPress w tym samym oknie przeglądarki.

2.2) Dostosuj szablon za pomocą edytora wizualnego

Za pomocą edytora wizualnego możesz dostosować prawie wszystkie elementy swojej strony produktu. Wszystko, co musisz zrobić, to kliknąć dowolny z istniejących elementów, który chcesz edytować .

Załóżmy na przykład, że chcesz dostosować kolor tła opisu produktu. Naciśnij opis produktu i otwórz ustawienia opisu, klikając ikonę Ustawienia .

Następnie przejdź do opcji Tło i wybierz kolor, który chcesz ustawić dla opisu produktu. Zobaczysz, że kolor tła zmienia się natychmiast w podglądzie na żywo. Gdy będziesz zadowolony z koloru, pamiętaj, aby zapisać zmiany.

Załóżmy, że oprócz zmiany koloru chcesz dodać więcej modułów do szablonu strony produktu. Po prostu kliknij symbol „ + ” w obszarze, w którym chcesz dodać moduł, wybierz typ wiersza i wybierz żądany moduł.

Jeśli chcesz dodać coś konkretnego, możesz wyszukać określone moduły, wpisując w polu wyszukiwania. Następnie wystarczy skonfigurować opcje w ustawieniach modułu i zapisać zmiany.

Załóżmy na przykład, że chcesz dodać moduł minutnika , aby rozpocząć świąteczną wyprzedaż. Naciśnij symbol + i wyszukaj słowa kluczowe minutnika.

Następnie dodaj niezbędne informacje do odliczania, takie jak tekst, godzina i data w ustawieniach modułu.

Zmiany będą widoczne w czasie rzeczywistym na podglądzie w miarę ich wprowadzania. Gdy będziesz zadowolony, zapisz szablon strony produktu, rozwijając 3 poziome kropki u dołu ekranu.

Szybka wskazówka, aby dostosować szablon strony produktu za pomocą Divi Builder

Możesz również mieć różne szablony stron produktów w zależności od rodzaju produktu, który sprzedajesz w swoim sklepie internetowym. Wszystko, co musisz zrobić, to przejść do Divi > Divi Builder na pulpicie WordPress i kliknąć Dodaj nowy szablon .

Jeśli przewiniesz w dół do sekcji Produkty , zobaczysz, że możesz tworzyć szablony dla określonych stron produktów . Może to zależeć od kategorii, tagów lub konkretnych produktów. Po prostu wybierz żądaną opcję i naciśnij Utwórz szablon.

Następnie musisz dodać niestandardową treść do szablonu strony produktu, który właśnie utworzyłeś. Możesz zbudować nowy od podstaw lub skorzystać z jednego z szablonów z biblioteki. Niezależnie od tego, co wybierzesz, będziesz musiał ponownie użyć Edytora wizualnego, aby dostosować szablon strony produktu WooCommerce.

Jeśli chcesz dowiedzieć się więcej o tym, jak korzystać z Divi Builder, zapoznaj się z naszym szczegółowym przewodnikiem, jak dostosować stronę produktu WooCommerce w Divi.

Alternatywnie możesz użyć innych programów do tworzenia stron, aby edytować szablony stron produktów. Jeśli korzystasz z Elementora, możesz zapoznać się z naszym samouczkiem, aby dostosować stronę produktu WooCommerce w Elementorze, aby uzyskać więcej informacji.

3) Dostosuj szablon strony produktu WooCommerce za pomocą wtyczki

Jeśli chcesz wprowadzić bardzo szczegółowe zmiany w szablonach stron produktów WooCommerce, możesz użyć wtyczki. Niektóre narzędzia do tworzenia stron, takie jak Elementor, są również dostępne jako wtyczki, ale istnieją inne dedykowane narzędzia, których można użyć do bardzo konkretnych funkcji.

Jedną z takich wtyczek jest Direct Checkout dla WooCommerce . To narzędzie zostało zaprojektowane, aby pomóc Ci uprościć proces realizacji transakcji w WooCommerce. Dzięki tej wtyczce możesz przekierować klientów ze strony produktu bezpośrednio na stronę kasy po dodaniu produktu do koszyka. W ten sposób skrócisz proces zakupu i zwiększysz współczynniki konwersji.

Podsumowując, jest to doskonałe narzędzie do edycji przycisków szablonów stron produktów w Twoim sklepie.

Przyjrzyjmy się, jak edytować szablon strony produktu za pomocą funkcji Bezpośrednia realizacja transakcji .

3.1) Zainstaluj i aktywuj wtyczkę

Najpierw musisz zainstalować i aktywować wtyczkę. Możesz pobrać darmową wersję stąd lub uzyskać jeden z planów premium, które zawierają więcej funkcji i zaczynają się od 19 USD (płatność jednorazowa).

Alternatywnie możesz przejść do Wtyczki> Dodaj nowy na pulpicie nawigacyjnym WordPress, wyszukać wtyczkę i zainstalować ją.

Po zainstalowaniu i aktywacji wtyczki musisz ją skonfigurować.

3.2) Skonfiguruj opcje bezpośredniej realizacji transakcji

Przejdź do WooCommerce > Bezpośrednia kasa i otwórz kartę Ogólne .

Następnie ustaw następujące opcje:

• Dodane do koszyka przekierowanie: Tak
• Dodano do koszyka przekierowanie do: Kasa

Na koniec zapisz zmiany i przejrzyj dowolne strony produktów w swoim sklepie internetowym. Teraz, gdy tylko klikniesz przycisk Kup na dowolnym produkcie, zostaniesz bezpośrednio przekierowany na stronę kasy.

Aby uzyskać więcej informacji na temat dodawania przycisków kupowania jednym kliknięciem, zapoznaj się z naszym przewodnikiem na temat dodawania przycisku szybkiego zakupu w WooCommerce.

Podsumowując, dostosowywanie szablonów stron produktu jest podobne do edytowania strony produktu. Możesz zajrzeć do naszego samouczka, aby dostosować strony produktów WooCommerce, aby uzyskać więcej informacji i pomysłów, aby jak najlepiej wykorzystać szablony stron produktów.

Bonus: Edytuj szablon strony produktu WooCommerce za pomocą CSS

Do tej pory widzieliśmy, jak programowo dostosować stronę produktu WooCommerce za pomocą kreatorów stron i dedykowanych wtyczek. Ale jest jeszcze jedna rzecz, którą możesz zrobić. Możesz także edytować swój szablon za pomocą odrobiny CSS. Jest to najszybsza metoda wprowadzania niewielkich zmian w projekcie na stronie produktu.

Skrypty CSS są bardzo przydatne do zmiany opcji wyświetlania i projektowania, więc możesz łatwo dodać je do swojej witryny, przechodząc do Wygląd > Dostosuj > Dodatkowy CSS . Tam możesz dodać skrypty CSS, aby dostosować szablony stron produktów.

Oto kilka przykładów rzeczy, które możesz zrobić, aby ulepszyć strony produktów za pomocą CSS.

Zmień rozmiar czcionki tytułu

Poniższy kod CSS zmieni rozmiar czcionki tytułu na stronie produktu na 16.

 .woocommerce div.product .product_title { 
        rozmiar czcionki: 16px; 
}

Możesz wybrać dowolny inny rozmiar czcionki, po prostu dostosowując linię rozmiaru czcionki we fragmencie.

Zmień kolor tytułu

Możesz także dostosować szablony stron produktów, zmieniając kolor tytułu za pomocą CSS. Po prostu poszukaj kodów szesnastkowych koloru, który chcesz dodać do swojej witryny za pomocą CSS i użyj poniższego kodu.

Na przykład w tym fragmencie użyliśmy kodu koloru #800000, który zmienia kolor tytułu na bordowy.

 .woocommerce div.product .product_title { 
            kolor: #800000; 
}

Po wprowadzeniu wszystkich zmian opublikuj je.

Więcej przykładów fragmentów kodu CSS znajdziesz w tym poście. Pokazuje, jak dostosować stronę sklepu, ale możesz zastosować te same fragmenty, aby edytować szablony strony produktu.

Aby uzyskać bardziej szczegółowe przykłady zastosowania do Divi, możesz zapoznać się z tym innym artykułem.

Wniosek

Podsumowując, edytowanie szablonów stron produktów może pomóc Ci zbudować unikalne strony produktów i wyróżnić się na tle konkurencji. W zależności od rodzaju sprzedawanych produktów i opinii klientów możesz dodawać, usuwać lub reorganizować elementy i upewnić się, że w pełni wykorzystujesz strony swoich produktów.

W tym przewodniku widzieliśmy różne sposoby dostosowywania szablonu strony produktu WooCommerce w Twojej witrynie

• Programowo
• Z kreatorami stron
• Korzystanie z wtyczki

Wszystkie te metody są na swój sposób skuteczne, dlatego wybierz najbardziej odpowiednią do swoich potrzeb. Jeśli masz umiejętności kodowania, podejście programistyczne jest bardzo skuteczne i zapewnia dużą elastyczność w zakresie tego, co możesz zmienić. W przeciwnym razie możesz użyć narzędzia do tworzenia stron, aby łatwo dostosować różne sekcje szablonów. Na koniec możesz użyć wtyczek, takich jak Direct Checkout, które umożliwiają wprowadzenie określonych zmian na stronach produktów.

Czy edytowałeś swoje szablony? Jakiej metody użyłeś? Daj nam znać w komentarzach poniżej.

Jeśli uznałeś ten samouczek za interesujący, oto kilka innych artykułów, które również mogą Ci się spodobać:

• Jak dostosować produkty powiązane z WooCommerce?
• Najlepsze wtyczki do dostosowywania strony produktu WooCommerce
• Jak dodać obraz do produktu w WooCommerce