Jak programowo dostosować szablony WooCommerce?

Opublikowany: 2021-05-04

Chcesz edytować szablony na swojej stronie? Ten przewodnik pokaże Ci, jak programowo dostosować szablony WooCommerce zarówno za pomocą haków, jak i nadpisując je .

Po co edytować szablony WooCommerce?

Zakupy online są wygodniejsze i szybsze niż chodzenie do sklepów stacjonarnych, dlatego eCommerce stał się niezwykle popularny w ciągu ostatnich kilku lat. Przy tak dużej konkurencji nie wystarczy założyć sklepu WooCommerce i umieścić swoje produkty w Internecie. Musisz znaleźć sposoby na wyróżnienie się i wyróżnienie z tłumu .

Jednym z najlepszych sposobów na to jest dostosowanie sklepu. Oprócz zmiany nagłówka i edycji kluczowych stron, takich jak kasa lub strona sklepu, możesz również dostosować używane szablony. Niewiele witryn edytuje swoje szablony, więc dzięki temu będziesz mieć przewagę nad konkurencją .

Jeśli masz umiejętności kodowania, prawdopodobnie wiesz, że używanie motywu potomnego jest zalecane podczas edycji sklepu. Podobnie wbudowane haki WordPress i WooCommerce oferują wiele możliwości edycji i dodawania nowych funkcji do dowolnej witryny.

Jak programowo dostosować szablony WooCommerce?

Istnieją dwa główne sposoby programowego dostosowywania szablonów WooCommerce:

  1. Z haczykami
  2. Nadpisywanie szablonów

Każda z tych metod służy innym celom. Przyjrzyjmy się bliżej ich głównym różnicom.

Zastąpić pliki szablonów lub użyć hooków?

Zalecaną praktyką jest dostosowywanie sklepu za pomocą haków. Jednak podczas dostosowywania WooCommerce za pomocą haków możesz napotkać problemy z niekompatybilnością. W przypadku bardziej złożonych dostosowań lepszym rozwiązaniem może być nadpisanie plików szablonów WooCommerce.

Ważne jest, aby pamiętać, że kiedy nadpiszesz plik szablonu, podpięcia działające na tym pliku przestaną działać. Każde podpięcie wskazuje na określony plik, więc nie będziesz mógł ich użyć, jeśli edytujesz ten sam plik, który uruchamia podpięcie.

Na przykład weźmy plik single-product.php , aby zobaczyć, jak tworzone są hooki. Zwróć też uwagę, gdzie znajdują się haczyki przed i za pętlą.

 if ( ! zdefiniowano( 'ABSPATH' ) ) {
        Wyjście; // Zakończ, jeśli uzyskano bezpośredni dostęp
 }
 get_header( 'sklep' ); ?>
 <?php
                /**
                 * hak woocommerce_before_main_content.
                 *
                 * @hooked woocommerce_output_content_wrapper - 10 (wyjścia otwierające div dla treści)
                 * @hooked woocommerce_breadcrumb - 20
                 */
                do_action( 'woocommerce_before_main_content' );
        ?>
                <?php while ( have_posts() ) : ?>
                        <?php post(); ?>
                        <?php wc_get_template_part( 'zawartość', 'pojedynczy produkt' ); ?>
                <?php koniec; // koniec pętli. ?>
        <?php
                /**
                 * hak woocommerce_after_main_content.
                 *
                 * @hooked woocommerce_output_content_wrapper_end - 10 (wyjścia zamykające div dla treści)
                 */
                do_action( 'woocommerce_after_main_content' );
        ?>
        <?php
                /**
                 * hak woocommerce_sidebar.
                 *
                 * @hooked woocommerce_get_sidebar - 10
                 */
                do_action( 'woocommerce_sidebar' );
        ?>
 <?php
 get_footer( 'sklep' );

Jeśli spojrzysz na skrypt, zobaczysz, jak tworzymy zaczepy na do_action('name-of-the-hook'); linie.

Załóżmy, że masz następujący zaczep w pliku functions.php motywu potomnego:

 add_action('woocommerce_after_main_content',function(){echo “niestandardowa treść po pliku szablonu pojedynczego produktu”;});

Możesz powtórzyć tę samą treść bezpośrednio w pliku szablonu w następujący sposób:

 <?php koniec; // koniec pętli. ?>
        <?php
 echo „niestandardowa treść po pliku szablonu pojedynczego produktu”;
                /**
                 * hak woocommerce_after_main_content.
 do_action( 'woocommerce_after_main_content' );

Jednak w ten sposób do_action('woocommerce_after_main_content'); funkcja stanie się bezużyteczna, ponieważ dodałeś tam swój kod zamiast ściągać go za pomocą haka. Możesz więc chcieć usunąć wszystkie niepotrzebne podpięcia z pliku, usuwając do_action('nazwa-haczyka'); Sekcje.

Pamiętaj, że jeśli używasz haka woocommerce_after_main_content() gdzieś indziej na swojej stronie i usuniesz do_action( 'name_of_your_hook' ); w tym pliku podpięcie nie będzie już działać.

Po usunięciu hooków i zbędnych tagów PHP twój plik powinien wyglądać tak:

 if ( ! zdefiniowano( 'ABSPATH' ) ) {
 Wyjście; // Zakończ, jeśli uzyskano bezpośredni dostęp
 }
 get_header( 'sklep' );
 while ( have_posts() ) :
 Poczta();
 wc_get_template_part( 'zawartość', 'pojedynczy produkt' );
 koniec; // koniec pętli.
 do_action( 'woocommerce_sidebar' );
 get_footer( 'sklep' );
 UWAGA : Usunięcie hooków w ten sposób może wpłynąć na kod stron trzecich, taki jak wtyczki i motywy, powodując awarie lub uszkodzenie witryny. Zakłada się, że wiesz, co robisz.
		


 Dostosuj i nadpisz pliki szablonów WooCommerce
 Nadpisywanie plików szablonów WooCommerce zapewnia dużą elastyczność w dostosowywaniu sklepu. Jednak, jak wspomniano wcześniej, musisz zrozumieć, że kiedy nadpiszesz zawartość pliku szablonu, hooki działające na tym pliku przestaną działać. Ponadto WooCommerce może od czasu do czasu zmieniać pliki szablonów, więc jeśli nastąpi aktualizacja i zmienią pliki, może się okazać, że edytowany plik jest nieaktualny.
 O czym należy pamiętać podczas nadpisywania szablonów
 Jeśli tu jesteś, prawdopodobnie masz pewne umiejętności kodowania i wiesz, jak używać i instalować motyw potomny. Jeśli tak nie jest, zapoznaj się z naszym przewodnikiem, aby utworzyć motyw potomny lub użyj jednej z tych wtyczek.
		


 Nadpisywanie szablonów WooCommerce jest podobne do nadpisywania pliku functions.php . Główną różnicą jest to, że edytujesz pliki szablonów WooCommerce zamiast plików motywów.
 Aby to zrobić, musisz skopiować żądany plik szablonu z folderu szablonów wtyczek WooCommerce i wkleić go do motywu podrzędnego w folderze WooCommerce. Jeśli podążasz za tą samą strukturą folderu szablonów WooCommerce, nazw plików i podfolderów; będziesz mógł nadpisywać pliki szablonów, nawet te znajdujące się w podfolderach.
 Istnieje wiele plików szablonów WooCommerce i każdy z nich odpowiada za pojedyncze zadanie. możesz sprawdzić pełną listę plików szablonów, które możesz edytować, a także podkatalogi i strukturę folderów pod tym linkiem.
		


 Jak widać, w głównym folderze szablonu znajduje się kilka plików, a także kilka podkatalogów. Możesz dostosować pliki w dowolnym podkatalogu w ten sam sposób, w jaki edytujesz główne pliki, takie jak archive-product.php , single-product.php lub content-single-product.php . Podobnie możesz również dostosować pliki w koszyku, Moje konto, wiadomości e-mail lub foldery kasy, jeśli stosujesz te same nazwy folderów i strukturę, co w motywie podrzędnym.
 Jeśli więc chcesz dostosować niektóre z tych plików, Twój motyw potomny będzie wyglądał mniej więcej tak: Jak programowo dostosowywać szablony woocommerce?
 Powiedziawszy to, rzućmy okiem na kilka przykładów rzeczy, które możesz zrobić, aby dostosować szablony WooCommerce.
		


 1. Dodaj skróty do szablonu WooCommerce
 Ciekawą alternatywą jest użycie skrótów w kodzie. Większość istniejących skrótów powinna działać tutaj, ale często można znaleźć nieobsługiwane skróty poza oficjalnymi skrótami WooCommerce i WordPress.
 Na przykład poniższy skrypt będzie zawierał pulpit nawigacyjny konta na wszystkich stronach pojedynczego produktu. Pamiętaj, aby wkleić go do pliku single-product.php , który utworzyłeś w motywie podrzędnym.
 <?php
 if ( ! zdefiniowano( 'ABSPATH' ) ) {
 Wyjście; // Zakończ, jeśli uzyskano bezpośredni dostęp
 }
 get_header( 'sklep' );
 while ( have_posts() ) :
 Poczta();
 wc_get_template_part( 'zawartość', 'pojedynczy produkt' );
 koniec; // koniec pętli.
 do_action( 'woocommerce_sidebar' );
 $t= '<div><h4>Moje konto</h4>';
 $t.= do_shortcode(" [ woocommerce_my_account ] ");
 $t.="</div>";
 echo $t;
 get_footer( 'sklep' );
 A oto wynik na aktywnej stronie produktu: 
		


Dostosuj pliki szablonów woocommerce - Dodaj skróty do szablonu wc
 2. Pokaż treść klientom, którzy wcześniej kupili ten produkt
 Jeśli masz klientów, którzy już kupili od Ciebie produkt i wracają, aby kupić ten sam produkt ponownie, możesz zapewnić im kod rabatowy jako sposób na poprawę ich doświadczenia i sprawienie, że będą wracać do Twojego sklepu w kółko.
 Poniższy skrypt wyświetli treść na stronie produktu dla powracających klientów, którzy kupili ten sam produkt w przeszłości. Po raz kolejny edytujemy plik single-product.php :
 get_header( 'sklep' );
 while ( have_posts() ) :
 Poczta();
 wc_get_template_part( 'zawartość', 'pojedynczy produkt' );
 koniec; // koniec pętli.
 $bieżący_użytkownik = wp_get_bieżący_użytkownik();
 if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ):
 echo '<div class="user-bought">&hearts; Hej ' . $current_user->first_name . ', kupiłeś to już wcześniej. Kup ponownie, korzystając z tego kuponu: <b>PURCHASE_AGAIN_21</b></div>';
 endif;
 get_footer( 'sklep' ); 
Dostosuj pliki szablonów woocommerce - Pokaż zawartość dla zakupionych - przed powracającymi klientami
		


 3. Usuń przycisk dodawania do koszyka na podstawie ilości produktu i całkowitej ceny koszyka
 Innym ciekawym przykładem, jeśli chcesz programowo dostosować szablony WooCommerce, jest dodanie przycisku Koszyk w zależności od liczby przedmiotów, które klient kupuje, a także całkowitej ceny koszyka.
 W tym przypadku wejdziemy do pętli WooCommerce za pomocą pliku znajdującego się w folderze pętli w katalogu szablonów. Po prostu utwórz nowy plik add-to-cart.php w folderze o nazwie loop , w folderze woocommerce motywu potomnego i wklej ten skrypt:
 if ( ! zdefiniowano( 'ABSPATH' ) ) {
 Wyjście;
 }
 globalny produkt;
 $count= WC()->koszyk->get_cart_contents_count();
 $całkowita_cena= WC()->koszyk->get_cart_total();
 preg_match_all('!\d+!', $całkowita_cena, $dopasowania);
 $to_int = intval($matches[0][1]);
 if($to_int>500){
 echo "Przekroczono limit kwoty dla całkowitego koszyka";
 }
 elseif($liczba<10){
 echo zastosuj_filtry(
 „woocommerce_loop_add_to_cart_link”, // WPCS: XSS ok.
 sprintf(
 '<a href="%s" data-quantity="%s" class="%s" %s>%s</a>',
 esc_url( $produkt->dodaj_do_koszyka_url()),
 esc_attr( isset( $args['ilość'] ) ? $args['ilość'] : 1 ),
 esc_attr( isset( $args['klasa'] ) ? $args['klasa'] : 'przycisk' ),
 isset( $args['atrybuty'] ) ? wc_implode_html_attributes( $args['atrybuty'] ): '',
 esc_html( $product->add_to_cart_text() )
 ),$produkt,$args);
 }
 w przeciwnym razie{
 echo "Przekroczono limit ilościowy";
 }
 W tym przypadku dodajemy warunkową instrukcję if() , aby sprawdzić, czy do koszyka dodano więcej niż 10 przedmiotów, a łączna cena koszyka nie przekracza 500 USD.
 Jak widać, wchodzimy w zakres klasy WooCommerce wywołując obiekt WooCommerce w ten sposób: WC()->cart . W ten sposób możesz pobrać pewne informacje, aby dodać przycisk koszyka do strony sklepu lub nie, w zależności od warunków.
 Oto wynik zastosowania obu ograniczeń warunkowych: 
Usuń przycisk dodawania do koszyka na podstawie ilości produktów i łącznej ceny koszyka
 Pamiętaj, że będzie to działać tylko na głównej stronie sklepu. Musisz dodać trochę więcej kodu, jeśli chcesz zrobić to samo na innych stronach.
 4. Edytuj pliki szablonów e-mail WooCommerce
 Szablony wiadomości e-mail zawierają już przydatne linki do Twojej witryny, ale niektórzy użytkownicy mogą o tym nie wiedzieć. Dodajmy więc łącze do szablonów wiadomości e-mail, w których użytkownicy mogą logować się do witryny bezpośrednio z otrzymanej wiadomości e-mail.
 Dodamy link do nagłówka układu e-maila, więc potrzebujemy kopii pliku email-header.php , znajdującego się w folderze e-mail w podkatalogu szablonów WooCommerce.
 Utwórz nowy folder w motywie podrzędnym i wklej tam plik o tej samej nazwie. Zobaczysz początkowe flagi <!–header–> i <!–end header–> , i właśnie tam dodasz link:
 <!-- Nagłówek -->
 <table border="0" cellpadding="0" cellpacing="0" width="100%">
 <tr>
 <td>
 <h1><?php echo $email_heading; ?></h1>
 <h3>
 <?php echo '<span class="my-link"><a href="#login-URL">Zaloguj się na swoje konto</a></span>';?>
 </h3>
 </td>
 </tr>
 </table>
 <!-- Koniec nagłówka →
 Otóż ​​to! Właśnie edytowałeś plik nagłówka szablonu e-mail WooCommerce. W ten sam sposób możesz edytować wszystkie pliki szablonów wiadomości e-mail znajdujące się w tym katalogu. Aby uzyskać więcej informacji na temat testowania szablonów wiadomości e-mail, zapoznaj się z tym kompletnym przewodnikiem.
 Aby wyświetlić podgląd szablonów, zalecamy użycie wtyczki podglądu wiadomości e-mail. Tutaj znajdziesz niektóre wtyczki poczty e-mail, których możesz użyć. 
Edycja plików szablonów e-maili WC
 5. Jak zastosować styl CSS do szablonów e-mail WooCommerce?
 Inną ciekawą alternatywą jest programowe dostosowanie stylu szablonów WooCommerce. Po edycji znaczników HTML możesz dodać styl CSS do szablonów wiadomości e-mail. Biorąc pod uwagę, że wbudowany CSS nie jest zalecaną praktyką, będziemy musieli użyć pliku email-styles.php . To jest plik, który obsługuje CSS dla szablonów wiadomości e-mail.
 Aby zastosować niestandardowy kod CSS do wiadomości e-mail, skopiuj ten plik z folderów wtyczek WooCommerce i wklej go do folderu motywu WooCommerce. Jest to plik PHP, dzięki czemu będziesz mógł używać zmiennych, funkcji i budować własne instrukcje logiczne oraz stosować je do stylów:
 a {
 kolor: <?php echo esc_attr( $link_color ); ?>;
 grubość czcionki: normalna;
 dekoracja tekstu: podkreślenie;
 }
 A to jest niestandardowy selektor linków:
 .my-link > a:nth-child(1){
 kolor biały;
 rozmiar czcionki:14px;
 }
 Wniosek
 Podsumowując, edytowanie plików szablonów to doskonały sposób na wyróżnienie się na tle konkurencji i zapewnienie klientom lepszych wrażeń z zakupów.
 Istnieją 2 główne sposoby programowego dostosowywania szablonów WooCommerce:
  •  Z haczykami
  •  Nadpisywanie szablonów
 Porównaliśmy obie metody i pokazaliśmy kilka przykładów. Możesz użyć skryptów jako podstawy i bawić się, aby je dostosować i zastosować w swoim sklepie.
 Jeśli masz jakiekolwiek problemy z przewodnikiem, daj nam znać w komentarzach poniżej, a my dołożymy wszelkich starań, aby Ci pomóc.