Pełny samouczek: Dostosowanie szablonu strony produktu w WooCommerce w celu zwiększenia współczynnika konwersji sprzedaży.

Standardowa strona produktu nie jest zła, ale trudno sprawić, by Twój produkt wyróżniał się na tle konkurencji. Dzięki dostosowaniu szablonów produktów WooCommerce uzyskasz pełną kontrolę nad układem strony, hierarchią informacji i procesem obsługi użytkownika, co pozwoli Ci skutecznie przekonywać odwiedzających do zakupu i znacząco zwiększy współczynnik konwersji. Ten samouczek krok po kroku nauczy Cię, jak bezpiecznie i skutecznie tworzyć niestandardowe szablony, od zrozumienia struktury szablonu po praktyczne programowanie i zaawansowane techniki optymalizacji.

Analiza systemu szablonów WooCommerce.

Zanim przystąpisz do modyfikacji, koniecznie zapoznaj się z hierarchią szablonów w WooCommerce. Dzięki temu Twoje niestandardowe prace będą skuteczne i łatwe w utrzymaniu.

WooCommerce korzysta z systemu szablonów opartego na hierarchii szablonów. Gdy konieczne jest wyrenderowanie strony sklepu, WooCommerce szuka plików szablonów w określonej kolejności. Główna ścieżka wyszukiwania wygląda następująco:你的主题目录 -> 插件的模板目录。

Polecamy lekturę. Czym są metadane klientów WooCommerce i dlaczego należy nimi zarządzać?。

Mówiąc bardziej szczegółowo, WooCommerce najpierw szuka pliku o nazwie w aktualnym folderze motywu. woocommerce Subkatalog. Jeśli w motywie nie ma odpowiedniego pliku szablonu, wtedy używany jest szablon dołączony do wtyczki (znajdujący się w <). wp-content/plugins/woocommerce/templates/Ten mechanizm oznacza, że możesz bezpiecznie nadpisać dowolny domyślny szablon, tworząc odpowiedni plik w swoim motywie, bez konieczności modyfikowania plików głównych wtyczki. Dzięki temu twoje niestandardowe treści nie zostaną utracone w przypadku aktualizacji wtyczki.

UltaHost – hostingu dla stron WordPress

Gwarancja zwrotu pieniędzy w ciągu 30 dni, nieograniczony przepustowość sieci i dostęp do bazy danych, bezpłatna ochrona przed atakami typu DDoS. Promocja: 50% przy zakupie na 3 lata.

strona dostępu

Lokalizacja kluczowych plików szablonów.

W przypadku strony ze szczegółami produktu najważniejszym plikiem szablonu jest single-product.phpTen plik kontroluje ogólną strukturę całej strony produktu. Wewnątrz niego zazwyczaj używa się < wc_get_template_part() Funkcja ładuje inne, bardziej szczegółowe elementy szablonu, np. zdjęcia produktów, nagłówki, ceny, opisy, atrybuty, zakładki i formularze.

Główne pliki szablonów, na które należy zwrócić uwagę, są zwykle umieszczone w folderze motywu. woocommerce Można je skopiować z podkatalogu lub bezpośrednio z katalogu szablonów wtyczek. Na przykład obszar ze zdjęciami produktów można skopiować z podkatalogu. single-product/product-image.php Kontrola odbywa się poprzez dodanie produktu do koszyka, a następnie wypełnienie formularza zamówienia. single-product/add-to-cart.php Zarządzanie. Jeśli rozumiesz tę strukturę, możesz precyzyjnie wyszukiwać i modyfikować dowolną część strony.

Trzy sposoby na stworzenie niestandardowego szablonu produktu.

W zależności od posiadanych umiejętności technicznych i wymagań dotyczących dostosowywania można wybrać metodę o różnym stopniu złożoności, aby stworzyć niestandardowy szablon.

Użyj podtematów, by zapewnić kompleksową ochronę.

To jest najbardziej zalecane i najbezpieczniejsze rozwiązanie. Utwórz motyw podrzędny (Child Theme), a następnie w jego folderze utwórz strukturę katalogów zgodną z hierarchią szablonów WooCommerce.
Na przykład, aby pokryć główny szablon produktu, musisz utworzyć ścieżkę w podmotywie:your-child-theme/woocommerce/single-product.phpNastępnie należy skopiować oryginalny kod z wtyczki. single-product.php Skopiuj zawartość pliku i wprowadź w nim zmiany. Dzięki temu nawet po aktualizacji motywu głównego Twoje niestandardowe elementy WooCommerce zostaną zachowane.

Polecamy lekturę. Zaczynamy od zera: krok po kroku nauczymy Cię, jak założyć wielofunkcyjnego bloga na WordPressie.。

Realizacja za pomocą wtyczki do budowania stron.

Jeśli nie masz doświadczenia w programowaniu, możesz skorzystać z zaawansowanych kreatorów stron, takich jak Elementor Pro, Divi Builder czy WPBakery. Zwykle oferują one możliwość wizualnej edycji szablonów produktów WooCommerce. Możesz przeciągać komponenty (np. nagłówki, galerie, ceny, formularze) i ustawiać style bezpośrednio w narzędziu, a następnie stosować je do wszystkich produktów lub określonych kategorii produktów. To szybka i intuicyjna metoda, ale może wymagać określonych wtyczek i może wydłużyć czas ładowania strony.

Utwórz niestandardowy plik szablonu i przypisz go.

W przypadku bardziej złożonych lub niepowtarzalnych układów możesz stworzyć zupełnie nowy, niezależny plik szablonu. Utwórz nowy plik w folderze z motywami, na przykład single-product-custom.phpNa samej górze tego pliku musisz dodać specjalną notatkę w nagłówku szablonu, aby określić jego nazwę.

<?php
/**
 * Template Name: 自定义产品布局
 * Template Post Type: product
 */
get_header(); // 调用主题头部
?>
// ... 你的自定义HTML和PHP代码 ...
<?php get_footer(); // 调用主题底部 ?>

Po utworzeniu możesz znaleźć i wybrać właśnie utworzoną “niestandardową strukturę produktu” w polu rozwijanym “Właściwości strony” lub “Szablon”, gdy edytujesz poszczególne produkty w panelu administracyjnym WordPress.

hosting.com Hosting współdzielony

Wysoka wydajność dzięki procesorom AMD EPYC, pamięci masowej NVMe SSD i LiteSpeed, wewnętrzne wsparcie ekspertów 24/7, zaawansowane środki bezpieczeństwa, w tym SSL, brute force, ochrona przed złośliwym oprogramowaniem i DDoS, oszczędność do 73%

strona dostępu

Praktyka: Przykład dostosowania układu strony produktu.

Nauczmy się na konkretnym przykładzie, jak rearanżować elementy na stronie produktu, przenosząc formularz “Dodaj do koszyka” obok zdjęcia produktu, aby lepiej zachęcać do zakupu.

Najpierw w podtematach twojego tematu głównego. woocommerce Utwórz lub skopiuj w katalogu. single-product.phpMusimy przeanalizować logikę tego pliku.

Oryginalny szablon zwykle ładuje poszczególne elementy w kolejności. Musimy tylko ponownie zorganizować wywołania tych elementów. Oto uproszczony przykład kodu pokazujący, jak stworzyć układ z dwoma kolumnami:

Polecamy lekturę. No cóż! Najlepszy przewodnik po niestandardowych typach postów w WordPressie: od podstaw do zaawansowanych technik.。

Ścieżka do pliku: your-child-theme/woocommerce/single-product.php
while ( have_posts() ) : the_post(); ?>
<div id="product-<?php the_ID(); ?>" no numeric noise key 1007>
    <div class="custom-product-container">

<!-- 左栏：主要放图片和摘要 -->
        <div class="product-left-column">
            <p>
        </div>

<!-- 右栏：主要放标题、价格、表单和元信息 -->
        <div class="product-right-column">
            <?php
            // 输出产品摘要内容，但我们需要调整内部顺序
            ?>
            <div class="summary entry-summary">
                <?php
                // 1. 先输出标题
                woocommerce_template_single_title();
                // 2. 立即输出价格
                woocommerce_template_single_price();
                // 3. 紧接着输出“添加到购物车”表单
                woocommerce_template_single_add_to_cart();
                // 4. 再输出摘要描述
                woocommerce_template_single_excerpt();
                // 5. 输出元信息（如SKU、分类）
                woocommerce_template_single_meta();
                ?>
            </div>
        </div>

</div>

<div class="product-full-width">
        <br />
    </div>
</div>
<?php endwhile; // end of the loop. ?>

Następnie musisz dodać odpowiedni kod CSS, aby utworzyć układ z dwiema kolumnami. Dodaj poniższy kod CSS do podmotywu. style.css W dokumencie:

.custom-product-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 60px;
}
.product-left-column {
    flex: 1;
    min-width: 300px;
}
.product-right-column {
    flex: 1;
    min-width: 300px;
}
.product-full-width {
    flex-basis: 100%;
}
.summary entry-summary .cart {
    margin: 25px 0; /* 给购物车表单增加上下边距 */
}

Zaawansowane techniki optymalizacji i najlepsze praktyki.

Podstawowe dostosowania układu to tylko początek. Poniższe wskazówki pozwolą jeszcze bardziej zwiększyć skuteczność konwersji na stronie.

Hosting współdzielony InterServer

Hosting współdzielony $2.50 USD miesięcznie, pierwszy miesiąc $0.1 USD kod promocyjny tryinterserver, 461 skryptów aplikacji w chmurze, instalacja jednym kliknięciem.

strona dostępu

Użycie hooków akcji do dodawania i usuwania treści.

Szablony WooCommerce zawierają wiele akcji typu hook, które umożliwiają dodawanie lub usuwanie treści w określonych miejscach bez konieczności bezpośredniej modyfikacji plików szablonu. Na przykład chcąc dodać powiadomienie o niskim stanie magazynowym pod ceną produktu, można to zrobić w podszablonie. functions.php Dodaj to do środka:

add_action( 'woocommerce_single_product_summary', 'custom_stock_notice', 15 );
function custom_stock_notice() {
    global $product;
    if ( $product-&gt;get_stock_quantity() < 10 && $product->(get_stock_quantity() &gt; 0) {
        echo '<p class="low-stock" style="color:#d33;">🔥 Mamy ograniczone zapasy – zostały już tylko '. $product-&gt;get_stock_quantity() .' sztuk!</p>';
    }
}

Tutaj,woocommerce_single_product_summary To nazwa haka.15 Jest to priorytet (im mniejsza liczba, tym wcześniej zostanie wykonane) służący do kontrolowania pozycji wyjściowej.

Stosowanie różnych szablonów dla różnych typów produktów.

Możesz skorzystać z reguł warunkowych WooCommerce, aby zapewnić zróżnicowaną prezentację różnych typów produktów zewnętrznych / powiązanych, w tym prostych i zmiennych, a także produktów pogrupowanych. Na przykład w niestandardowym układzie. single-product.php W tym przypadku można to ocenić w następujący sposób:

global $product;
if ( $product->is_type( 'variable' ) ) {
    // 加载为可变产品优化的模板部分
    wc_get_template_part( 'single-product/add-to-cart', 'variable' );
} else if ( $product->is_type( 'grouped' ) ) {
    // 加载为分组产品优化的模板部分
    wc_get_template_part( 'single-product/add-to-cart', 'grouped' );
} else {
    // 加载简单产品的默认表单
    wc_get_template_part( 'single-product/add-to-cart', 'simple' );
}

Upewnij się, że doświadczenie na urządzeniach mobilnych jest responsywne.

Podczas dostosowywania układu konieczne jest przetestowanie widoku na urządzeniach mobilnych. Układ Flexbox użyty w powyższym przykładzie jest dość responsywny. Gdy ekran staje się węższy (na przykład na urządzeniu mobilnym), możesz chcieć, aby dwie kolumny zostały ułożone jedna na drugiej. Można to osiągnąć za pomocą zapytań mediów:

@media (max-width: 768px) {
    .custom-product-container {
        flex-direction: column;
        gap: 20px;
    }
}

Podsumowanie.

Dostosowanie szablonu strony produktowej w WooCommerce to kluczowy krok na drodze od standaryzacji do personalizacji oraz od prezentacji do konwersji. Dzięki zrozumieniu hierarchii szablonów WooCommerce i zastosowaniu bezpiecznej strategii nadpisywania motywów możesz dowolnie rearanżować elementy strony, podkreślając kluczowe informacje i zachęcając do zakupu. Niezależnie od tego, czy dodajesz wskazówki za pomocą prostych haków, czy też całkowicie przepisujesz pliki szablonów, aby stworzyć unikalny układ, głównym celem jest zmniejszenie tarcia decyzyjnego dla użytkowników i sprawienie, by proces zakupowy przebiegał płynnie. Pamiętaj, aby po każdej modyfikacji przeprowadzać testy na różnych urządzeniach i w różnych przeglądarkach oraz korzystać z narzędzi do analizy danych (np. map cieplnych), aby sprawdzić, jak zmiany wpływają na rzeczywiste wyniki, i stale optymalizować swoją stronę produktową.

FAQ – najczęściej zadawane pytania.

Czy aktualizacja wtyczki WooCommerce spowoduje nadpisanie moich zmian po dostosowaniu szablonu?

Nie, pod warunkiem, że używasz właściwych metod. Jeśli robisz to poprzez (pod)tematy, woocommerce Jeśli utworzysz kopię pliku w katalogu, aby zastąpić nim domyślny szablon, aktualizacja wtyczki WooCommerce nie wpłynie w żaden sposób na twoje niestandardowe pliki. Jest tak, ponieważ WooCommerce używa wersji z motywu jako pierwszej przy ładowaniu szablonu. To najbezpieczniejsze rozwiązanie.

Jak zastosować niestandardowy szablon tylko do określonej kategorii produktów?

To wymaga dodatkowej logiki kodowej. Jednym ze sposobów jest umieszczenie jej w pliku szablonu niestandardowego (np. ). single-product.phpW tym przykładzie użyto rozróżnienia warunkowego. Najpierw pobiera się kategorię aktualnego produktu, a następnie na podstawie wyniku dołącza różne części szablonu. Na przykład:if ( has_term( 't-shirts', 'product_cat' ) ) { ... }Inny, bardziej elastyczny sposób to użycie metody “przypisywania niestandardowych szablonów”, która polega na utworzeniu wielu plików szablonów, a następnie wyborze różnych szablonów dla różnych kategorii produktów za pomocą wtyczek innych firm lub niestandardowych pól.

Zmodyfikowałem szablon, ale na stronie głównej nic się nie zmieniło. Jak to sprawdzić?

Aby to sprawdzić, postępuj zgodnie z poniższymi krokami: Najpierw upewnij się, że edytujesz właściwy plik i że znajduje się on we właściwej ścieżce w aktywnym (pod)motywie (na przykład). your-theme/woocommerce/single-product.phpPo drugie, wyczyść pamięć podręczną WordPressa i przeglądarki, ponieważ czasami stare pliki pamięci podręcznej mogą utrudniać ładowanie nowego kodu. Następnie sprawdź, czy inne wtyczki (zwłaszcza te do pamięci podręcznej lub optymalizacji) lub funkcje motywu nie przesłoniły wprowadzonych przez ciebie zmian. Na koniec otwórz narzędzia deweloperskie przeglądarki (F12), aby sprawdzić, czy w konsoli nie ma błędów JavaScript, a także czy dodane przez ciebie selektory CSS są poprawnie stosowane.

Czy można użyć niestandardowych pól, aby dodać dodatkowy obszar wyświetlania informacji na stronie produktu?

Oczywiście, to bardzo częste zapotrzebowanie. Najpierw musisz użyć wtyczki (np. Advanced Custom Fields) lub kodu, aby utworzyć niestandardowe pole dla typu artykułu “Produkt”, na przykład “Wyróżniki produktu”. Następnie w niestandardowym szablonie produktu, w miejscu, w którym chcesz wyświetlić te informacje (na przykład po opisie produktu i przed zakładkami), możesz wywołać podobny kod. echo get_field('product_highlights'); Użyj kodu, aby wyświetlić wartość tego pola. Dzięki temu w szablonie można dynamicznie przedstawić dodatkowe informacje edytowane w tle.