Jak programowo edytować stronę produktu WooCommerce?

Opublikowany: 2021-01-09

Szukasz sposobów na dostosowanie strony produktu w swoim sklepie eCommerce? W tym przewodniku pokażemy, jak programowo edytować stronę produktu WooCommerce .

Dostosowywanie strony produktu

Mimo że możesz dostosować wszystko w swoim sklepie, dwie główne strony, na których odbywa się większość dostosowań w WooCommerce, to strona sklepu i strona produktów. Jeśli chcesz zwiększyć sprzedaż i zoptymalizować początek procesu zakupowego, musisz popracować nad obydwoma. Widzieliśmy już, jak dostosować stronę Sklepu, więc dzisiaj pokażemy Ci, jak programowo edytować stronę Produktu (za pomocą kodu).

Zgrabny projekt, który koncentruje się na zapewnieniu najlepszej obsługi klienta, pomoże Ci poprawić ogólny proces zakupu i zwiększyć współczynniki konwersji. Istnieją dwa główne sposoby dostosowania strony Produktu:

Z wtyczkami
Programowo

Mimo że niektóre wtyczki mogą ci pomóc, znalezienie takiej, która ma wszystkie potrzebne funkcje, może być długim procesem. Jeśli więc masz podstawowe umiejętności programistyczne, doskonałą opcją jest programowa edycja strony produktu WooCommerce . Nie tylko możesz uniknąć instalowania narzędzi innych firm, ale także będziesz mieć znacznie większą elastyczność w dostosowywaniu wszystkiego, co chcesz.

Jeśli chcesz dostosować stronę produktu za pomocą wtyczek i programów do tworzenia stron, zapoznaj się z tym przewodnikiem.

Jak programowo edytować stronę produktu WooCommerce?

W tej sekcji dowiesz się, jak edytować stronę produktu WooCommerce dla pojedynczych produktów. Omówimy następujące tematy.

Korzystanie z haczyków
1. Usuń elementy
2. Zmień kolejność elementów
3. Dodaj nowe elementy
4. Zastosuj logikę warunkową
  1. Zalogowany użytkownik i rola użytkownika
  2. Identyfikatory produktów i taksonomie
5. Edytuj zakładki produktów
6. Wsparcie dla różnych produktów
Zastąp pliki szablonów WooCommerce
1. Edytuj meta-informacje
2. Przełącz się na niestandardowy szablon dla określonej kategorii produktów
  1. Edytuj plik single-product.php
  2. Utwórz nowy plik content-single-product.php
  3. Utwórz niestandardowy szablon, edytując nowy plik content-single-product.php
Dostosowywanie strony produktu za pomocą skryptów CSS

Układ strony produktu WooCommerce

Zanim zaczniemy z samouczkiem, spójrzmy na domyślną stronę produktu w WooCommerce dla pojedynczych produktów i zidentyfikujmy każdy element. Zwróć uwagę na różne sekcje w szablonie i sposób organizacji informacji, ponieważ odniesiemy się do nich w dalszej części przewodnika. Strona pojedynczego produktu WooCommerce Istnieją dwa 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

Oba pliki można nadpisać przy użyciu motywu potomnego. Jest to powszechna praktyka zastępowania plików szablonów WooCommerce. Powinieneś jednak spróbować użyć haków WooCommerce zamiast zastępować pliki szablonów tam, gdzie to możliwe, ponieważ jest to jedna z najlepszych praktyk zalecanych przez WordPress podczas dostosowywania witryny.

Z drugiej strony w przypadku złożonych zadań, które obejmują funkcje lub obiekty, może być konieczna edycja plików szablonów. Łącząc obie techniki, powinieneś być w stanie osiągnąć prawie dowolne dostosowanie. W tym samouczku pokażemy, jak edytować stronę produktu WooCommerce za pomocą obu metod.

Zanim zaczniemy, upewnij się, że stworzyłeś motyw potomny, aby przetestować swoje skrypty lub użyj wtyczki do wygenerowania. Zobaczmy kilka praktycznych przykładów, dzięki którym dowiesz się, jak każda z tych technik działa, aby jak najlepiej wykorzystać Twój sklep.

1) Edytuj stronę produktu WooCommerce za pomocą haków

UWAGA : Jeśli nie znasz haków WooCommerce i jak ich używać, zapoznaj się z tym przewodnikiem.

1.1) Usuń elementy ze stron pojedynczych produktów

Istnieje kilka haczyków WooCommerce, których możesz użyć do usunięcia dowolnego elementu na jednej stronie produktu. Każdy z nich będzie współpracował z grupą konkretnych elementów, więc musisz użyć odpowiedniego hooka, odpowiedniej funkcji zwrotnej WooCommerce i odpowiedniej wartości priorytetu.

Na przykład, jeśli chcesz usunąć tytuły wszystkich stron produktów, użyjesz następującego skryptu w pliku functions.php motywu potomnego.

 remove_action(/* hook -> */'woocommerce_single_product_summary', /* callback function ->*/ 'woocommerce_template_single_title', /* position ->*/5 );

Wszystkie hooki i związane z nimi parametry znajdziesz tutaj lub w komentarzach w pliku content-single-product.php wtyczki WooCommerce. Teraz spójrzmy na kilka innych przykładowych skryptów, aby usunąć różne elementy i dostosować stronę produktu.

 // 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);

1.2) Zmień kolejność elementów

Zmiana kolejności elementów strony produktu jest dość prosta. Najpierw musisz usunąć haczyk w taki sam sposób, jak zrobiliśmy to wcześniej, a następnie dodać go ponownie z innym priorytetem/numerem zamówienia. Na przykład poniższy skrypt przeniesie opis produktu tuż pod tytuł:

 // 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 );

Jak widać, usuwamy akcję, a następnie dodajemy ją ponownie z innym priorytetem (6 zamiast 20). Dlaczego wybraliśmy priorytet/kolejność 6? Wiemy, że element title ma priorytet o wartości 5, więc pozwala nam to poznać wartość priorytetu, którą musimy przypisać do naszego niestandardowego hooka, aby wyświetlić element wywołania zwrotnego zaraz po tytule (6).

Korzystając z informacji, które podaliśmy w punkcie 1.1, możesz zrobić to samo z dowolnymi hookami i wywołaniami zwrotnymi i ustawić je w dowolnej kolejności.

1.3) Dodaj nowe elementy

Jeśli chcesz dostosować stronę produktu WooCommerce, dodając nową zawartość, może być konieczne zastąpienie plików szablonów. Możesz jednak również użyć następującego haka, aby dodać nową zawartość:

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

woocommerce_before_single_product_summary hak dostosowywanie strony produktu Alternatywnie możesz stworzyć własną funkcję:

 add_action('woocommerce_after_single_product_summary','QuadLayers_callback_function');
function QuadLayers_callback_function(){
    printf('
    <h1> Cześć!</h1>
    <div><h5>Witamy na mojej niestandardowej stronie produktu</h5>
    <h4><a href="?link-to-somewere">Link do jakiegoś miejsca!</a></h4>
    <img src="https://img.freepik.com/free-vector/bird-silhouette-logo-vector-illustration_141216-100.jpg" />
    </div>');
}

1.4) Logika warunkowa na jednej stronie produktu

Widzieliśmy wcześniej, jak dodawać pola warunkowe na stronie kasy, ale można je również dodać do strony produktu. Możesz utworzyć logikę warunkową, aby spełnić żądane wymagania, używając dowolnej z natywnych funkcji WordPressa. Przyjrzyjmy się kilku przykładom.

1.4.1) Zalogowany użytkownik i rola użytkownika

user_is_logged_in() to domyślna funkcja WordPress używana do sprawdzania poprawności odwiedzających witrynę. Dodatkowo możemy użyć funkcji wp_get_current_user() do pobrania wszystkich informacji związanych z zalogowanym użytkownikiem. W poniższym skrypcie po prostu dodajemy trochę treści na podstawie tego, czy użytkownik jest zalogowany i jego rolę, ale możesz dodać własne funkcje dla bardziej złożonych funkcji

 add_action('woocommerce_before_single_product','QuadLayers_get_user');
funkcja QuadLayers_get_user() {
    if( is_user_logged_in() ) {
    $użytkownik = wp_get_current_user(); 
    printf ('<h1>Cześć ' .$user->nazwa_użytkownika.'!</h1>');
    $role = ( tablica ) $użytkownik->role;
        if($roles[0]=='administrator'){
            echo "<h4><b>Jesteś $roles[0]</h4></b>";
        }     
    } 
    w przeciwnym razie {
    zwróć tablicę();
    }     
}

1.4.2) Identyfikatory produktów i taksonomie

Podobnie możemy pobrać identyfikator produktu i/lub kategorie produktów. Różnica polega na tym, że będziemy używać globalnego obiektu WP $post do uzyskania identyfikatora oraz funkcji get_the_terms() do uzyskania kategorii produktów.

 add_action('woocommerce_before_single_product','QuadLayers_get_product_taksonomies');
funkcja QuadLayers_get_product_taxonomies(){ 
    globalny $post; 
    $term_obj_list = get_the_terms( $post->ID, 'product_cat' );
    $terms_string = join(', ', wp_list_pluck($term_obj_list, 'name'));
    if($terms_string=='Plakaty'){
        Echo "
<h1>To jeden z naszych najlepszych $terms_string</h1>"; echo "<h2>Identyfikator produktu: $post->ID"; } }

Powyższy skrypt zwróci pojedynczą kategorię. Jeśli potrzebujesz pobrać wiele kategorii lub tagów, musisz utworzyć bardziej złożoną funkcję. Będziesz musiał zapętlić taksonomie przed zastosowaniem warunków, jak pokazano poniżej:

 add_action('woocommerce_before_single_product','QuadLayers_get_multiple_taxonomies');
funkcja QuadLayers_get_multiple_taxonomies(){
    globalny $post;
    $args = array( 'taksonomia' => 'tag_produktu',);
    $terms = wp_get_post_terms($post->ID,'product_tag', $args);
    $liczba = ilość($warunki);
 jeśli ($liczba > 0) {
        echo '<div class="custom-content"><h4>Lista tagów:</h4><ul>';
        foreach ($terms as $term) {echo '<li>'.$term->nazwa.'</li>';}
        echo "</ul></div>";
    }
}

1.5) Edytuj zakładki produktów

Hak filtra woocommerce_product_tabs pozwala nam usuwać, dodawać, zmieniać kolejność lub dodawać nową kartę w sekcji Informacje dodatkowe . Poniższy skrypt usunie zakładkę Opis i jej zawartość, zmieni nazwę zakładki Recenzje i zmieni priorytet Dodatkowych informacji na pierwsze miejsce.

 add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
function woo_remove_product_tabs( $tabs ) {
    unset( $tabs['opis'] ); // Usuń kartę Opis
    $tabs['reviews']['title'] = __( 'Oceny' ); // Zmień nazwę karty Recenzje
    $tabs['additional_information']['priority'] = 5; // Na początek dodatkowe informacje
    return $tabs;
}

Programowo edytuj stronę produktu WooCommerce - Dostosuj zakładki produktów Aby edytować zawartość zakładki, musisz użyć funkcji zwrotnej takiej jak ta:

 add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 );

function woo_custom_description_tab( $tabs ) {
	$tabs['description']['callback'] = 'woo_custom_description_tab_content'; // Niestandardowe wywołanie zwrotne
	return $tabs;
}
funkcja woo_custom_description_tab_content() {
	Echo '
<h2>Opis niestandardowy</h2>
'; echo 'Oto własny opis'; }

Podobnie możemy utworzyć nową zakładkę w następujący sposób:

 add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {	
	// Dodaje nową kartę	
	$tabs['test_tab'] = tablica (
		'title' => __( 'Nowa karta produktu', 'woocommerce' ),
		'priorytet' => 50,
		'callback' => 'woo_new_product_tab_content'
	);
	return $tabs;
}
funkcja woo_new_product_tab_content() {
	echo '<h2>Nowa karta produktów</h2><p>Oto zawartość nowej karty produktów</p>.'; 
}

W tym przykładzie właśnie utworzyliśmy nową kartę o nazwie „Nowa karta produktu”. Tak to wygląda z przodu.

1.6) Wsparcie dla produktów zmiennych

Odmiany produktów to domyślna funkcja WooCommerce i możesz tworzyć i używać produktów zmiennych bez żadnych dostosowań. Musisz jednak przestrzegać wytycznych WooCommerce, aby niestandardowe rozwiązanie było zgodne z odmianami produktów.

Należy pamiętać, że każde niestandardowe rozwiązanie musi być zintegrowane z całą witryną, a nie z pojedynczą stroną. Mając to na uwadze, nadal możemy korzystać z niektórych dostępnych haczyków związanych ze zmiennymi produktami. Te haczyki będą się uruchamiać tylko wtedy, gdy znajdą się na stronie zmiennej produktu.

woocommerce_before_variations_form
woocommerce_before_single_variation
woocommerce_single_variation
woocommerce_after_single_variation

2) Dostosuj stronę produktu, zastępując pliki szablonów WooCommerce

Drugą alternatywą do programowej edycji strony produktu WooCommerce jest zastąpienie plików szablonów. Ponieważ ta metoda jest nieco bardziej ryzykowna niż poprzednia, zalecamy utworzenie pełnej kopii zapasowej witryny przed rozpoczęciem. Jeśli nie wiesz, jak to zrobić, zapoznaj się z tym przewodnikiem, jak wykonać kopię zapasową witryny WordPress.

Zastępowanie plików szablonów WooCommerce jest podobne do zastępowania dowolnego innego pliku w motywie podrzędnym, więc aby uniknąć utraty dostosowań podczas aktualizacji motywu, zalecamy utworzenie motywu podrzędnego lub użycie dowolnej z tych wtyczek, jeśli go nie masz.

2.1) Edytuj meta-informacje

Aby edytować meta-informacje, musimy nadpisać plik szablonu odpowiedzialny za wydrukowanie odpowiednich danych. Plik meta.php znajdujący się we wtyczce WooCommerce podąża tą ścieżką: woocommerce/templates/single-product/meta.php

Teraz edytuj katalog plików motywów podrzędnych i utwórz folder WooCommerce. Następnie utwórz w nim inny folder o nazwie single-product i wklej tam plik meta.php : Child_theme/woocommerce/single-product/meta.php

Po tym powinieneś być w stanie edytować plik meta.php i zobaczyć swoje zmiany 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

 globalny produkt;
?>
<div class="product_meta">

	<?php do_action( 'woocommerce_product_meta_start' ); ?>

	<?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'zmienna' ) ) ) : ?>

		<span class="sku_wrapper"><?php esc_html_e( 'ID:', 'woocommerce' ); ?> 
			<span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'nie dotyczy', '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( 'Opublikowane pod:', 'Opublikowane pod:', count( $product->get_tag_ids () ), 'woocommerce' ). ' ', '</span>' ); ?>
	<?php do_action( 'woocommerce_product_meta_end' ); ?>
</div>

2.2) Przełącz się na niestandardowy szablon dla określonej kategorii produktów

Teraz spróbujmy bardziej złożonego zadania. Zastąpimy szablon pojedynczego produktu tylko wtedy, gdy aktualny produkt należy do określonej kategorii.

2.2.1) Edytuj plik single-product.php

Najpierw skopiuj plik single-product.php i wklej go do folderu motywu potomnego, w katalogu WooCommerce:

Child_theme/woocommerce/single-product.php

Następnie otwórz plik i sprawdź wiersz 37: wc_get_template_part('content','single-product');

W ten sposób plik content-single-product.php zaczyna działać, drukując wszystkie elementy bieżącego produktu, aby zakończyć pętlę i zbudować układ.

Chcemy nadpisać ten plik tylko wtedy, gdy produkt należy do określonej kategorii, dlatego usuniemy wiersz 37: wc_get_template_part( 'content', 'single-product' ); i zastąp go następującym skryptem:

 $terms = wp_get_post_terms( $post->ID, 'product_cat' );
				$categories = wp_list_pluck( $terms, 'slug' );
			
				if ( in_array( 'plakaty', $categories ) ) {
					wc_get_template_part( 'treść', 'plakaty-pojedyncze-produktowe' );
				} w przeciwnym razie {
					wc_get_template_part( 'zawartość', 'pojedynczy produkt' );
				}

Zwróć uwagę, że używamy przykładowych produktów dostarczonych przez WooCommerce, więc istnieje kategoria o nazwie „ Plakaty ”, której używamy w tym przykładzie. Po prostu zastąp „ plakaty ” istniejącą kategorią produktów w swojej witrynie.

Pamiętaj, że ślimak wszystkich kategorii produktów możesz znaleźć w głównym panelu WordPressa > Produkty > Kategorie .

2.2.2) Utwórz nowy plik content-single-product.php

Teraz musimy utworzyć nowy plik, który zastąpi domyślny plik content-single-product.php . Ten plik będzie miał w nazwie nazwę kategorii.

Spójrz na powyższy przykład, aby zobaczyć, jak wywoływany jest plik content-single-product-posters.php . Jest to ważne, ponieważ nazwa pliku musi być zgodna z kodem w poprzednim kroku, więc plik powinien mieć nazwę content-single-product-/*YOURCATEGORYSLUG*/.php .

W ten sposób wc_get_template_part( 'content', 'single-product-YOURCATEGORY' ) wywoła plik content-single-product-YOURCATEGORY.php i zastąpi domyślny plik szablonu WooCommerce.

Po prostu wklej domyślny plik content-single-product.php w folderze WooCommerce swojego motywu potomnego, zmień jego nazwę zgodnie z instrukcjami wyjaśnionymi powyżej i wykonaj kilka edycji, aby go przetestować.

2.2.3) Utwórz niestandardowy szablon, edytując nowy plik `content-single-product.php`

To jest przykładowa strona produktu, która wyświetli się tylko wtedy, gdy aktualny produkt będzie należał do kategorii „ plakaty ”. Zobaczysz, że dodaliśmy trochę treści, dodaliśmy i usunęliśmy elementy, zmieniliśmy ich kolejność i uruchomiliśmy kilka skrótów.

Pomimo tego, że jest podstawowym przykładem, da ci wyobrażenie o tym, co możesz zrobić na stronie szablonu i pozwoli ci odkryć nowe możliwości.

 // usuń elementy podsumowania produktu
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
	
		// Treść niestandardowa
		printf('<h1>To jest <b>'.$post->nazwa_postu.' </b>plakat</h1>');
		printf('<h4>W pełni dostosowana strona produktu dla produktów z kategorii "plakaty"</h4>');
		// Opis
		printf('<h5>'.$post->post_excerpt.'</h5>');
		//Miniaturka
		do_action( 'woocommerce_before_single_product_summary' );
				
		//dodaj meta
		do_action( 'woocommerce_single_product_summary');
		// skróty
		echo do_shortcode(' [ add_to_cart show_price="false" class="my-addtocart" ] '); echo "<h3>Kontakt:</h3>".do_shortcode('[wpforms]'); echo "<h3>Więcej plakatów:</h3>".do_shortcode(' [ product_category category="posters" orderby="desc" limit="4" ] ');

Teraz, jeśli sprawdzimy frontend, zobaczymy: Jak programowo edytować stronę produktu WooCommerce - Szablon strony produktu dla określonej taksonomii Zauważ, że używamy globalnego obiektu post. var_dump($post); aby pokazać Ci wszystkie dostępne informacje związane z aktualnym produktem. Możesz użyć dowolnych jego danych, tak jak to zrobiliśmy w przykładowym skrypcie z opisem produktu: $post->post_excerpt .

3) Dostosuj stronę produktu za pomocą skryptu CSS

Innym wygodnym i prostym sposobem programowej edycji strony produktu WooCommerce (i dowolnej innej strony) jest użycie kodu CSS . Pomoże Ci to stylizować stronę produktu i nadać jej wygląd i charakter Twojej firmy.

1. Najpierw musisz utworzyć nowy plik w motywie potomnym z rozszerzeniem .css , aby móc tam dodać swoje skrypty CSS. Zalecamy nazwanie go single-product.css lub czymś podobnym, aby łatwo go było znaleźć.
2. Następnie umieść plik w głównym folderze motywu potomnego na tym samym poziomie co pliki functions.php i style.css .
3. Następnie wklej następujący skrypt do pliku functions.php motywu potomnego i w razie potrzeby zastąp nazwę pliku CSS.

 add_action( 'wp_enqueue_scripts', 'load_custom_product_style' );
      funkcja load_custom_product_style() {
        jeśli ( is_product() ){
        wp_register_style( 'product_css', get_stylesheet_directory_uri() . '/single-product.css', false, '1.0.0', 'all' );
          wp_enqueue_style('product_css');
        }
	  }

if(is_product()) sprawdzi, czy bieżąca strona jest stroną produktu. Zapobiega to niepotrzebnemu ładowaniu pliku CSS, gdy nie jest to strona produktu.

4. Po dodaniu tego fragmentu kodu powinieneś móc edytować styl stron produktów, dodając niestandardowe reguły CSS do pliku CSS.

Mimo że ta metoda jest dość prosta i zapewni szybkie i łatwe rozwiązanie, w niektórych przypadkach może nie być idealna. Ponieważ CSS można edytować z poziomu frontendu, jeśli użytkownik wie, jak korzystać z narzędzi programistycznych przeglądarki, może łatwo uwidocznić każdy ukryty element, edytując CSS.

Edytuj stronę pojedynczego produktu WooCommerce za pomocą CSS

Zobaczmy kilka innych przykładów zmian, które możesz wprowadzić na stronie produktu przy użyciu odrobiny CSS.

Aby zastosować następujące skrypty, na pulpicie WordPress przejdź do Wygląd > Dostosuj > Dodatkowy CSS.

Zmień rozmiar czcionki tytułu

Spowoduje to zmianę rozmiaru czcionki tytułów produktów na stronie na 32. Po prostu dostosuj kod, aby wybrać żądany rozmiar.

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

Zmień kolor tytułu

Możesz także dostosować kolor tytułu strony produktu. Aby to zrobić, po prostu użyj poniższego kodu i dostosuj kolor. W tym przykładzie używamy pomarańczowego. Zalecamy użycie selektora kodu szesnastkowego, takiego jak ten, aby wybrać żądany kolor.

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

Zmień kolor przycisku Kup teraz

Podobnie możesz zmienić kolor przycisku Kup teraz. W tym przykładzie używamy dodger blue, ale możesz wybrać dowolny inny kolor, dostosowując kod.

 .woocommerce div.product .button { 
        tło: #1E90FF; 
}

Wniosek

Podsumowując, dostosowanie sklepu internetowego jest kluczem do wyróżnienia się na tle konkurencji. Strony produktów to jedne z najważniejszych stron w każdym sklepie i możesz zrobić wiele, aby poprawić wrażenia klientów i zwiększyć sprzedaż.

Nawet jeśli możesz użyć do tego wtyczek, zalecamy programową edycję strony produktu WooCommerce, jeśli masz pewne umiejętności kodowania. Zapewnia dużą elastyczność w dostosowywaniu dowolnego elementu sklepu bez konieczności instalowania dodatkowych narzędzi. W tym przewodniku zobaczyliśmy, jak dostosować stronę produktu na trzy różne sposoby:

Korzystanie z haczyków
Zastępowanie szablonów WooCommerce
Ze skryptami CSS

Jeśli to możliwe, powinieneś spróbować użyć hooków WooCommerce zamiast nadpisywania plików szablonów. Jest to jedna z najlepszych praktyk zalecanych przez WordPress i jest mniej ryzykowna. Jednak w przypadku złożonych zadań, które obejmują funkcje lub obiekty, może być konieczna edycja plików szablonów. Jeśli uda Ci się połączyć obie techniki, będziesz mógł dostosować wszystko, co chcesz w swoim sklepie.

Na koniec spójrz na kompletny motyw potomny, który zawiera wszystkie przykładowe skrypty, których użyliśmy w tym samouczku. Aby uzyskać więcej informacji na temat dostosowywania sklepu, zapoznaj się z następującymi przewodnikami:

Naucz się dostosowywać pliki szablonów WooCommerce
Jak dostosować stronę sklepu WooCommerce?
Dostosuj przycisk Dodaj do koszyka w WooCommerce
Jak usunąć produkty powiązane z WooCommerce?
Jak edytować kasę WooCommerce (kodowanie i wtyczki)

Czy miałeś jakieś problemy z naszym samouczkiem? Daj nam znać w sekcji komentarzy poniżej, a my dołożymy wszelkich starań, aby Ci pomóc.

Jak programowo edytować stronę produktu WooCommerce?

Dostosowywanie strony produktu

Jak programowo edytować stronę produktu WooCommerce?

Układ strony produktu WooCommerce

1) Edytuj stronę produktu WooCommerce za pomocą haków

1.1) Usuń elementy ze stron pojedynczych produktów

1.2) Zmień kolejność elementów

1.3) Dodaj nowe elementy

1.4) Logika warunkowa na jednej stronie produktu

1.4.1) Zalogowany użytkownik i rola użytkownika

1.4.2) Identyfikatory produktów i taksonomie

1.5) Edytuj zakładki produktów

1.6) Wsparcie dla produktów zmiennych

2) Dostosuj stronę produktu, zastępując pliki szablonów WooCommerce

2.1) Edytuj meta-informacje

2.2) Przełącz się na niestandardowy szablon dla określonej kategorii produktów

2.2.1) Edytuj plik single-product.php

2.2.2) Utwórz nowy plik content-single-product.php

2.2.3) Utwórz niestandardowy szablon, edytując nowy plik content-single-product.php

3) Dostosuj stronę produktu za pomocą skryptu CSS

Edytuj stronę pojedynczego produktu WooCommerce za pomocą CSS

Zmień rozmiar czcionki tytułu

Zmień kolor tytułu

Zmień kolor przycisku Kup teraz

Wniosek

2.2.3) Utwórz niestandardowy szablon, edytując nowy plik `content-single-product.php`