Jak programowo edytować stronę sklepu WooCommerce (CSS i PHP)

Opublikowany: 2020-08-27

Szukasz sposobów na dostosowanie strony sklepu? W tym samouczku pokażemy, jak programowo edytować stronę sklepu WooCommerce przy użyciu zarówno PHP, jak i CSS .

W każdym sklepie internetowym bardzo ważna jest edycja i optymalizacja strony sklepu, aby zwiększyć współczynniki konwersji. Strona sklepu to miejsce, w którym wyświetlasz swoje produkty i może to zrobić lub zepsuć Twój biznes. Jeśli prowadzisz sklep WooCommerce, zdecydowanie zalecamy dostosowanie strony sklepu i maksymalne jej wykorzystanie. W tym przewodniku pokażemy, jak programowo edytować stronę sklepu WooCommerce .

Dlaczego ważna jest edycja strony sklepu w WooCommerce?

Strona sklepu jest jedną z najważniejszych stron w WooCommerce. To miejsce, w którym prezentujesz swoje produkty odwiedzającym, co może mieć ogromny wpływ na wydajność Twojego sklepu. Dobra strona sklepu może poprawić wrażenia użytkownika, zwiększyć współczynniki konwersji i pomóc w generowaniu zaangażowania użytkowników. Z drugiej strony, zła strona sklepu może zrobić dokładnie odwrotnie i zdusić Twój biznes.

Dlatego musisz go zoptymalizować, aby zmaksymalizować sprzedaż . Możesz to zrobić za pomocą wtyczek i kreatorów stron, ale jeśli masz umiejętności kodowania, możesz stworzyć własne rozwiązanie.

Jak programowo edytować stronę sklepu WooCommerce

Wcześniej widzieliśmy różne metody dostosowywania strony sklepu. Jednak w tym samouczku skupimy się na tym, jak programowo edytować stronę sklepu WooCommerce za pomocą odrobiny kodu CSS i PHP. Warto zauważyć, że w tym przewodniku będziemy pracować nad motywem potomnym, a także edytować domyślny szablon sklepu WooCommerce. Skoncentrujemy się na plikach szablonów WooCommerce i niektórych odniesieniach do pliku functions.php motywu potomnego.

W tym samouczku dowiesz się, jak programowo edytować stronę sklepu WooCommerce, aby:

  1. Wyłącz domyślny szablon strony sklepu WooCommerce
  2. Dostosuj nagłówki i treść
    1. Najpopularniejsze produkty
    2. Najlepiej sprzedające się produkty
    3. Najwyżej oceniane
    4. Wyświetlaj produkty według taksonomii
    5. Dostosuj stronę sklepu WooCommerce w functions.php
  3. Edytuj układ pętli produktów i zastosuj arkusz stylów CSS
    1. Edytuj domyślną liczbę kolumn na wiersz
    2. Zastosuj styl CSS do strony sklepu
  4. Edytuj pliki pętli strony sklepu WooCommerce
    1. Zamień domyślny tekst „wyprzedaż” na animowany gif
    2. Usuń opcje sortowania i paginacji

Zanim zaczniesz

Pamiętaj, że poniższy przewodnik obejmuje zaawansowane kodowanie, więc jeśli nie masz umiejętności technicznych, zalecamy skorzystanie z tego innego samouczka .

Przed rozpoczęciem zalecamy również zainstalowanie motywu potomnego. Możesz zapoznać się z naszym przewodnikiem, jak stworzyć motyw potomny lub użyć wtyczki, aby zrobić to za pomocą kilku kliknięć. Ponadto, ponieważ będziesz zmieniać podstawowe pliki, dobrym pomysłem jest wykonanie pełnej kopii zapasowej witryny.

Zobaczmy teraz, jak dostosować stronę sklepu w WooCommerce za pomocą kodowania.

1. Wyłącz domyślny szablon strony sklepu WooCommerce

Aby dostosować stronę sklepu, istnieją dwa możliwe podejścia:

  1. Możesz nadpisać plik WooCommerce odpowiedzialny za drukowanie strony sklepu
  2. Dodaj niestandardowe skrypty do pliku functions.php motywu potomnego za pomocą haków WC

Możesz edytować szablon HTML WooCommerce, podobnie jak plik functions.php motywu potomnego, nadpisując pliki podstawowe, aby zapobiec usunięciu w przypadku aktualizacji. Ponieważ jednak rzeczy nie działają dokładnie tak, jak w pliku functions.php , jeśli WooCommerce zdecyduje się zaktualizować te pliki, twoje dostosowania mogą już nie działać.

Ale nie ma się czym martwić. WooCommerce zdaje sobie z tego sprawę, więc rzadko aktualizuje pliki szablonów w sposób, który może zepsuć Twoje skrypty. Problem z pracą z plikiem functions.php polega na tym, że domyślna strona sklepu WooCommerce będzie nadal wyświetlana po dodaniu swoich hooków.

Przede wszystkim musisz wyłączyć domyślną stronę sklepu z szablonami WooCommerce, aby utworzyć szablon od podstaw .

Plik archiwum-product.php

W WooCommerce plik odpowiedzialny za dane wyjściowe na stronie sklepu nazywa się archive-product.php i można go znaleźć w folderze szablonów WooCommerce ( WooCommerce > Templates > archive-product.php ). Programowo edytuj stronę sklepu WooCommerce - Wyłącz szablon strony sklepu

Aby nadpisać ten plik, musisz go skopiować i wkleić do folderu WooCommerce w motywie potomnym, jak pokazano poniżej:

Przyjrzyjmy się teraz plikowi archive-product.php , aby zobaczyć, jak WooCommerce wyświetla stronę sklepu. Aby to zrobić, otwórz swoje ulubione zintegrowane środowisko programistyczne (IDE), przejdź do folderu szablonów wtyczki WooCommerce i otwórz plik. Możesz go edytować i bawić się nim, w ten sam sposób, w jaki możesz dostosować dowolny inny plik szablonu WC.

Zanim to zrobisz, upewnij się, że masz kopię zapasową oryginalnego pliku, aby w razie potrzeby cofnąć wszelkie zmiany.

W pliku archive-product.php zobaczysz kilka funkcji do_action() . Funkcje te służą do tworzenia aktualnie dostępnych hooków WooCommerce dla strony sklepu. Aby całkowicie wyłączyć stronę sklepu WooCommerce, wystarczy usunąć pętlę odpowiedzialną za drukowanie produktów:

 if (wc_get_loop_prop('total')) {
    while (have_posts()) {
        Poczta();
        do_action('woocommerce_shop_loop');
        wc_get_template_part('treść', 'produkt');
    }
}

Tutaj możesz wprowadzić więcej zmian, ale aby to uprościć, usuniemy tylko pętlę i pozostawimy wszystko inne bez zmian. Jeśli zdecydujesz się wprowadzić więcej zmian, pamiętaj, że jeśli usuniesz niektóre funkcje do_action() , odpowiedni shortcode nie będzie już działał na żadnej stronie witryny.

Po usunięciu pętli do drukowania produktów plik archive-product.php będzie wyglądał tak:

 zdefiniowany('ABSPATH') || Wyjście;
get_header('sklep');
do_action('woocommerce_before_main_content');
jeśli (woocommerce_product_loop()) {
    do_action('woocommerce_before_shop_loop');
    // tutaj usunęliśmy pętlę
    do_action('woocommerce_after_shop_loop');
} w przeciwnym razie {
    do_action('woocommerce_no_products_found');
}
do_action('woocommerce_after_main_content');
do_action('woocommerce_sidebar');
get_footer('sklep');

Otóż ​​to! Wyłączyłeś domyślny szablon strony sklepu i programowo edytowałeś stronę sklepu WooCommerce ! Teraz masz pustą stronę sklepu, więc możesz zacząć projektować własną.

2. Programowo dostosuj nagłówki i zawartość strony sklepu WooCommerce

Treść i nagłówki mogą być dowolnymi znacznikami HTML, które mogą zawierać obrazy, tabele lub łącza. Lub nawet coś w rodzaju pustego kontenera do uruchomienia zewnętrznego pliku JavaScript. W tym celu będziesz potrzebować podstawowej wiedzy na temat krótkich kodów WooCommerce, ponieważ będziesz ich używać do wyświetlania produktów na stronie sklepu. Jeśli nie znasz skrótów WC, zajrzyj do tego przewodnika.

Teraz edytujmy stronę sklepu WC i wyświetlajmy produkty według najpopularniejszych, najlepiej sprzedających się, najwyżej ocenianych i taksonomii. Dodatkowo pokażemy, jak dodać niektóre nagłówki i treści poza pętlą.

2.1 Wyświetl najpopularniejsze produkty

Aby wyświetlić najpopularniejsze produkty, musisz edytować plik archive-product.php motywu potomnego. Najpierw użyj następującego shortcode

 [ products orderby="popularity" ]

Dokładnie tam, gdzie była pętla, zanim ją usunąłeś. # wyświetl najpopularniejsze produkty: 2 produkty w 2 kolumnach

 do_action('woocommerce_before_shop_loop');
echo '<h1>NAJPOPULARNIEJSZE !!</h1>';
do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); do_action('woocommerce_after_shop_loop');

W skróconym kodzie dodasz klasę o nazwie m-popular , której możesz później używać podczas stosowania stylów. W powyższym przykładzie ustawiliśmy wyświetlanie 2 produktów w jednym wierszu 2 kolumn (kolumny=”2″ limit=”2″) . Pamiętaj, że nie możesz używać tutaj skrótów w taki sam sposób, w jaki używasz ich w poście lub na stronie.

Aby skróty działały, musisz użyć funkcji do_shortcode() . Jeśli wszystko poszło dobrze, teraz powinieneś zobaczyć to na stronie sklepu: niestandardowa strona sklepu

2.2 Najlepiej sprzedające się produkty

Innym sposobem programowego dostosowania sklepu WooCommerce jest sortowanie produktów według bestsellerów. W tym celu, oprócz powtórzenia krótkiego kodu, dodasz trochę treści za pomocą prostego znacznika HTML ( <h1> ). Tutaj możesz dodać dowolny inny rodzaj treści pasujący do odpowiedniego formatu HTML.

Pokażmy najlepiej sprzedające się produkty, tym razem w układzie 2 rzędów i 3 kolumn. Aby to zrobić, po prostu wklej to zaraz po echo do_shortcode() , który wstawiłeś w poprzednim kroku 2.1:

 echo '<h1>Bestsellery</h1>';
do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]');

A otrzymasz to: niestandardowa strona sklepu Jeśli chcesz dodać tylko Bestsellery zamiast Najpopularniejsze produkty, po prostu zamień linię echo w 2.1 na tę z 2.2.

2.3 Najwyżej oceniane produkty

Teraz pobawmy się jeszcze skrótami i wyświetlajmy najwyżej oceniane produkty. Tym razem użyjemy krótkiego kodu bez większej liczby atrybutów niż klasa.

 echo '<h1>Najwyżej oceniane</h1>';
do_shortcode('[ top_rated_products class="t-rated" ]');

Zobaczmy, co się stanie po tym: niestandardowa strona sklepu Jak widać, domyślny układ WooCommerce ma 4 kolumny. Zostawmy to na razie tak, wrócimy do tego później.

2.4 Wyświetlaj produkty według taksonomii na stronie sklepu

Oprócz wyświetlania najlepiej sprzedających się lub najwyżej ocenianych produktów, możesz również wyświetlać je według taksonomii. Na przykład poniższy kod spowoduje wydrukowanie produktów z kategorii Plakaty i Odzież, używając tych samych atrybutów, których używałeś wcześniej, ale zmieniając liczbę kolumn na 5.

 echo '<h1>Taksonomia odzieży:</h1>';
do_shortcode('[ products category="Clothing" columns="5" limit="10" class="t-clothing" ]'); echo '<h1>Taksonomia plakatów:</h1>'; echo '<h2>Zabierz najlepsze plakaty na swoją ścianę</h2>'; do_shortcode('[ products category="Posters" limit="4" class="t-posters" ]');

A tak powinien wyglądać teraz archive-product.php :

 <header class="woocommerce-products-header">
       <h1 class="woocommerce-products-header__title page-title"></h1>	
</header>
<?php
jeśli ( woocommerce_product_loop() ) {
	do_action( 'woocommerce_before_shop_loop' );		
	
	echo '<h1>NAJPOPULARNIEJSZE !!</h1>';
        do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); echo '<h1>Bestsellery</h1>'; do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]'); echo '<h1>Najwyżej oceniane</h1>'; do_shortcode('[ top_rated_products class="t-rated" ]'); echo '<h1>Taksonomia odzieży:</h1>'; do_shortcode('[ products category="Clothing" columns="5" limit="10" class="t-clothing" ]'); echo '<h1>Taksonomia plakatów:</h1>; echo '<h2>Zabierz najlepsze plakaty na swoją ścianę</h2>'; do_shortcode('[ products category="Posters" columns="2" limit="4" class="t-posters" ]'); do_action( 'woocommerce_after_shop_loop' ); } else { do_action( 'woocommerce_no_products_found' ); } do_action( 'woocommerce_after_main_content' ); do_action( 'woocommerce_sidebar' ); get_footer( 'sklep' );

W tym momencie powinieneś być w stanie zrozumieć, jak wykorzystać wszystkie skróty WooCommerce i ich atrybuty, aby zbudować niestandardową stronę sklepu, która może spełnić wszelkie wymagania projektowe.

2.5 Dostosuj stronę sklepu WC w functions.php

Jeśli chcesz programowo dostosować stronę sklepu WooCommerce, możesz również edytować plik functions.php . W przypadku treści poza pętlą produktów można użyć niektórych z haczyków widocznych w pliku archive-product.php , uruchamiając je z pliku functions.php motywu potomnego. W ten sposób upewnisz się, że Twoje skrypty będą nadal działać, nawet jeśli WC zdecyduje się zaktualizować swoje pliki szablonów.

W tym przykładzie dodajmy niestandardowy nagłówek z tytułem, podtytułem, opisem i banerem. Wklej ten skrypt do pliku functions.php motywu potomnego:

 add_action('woocommerce_before_shop_loop','shop_main_heading');
funkcja shop_main_heading(){
	$treść = '';
	$content.='<h1>Witaj na mojej wspaniałej stronie sklepu!</h1>'; 
	$content.='<h2>Zbudowany przeze mnie z miłości</h2>';
	$content.='<p>Dziękuję za przejście i odwiedzenie mojej strony sklepu, przejrzyj swoje najbardziej lubiane produkty i kup je wszystkie</p>';
	$content.='<img src="https://www.carpetright.co.uk/globalassets/static-pages/useful-links/samples/sample-banner.jpg"/>';
	echo $treść;
}

Tak będzie wyglądać Twoja strona sklepu: niestandardowa strona sklepu W ten sam sposób możesz użyć haka woocommerce_after_shop_loop , aby wyświetlić zawartość na końcu strony sklepu.

3. Edytuj liczbę produktów w wierszu i zastosuj arkusz stylów CSS na stronie sklepu WC

Do tej pory powinieneś być w stanie wyświetlać produkty, sortować je według polecanych, taksonomii, najlepiej sprzedających się i w dowolny inny sposób, używając skrótów WooCommerce. Co więcej, powinieneś być w stanie wstawiać dowolne treści w dowolnym miejscu na stronie swojego sklepu. Ale co by było, gdybyś mógł pójść jeszcze dalej i przenieść stronę swojego sklepu na wyższy poziom? Możesz edytować układ szablonu i dodać kilka stylów CSS, aby jeszcze bardziej programowo dostosować stronę sklepu WooCommerce.

3.1 Edytuj domyślną liczbę kolumn na wiersz

Jeśli określisz atrybut kolumny skrótu WC, możesz ustawić liczbę produktów, które będą wyświetlane w każdym wierszu. Dodatkowo możesz ustawić łączną liczbę produktów dla shortcode z atrybutem limit:

 [ product orderby=”popularity” columns=”3” limit=”3” ]

Jeśli jednak nie zdefiniujesz atrybutu kolumny, możesz ustawić liczbę produktów, które chcesz wydrukować dla każdego wiersza, używając tego skryptu w pliku functions.php motywu potomnego.

 add_filter('loop_shop_columns', 'loop_columns', 999);
if (!function_exists('loop_columns')) {
    function loop_columns() {
        zwróć 4 ;//4 produktów w rzędzie
    }
}

Spowoduje to zmianę domyślnej liczby produktów wyświetlanych w wierszu tylko wtedy, gdy w krótkim kodzie WooCommerce nie ma atrybutu kolumny.

3.2 Zastosuj kilka stylów CSS na stronie sklepu

Aby zastosować CSS do strony sklepu WooCommerce, możesz po prostu dodać swoje skrypty w pliku szablonu w następujący sposób:

 <styl>
* {
    kolor tła:#a2bcff;
}
</style>

Jest to w porządku dla małych fragmentów CSS, ale nie jest to zalecana praktyka. Aby zastosować styl CSS w sposób WordPress, musisz użyć haka wp_enqueue_scripts , aby załadować skrypty z innego pliku.

W tym przykładzie nazwiemy ten plik shop_style.css i umieścimy go w głównym folderze motywu potomnego, na tym samym poziomie hierarchii, co domyślny plik style.css . Po utworzeniu tego pliku wklej następujący skrypt do pliku functions.php :

 add_action( 'wp_enqueue_scripts', 'quadlayers_enqueue_css' );
funkcja quadlayers_enqueue_css(){    
    if( is_shop() ) :
    wp_enqueue_style( 'styl_kasy',
        get_stylesheet_directory_uri() . „/styl_sklepu.css”
    );
    endif;
}

Jak widać, warunek warunkowy if(is_shop()): musi być prawdziwy, aby umieścić plik shop_style.css w kolejce. W tym pliku będziesz miał wszystkie skrypty stylów, które chcesz zastosować tylko do strony sklepu . Różni się to od pliku style.css w motywie potomnym, który zastosuje skrypty do całego interfejsu witryny. W tym przewodniku użyjemy następującego pliku shop_style.css , ale możesz użyć swoich skryptów CSS lub zmienić ten:

 div.storefront-sorting:nth-child(2){
	wyrównanie tekstu:środek;
} 
#main div.storefront-sorting h1{
	styl czcionki:normalny;
}
#główne h1,#główne h2{
	grubość czcionki: pogrubiona;
	styl czcionki: ukośny;
	wyrównanie tekstu:środek;
}
#główna > .m-popularna,#główna > .b-sprzedawcy,#główna > .t-rating,#główna > .t-odzież,#główna > .t-plakaty{	
	obramowanie: stałe #b8b8b8 1px;
	promień obramowania: 25px;
	margines-dolny: 25px;
	dopełnienie górnej: 35px;	
	dopełnienie lewe: 20px;
	dopełnienie-prawo: 20px;	
} 
#główna > .m-popularna{
	kolor tła:#dbad97;	
}
#główna > .b-sprzedawcy {
	kolor tła:#b4e6a3;
}
#główna > .t-rated {
	kolor tła:#f0f695;	
}
#główna > .t-odzież {
	kolor tła:#95b4f6;	
}
#główna > plakaty .t {
	kolor tła:#c88fe5;	
}

W pliku CSS znajdziesz kilka selektorów, które zawierają niestandardowe klasy. Stworzyliśmy je przed utworzeniem skrótów. Na przykład dodaliśmy klasę „b-sellers” w krótkim kodzie w następujący sposób:

 do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]');

Więc po dodaniu stylu CSS do strony sklepu WooCommerce otrzymasz coś takiego (kliknij obrazek, aby zobaczyć go w pełnym rozmiarze): Kliknij obraz, aby wyświetlić go w pełnym rozmiarze

Kliknij obraz, aby wyświetlić go w pełnym rozmiarze.

Pamiętaj też, że mamy aktywny motyw StoreFront i, jak być może wiesz, selektory CSS mogą być różne w każdej witrynie, nawet jeśli mają ten sam motyw. Aby ten plik działał, może być konieczna edycja selektorów dla określonej witryny.

BONUS : Jak zmienić liczbę produktów na stronie?

Załóżmy teraz, że chcesz zmienić liczbę produktów wyświetlanych na stronie na stronie sklepu. Jeśli chcesz na przykład wyświetlić 10 produktów na stronie, po prostu dodaj następujący kod do pliku functions.php :

 add_filter( 'loop_shop_per_page', 'new_loop_shop_per_page', 20 );

funkcja new_loop_shop_per_page( $cols ) {
  $kolumny = 10;
  zwróć $kolumny;
}

Gdzie $cols zawiera liczbę produktów na stronie, która przyjmuje wartość z Opcje -> Odczyt i zwraca liczbę produktów, które chcesz wyświetlić na każdej stronie.

4. Edytuj pliki pętli strony sklepu WooCommerce

Do tej pory widzieliśmy, jak edytować plik szablonu archive-product.php , aby programowo dostosować stronę sklepu WooCommerce. W tym pliku działa pętla WC, aby wyświetlić wszystkie produkty na stronie. Teraz otwórz folder wtyczki WooCommerce w edytorze wtyczek lub IDE i otwórz folder pętli. Znajdziesz go na tym samym poziomie, co plik archive-product.php .

W folderze pętli znajdziesz pliki, które możesz również edytować, aby jeszcze bardziej dostosować stronę sklepu. Aby nadpisać ten plik, musisz utworzyć sklonowany folder i plik w motywie potomnym. Utwórz nowy folder o nazwie loop poniżej wcześniej utworzonego folderu WooCommerce.

Następnie skopiuj oryginalny plik sale-flash.php z szablonów wtyczek i wklej go do tego folderu pętli w motywie potomnym. Użyjemy pliku sale-flash.php , aby dodać animowany gif do wszystkich produktów, które są w sprzedaży. Jeśli zajrzysz do pliku, zobaczysz, że jest to skrypt odpowiedzialny za wyświetlanie komunikatu „WYPRZEDAŻ”, gdy produkt jest w sprzedaży.

4.1 Zamień domyślny tekst „wyprzedaż” na animowany gif

W tej sekcji pokażemy, jak wyłączyć domyślną wiadomość promocyjną i zastąpić ją animowanym gifem. Musisz edytować plik flash-sale.php swojego motywu potomnego, aby wyglądał tak:

 zdefiniowany('ABSPATH') || Wyjście;
globalny $post, $produkt;
if ( $produkt->jest_na_wyprzedaży() ) { 
   $an_gif = '<img src="https://i1.wp.com/tamingchaos.net/wp-content/uploads/2020/04/Sale-Gif.gif" width="100px" height="60px"/ >”;
   echo $an_gif;
}

Tam możesz zastąpić plik gif dowolnym innym gifem, który ci się podoba.

4.2 Usuń opcje sortowania i paginacji

Przyjrzyjmy się teraz, jak wyłączyć selektor „sortuj według” i funkcję paginacji na stronie sklepu WooCommerce. Podobnie jak w przypadku pliku sale-flash.php , możesz to osiągnąć, po prostu zapisując pusty plik o tej samej nazwie.

Utwórz oba pliki w folderze pętli i nazwij je orderby.php i pagination.php . Aby całkowicie wyłączyć oba pliki, wystarczy umieścić ten skrypt w każdym z plików:

 zdefiniowany('ABSPATH') || Wyjście;

Po wykonaniu tej czynności na stronie Twojego sklepu uzyskasz bardziej przejrzysty nagłówek i stopkę. Ponadto paginacja może nie być zbyt przydatna, ponieważ wyświetlasz dużą liczbę produktów. programowo edytuj stronę sklepu WooCommerce - Sortowanie i paginacja Zauważ, że w pliku sale-flash.php usunęliśmy domyślne zachowanie WooCommerce i dodaliśmy własne wyświetlanie animowanego gifa. To bardzo podstawowe zadanie, ale technika ta oferuje szerokie możliwości zaawansowanym programistom.

UWAGI KOŃCOWE

  • Pliki szablonów WC motywu potomnego nie zapobiegają nadpisaniu, jeśli WooCommerce zdecyduje się wydać aktualizację szablonów. Jednak rzadko się to zdarza.
  • Są to przykładowe skrypty i nie wolno ich wprowadzać do produkcji, służą one wyłącznie celom dydaktycznym.

Bonus: Wyświetlaj kategorie na stronie sklepu WooCommerce

Na koniec zobaczmy, jak dodać kategorie do strony sklepu WooCommerce za pomocą odrobiny kodu. Ta metoda jest zalecana dla użytkowników posiadających umiejętności kodowania. Oprócz PHP zaleca się również znajomość CSS, aby móc stylizować kod.

UWAGA : Przed rozpoczęciem upewnij się, że wykonałeś kopię zapasową swojej witryny i utworzyłeś motyw podrzędny, jeśli jeszcze go nie masz.

Dodaj kategorie do strony Sklepu

W panelu przejdź do Wygląd > Edytor motywów i otwórz plik motywu podrzędnego functions.php . Kliknij plik functions.php na prawym pasku bocznym Pliki motywów i wklej następujące skrypty, aby dodać niestandardowe funkcje.

Poniższa funkcja doda kategorie produktów przed załadowaniem innych elementów strony Twojego Sklepu. Oznacza to, że kupujący zobaczą wszystkie kategorie produktów przed katalogiem produktów.

 function product_subcategories( $args = array() ) {
$parentid = get_queried_object_id();

$argumenty = tablica(
'rodzic' => $id_rodzica
);

$terms = get_terms( 'product_cat', $args );

jeśli ( $warunki ) {
echo '<ul class="product-cats">';

foreach ( $terms jako $term ) {
echo '<li class="category">'; 
woocommerce_subcategory_thumbnail( $term );
echo '<h2>';
echo '<a href="'. esc_url(get_term_link($term)).'" class="'. $term->slug. '">';
echo $term->nazwa;
echo '</a>';
echo '</h2>';
echo '</li>';
}

echo '</ul>';
}

}

add_action( 'woocommerce_before_shop_loop', 'product_subcategories', 50 );

Ta funkcja doda Twoje kategorie do strony sklepu WooCommerce. Pamiętaj jednak, że mogą nie wyglądać dokładnie tak, jak chcesz, więc będziesz musiał stylizować nową sekcję kategorii za pomocą odrobiny CSS. Więcej informacji na ten temat znajdziesz w naszym poście o tym, jak wyświetlać i stylizować kategorie na stronie sklepu.

Wniosek

Podsumowując, strona sklepu jest niezwykle ważna i może zrobić lub zepsuć Twój sklep. Dlatego jeśli masz umiejętności kodowania, zalecamy programową edycję strony sklepu WooCommerce i optymalizację jej w celu zwiększenia współczynników konwersji.

W tym przewodniku pokazaliśmy, jak dodawać, usuwać i dostosowywać różne aspekty swojego sklepu. Jednak to tylko kilka przykładów i pomysłów, które mogą pomóc Ci znaleźć inspirację i przenieść Twój sklep na wyższy poziom. Teraz nadszedł czas na zabawę i rozwijanie swoich dostosowań.

Aby uzyskać więcej przewodników dotyczących dostosowywania sklepu WooCommerce, zalecamy zapoznanie się z:

  • Dodatek do koszyka WooCommerce AJAX
  • Jak dodać niestandardowe pola do strony kasy?
  • WooCommerce dodawaj do koszyka działa programowo

Na koniec, jeśli chcesz połączyć sklep na Facebooku z WooCommerce, powinieneś zajrzeć do tego pełnego przewodnika. Czy dostosowałeś swój sklep internetowy? Co zmieniłeś? Jeśli masz jakieś pytania, zostaw komentarz poniżej, a my dołożymy wszelkich starań, aby Ci pomóc! Możesz również sprawdzić pełny kod na Github.