Jak dostosować strony produktów WooCommerce?
Opublikowany: 2021-04-15
Szukasz sposobów na dostosowanie stron produktów? Projekt i wrażenia użytkownika stron produktów mogą pozytywnie wpłynąć na sprzedaż. Te strony wyświetlają Twoje produkty w najlepszym świetle, motywując kupujących do wciśnięcia przycisku „Dodaj do koszyka”.
Dobra strona produktu powinna mieć charakter informacyjny i powinna być zaprojektowana bez bałaganu. Ta strona powinna również wyrażać Twoją wyjątkową markę.
Istnieje wiele różnych sposobów dostosowania strony sklepu. Możesz korzystać z wbudowanych opcji, niestandardowych fragmentów kodu i wtyczek.
Dostosuj strony produktów WooCommerce
Dwie główne strony, na których występuje większość dostosowań w WooCommerce, to strona sklepu i strona produktów. Musisz je dostosować, aby zwiększyć sprzedaż i zoptymalizować początek procesu zakupowego.
Zalecamy schludny projekt, który koncentruje się na zapewnieniu najlepszej obsługi klienta, aby poprawić współczynniki konwersji.
W tym poście udostępnimy kilka rozwiązań umożliwiających programową edycję strony produktu.
Najpierw spójrzmy na domyślny układ strony produktu.
Układ strony produktu WooCommerce
Tak wyświetla się strona produktu: 
Istnieją 2 główne pliki WooCommerce odpowiedzialne za wyjście strony produktu.
- single-product.php: Buduje wymagany szablon dla bieżącego układu
- content-single-product.php: Ten plik drukuje zawartość szablonu
Możesz nadpisać pliki szablonów za pomocą motywu potomnego. Możesz także użyć haków WooCommerce zamiast zastępować pliki szablonów tam, gdzie to możliwe. To jedna z najlepszych praktyk zalecanych przez WordPressa.
Zobaczmy kilka praktycznych przykładów, jak możesz dostosować stronę produktu.
Edytuj stronę produktu WooCommerce za pomocą haków
W tej sekcji użyjemy haczyków, aby dostosować stronę produktu.
1. Usuń elementy
Na stronie produktów znajduje się kilka haczyków do usuwania różnych elementów. Haki działają z określonymi elementami.
Oznacza to, że musisz użyć odpowiedniego haka, funkcji i wartości priorytetu.
Oto kilka skryptów do usuwania różnych elementów i dostosowywania strony produktu. Skopiuj go i wklej do pliku functions.php:
// remove title
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
// remove rating stars
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
// remove product meta
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
// remove description
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
// remove images
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
// remove related products
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
// remove additional information tabs
remove_action('woocommerce_after_single_product_summary ','woocommerce_output_product_data_tabs',10);
2. Dodaj nowe elementy
Możesz dodać nową treść do strony produktu, tworząc własną funkcję. Należy go skopiować i wkleić do pliku functions.php:
add_action('woocommerce_after_single_product_summary','njengah_callback_function');
function njengah_callback_function(){
printf('
<h1> Hey there !</h1>
<div><h5>Welcome to my custom product page</h5>
</div>');
}
Oto wynik: 
3. Edytuj zakładki produktów
Możesz użyć zaczepu filtra woocommerce_product_tabs, aby usunąć, dodać, zmienić kolejność lub dodać nową kartę w sekcji Informacje dodatkowe.
Oto przykład skryptu, który usunie zakładkę Opis i jej zawartość, zmieni nazwę zakładki Recenzje oraz zmieni priorytet Dodatkowych informacji na pierwsze miejsce. Należy go skopiować i wkleić do pliku functions.php:
add_filter( 'woocommerce_product_tabs', 'njengah_remove_product_tabs', 98 );
function njengah_remove_product_tabs( $tabs ) {
unset( $tabs['description'] ); // Remove the Description tab
$tabs['reviews']['title'] = __( 'Ratings' ); // Rename the Reviews tab
$tabs['additional_information']['priority'] = 5; // Additional information at first
return $tabs;
}
Oto wynik: 
Możesz utworzyć nową kartę, używając poniższego kodu. Należy go skopiować i wkleić do pliku functions.php:
add_filter( 'woocommerce_product_tabs', 'njengah_new_product_tab' );
function njengah_new_product_tab( $tabs ) {
// Adds the new tab
$tabs['test_tab'] = array(
'title' => __( 'New Tab Here!', 'woocommerce' ),
'priority' => 50,
'callback' => 'njengah_new_product_tab_content'
);
return $tabs;
}
function njengah_new_product_tab_content() {
echo '<h2>New Tab Here!</h2><p>Here\'s your new product tab content</p>.';
}
Oto wynik: 
Dostosuj stronę produktu nadpisując pliki szablonów WooCommerce
Możesz także edytować stronę produktu WooCommerce programowo, zastępując pliki szablonów.
Należy jednak pamiętać, że ta metoda jest bardziej ryzykowna niż poprzednia. Dlatego zalecamy utworzenie pełnej kopii zapasowej witryny przed kontynuowaniem.
Ten proces jest podobny do zastępowania dowolnego innego pliku w motywie podrzędnym.
Zalecamy utworzenie motywu podrzędnego lub wtyczki w celu wprowadzenia zmian.
1. Edytuj meta-informacje
W tej sekcji dokonamy edycji metainformacji. Oznacza to, że mamy do pliku szablonu odpowiedzialnego za wydrukowanie odpowiednich danych. Jest to plik meta.php.
Ten plik znajduje się we wtyczce WooCommerce i podąża tą ścieżką: woocommerce/templates/single-product/meta.php.
Następnym krokiem jest edycja katalogu plików motywów podrzędnych i utworzenie folderu WooCommerce.
Utwórz w nim inny folder o nazwie single-product i wklej plik meta.php: Child_theme/woocommerce/single-product/meta.php
Umożliwi to edycję pliku meta.php i zobaczenie zmian w interfejsie użytkownika.
Poniższy przykładowy plik meta.php będzie:
- Zmień etykietę SKU na ID
- Zmień tagi na Opublikowane pod
- Usuń etykietę kategorii
global $product;
?>
<div class="product_meta">
<?php do_action( 'woocommerce_product_meta_start' ); ?>
<?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>
<span class="sku_wrapper"><?php esc_html_e( 'ID:', 'woocommerce' ); ?>
<span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?>
</span>
</span>
<?php endif; ?>
<?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( '', '', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>
<?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Published under:', 'Published under:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>
<?php do_action( 'woocommerce_product_meta_end' ); ?>
</div>
Oto wynik: 
2. Dostosuj stronę produktu za pomocą skryptu CSS
Możesz łatwo edytować stronę produktu WooCommerce programowo za pomocą kodu CSS.
Pomoże Ci wystylizować stronę produktu i nadać jej wygląd i charakter Twojej firmy.
Pierwszą rzeczą, którą musisz zrobić, to utworzyć nowy plik w motywie potomnym z rozszerzeniem .css, aby móc tam dodać swoje skrypty CSS. Możesz nazwać go single-product.css.
Umieść plik w głównym folderze motywu potomnego na tym samym poziomie co pliki functions.php i style.css.
Wklej następujący skrypt w pliku functions.php motywu podrzędnego i w razie potrzeby zastąp nazwę pliku CSS.
add_action( 'wp_enqueue_scripts', 'njengah_custom_product_style' );
function njengah_custom_product_style() {
if ( is_product() ){
wp_register_style( 'product_css', get_stylesheet_directory_uri() . '/single-product.css', false, '1.0.0', 'all' );
wp_enqueue_style('product_css');
}
}
Warunek if(is_product()) sprawdzi, czy bieżąca strona jest stroną produktu. Zapobiega to niepotrzebnemu ładowaniu pliku CSS, gdy nie jest to strona produktu.
Do tej pory powinieneś być w stanie edytować styl stron produktów za pomocą niestandardowych reguł CSS.
Wniosek
W tym poście udostępniliśmy niektóre sposoby dostosowywania strony produktu. Jednak zanim wprowadzisz jakiekolwiek zmiany, zalecamy skorzystanie z narzędzia takiego jak Hotjar, które dostarcza danych na temat interakcji użytkowników z Twoją stroną.
Możesz także sprawdzić, co robią sprzedawcy internetowi, tacy jak Amazon i Walmart. Możesz naśladować ich wygląd i styl, dołączając wspólne funkcje.
Jeśli potrzebujesz pomocy w dostosowaniu tej strony, skontaktuj się z wykwalifikowanym programistą WordPress.
Podobne artykuły
- Ponad 100 porad, sztuczek i fragmentów Kompletny przewodnik po ukryciu WooCommerce
- Lista haków WooCommerce » Globalne, koszyk, kasa, produkt
- Jak programowo tworzyć produkt WooCommerce
- Jak zmienić liczbę produktów w witrynie sklepowej w rzędzie?
- Jak ustawić cenę produktu WooCommerce za kg?
- Jak uzyskać szczegóły zamówienia po złożeniu zamówienia w WooCommerce?
- Gutenberg vs Elementor, który jest lepszy WordPress Page Builder
- Jak stworzyć niestandardową stronę kategorii w WooCommerce?
- Jak stylizować stronę kasy WooCommerce
- Jak wyczyścić koszyk przy wylogowaniu w WooCommerce
- Jak zmienić przycisk Dodaj do koszyka, aby przeczytać więcej WooCommerce
- Jak usunąć symbol zastępczy obrazu produktu w WooCommerce?
- Jak dodać walutę do WooCommerce [Waluta niestandardowa]
- Jak zachować domyślnie otwartą kartę opisu WooCommerce?
- Jak ukryć opis produktu Nagłówek WooCommerce
- Jak dodać tekst przed ceną w WooCommerce »Dodaj tekst przed ceną
- Jak ustawić stronę produktu z motywem WooCommerce Storefront na pełną szerokość?
- Jak zmienić produkty na stronę Motyw WooCommerce Storefront
- Jak uzyskać tytuł produktu WooCommerce?
- Jak ustawić rozmiary miniatur witryny sklepu WooCommerce?