Jak dodać wyszukiwarkę produktów WooCommerce: przewodnik po ulepszaniu zakupów

Opublikowany: 2023-05-17

Czy chcesz ulepszyć wyszukiwanie produktów w swoim sklepie WooCommerce? Jeśli chcesz ułatwić swoim klientom znalezienie tego, czego szukają i zwiększyć sprzedaż, dobrze trafiłeś!

Wszyscy wiemy, jak frustrujące może być, gdy nie możesz znaleźć tego, czego szukasz, prawda? Zastępując domyślną funkcję wyszukiwania w WooCommerce inteligentniejszym rozwiązaniem, możesz ułatwić swoim klientom odkrywanie produktów i zapewnić im wspaniałe zakupy. W tym artykule pokażemy, jak stworzyć bardziej innowacyjne i szybsze wyszukiwanie w Twoim sklepie internetowym.

Poprowadzimy Cię krok po kroku przez cały proces. Przygotuj się więc na przyspieszenie wyszukiwania produktów WooCommerce! Pod koniec tego przewodnika będziesz mieć wszystko, czego potrzebujesz, aby przenieść wyszukiwanie produktów WooCommerce na wyższy poziom. Jak więc dodać wyszukiwanie produktów WooCommerce? Dowiedzmy Się!

Jak dodać wyszukiwanie produktów WooCommerce na stronie?

Domyślne wyszukiwanie produktów WooCommerce ma ograniczenia, które mogą wpłynąć na skuteczność odkrywania produktów. Może dostarczać niedokładnych wyników, działać wolno w miarę rozrastania się katalogu, może brakować opcji filtrowania, borykać się z synonimami lub błędami ortograficznymi oraz oferować ograniczone opcje sortowania. Przezwyciężenie tych ograniczeń ma kluczowe znaczenie dla poprawy jakości wyszukiwania, zwiększenia sprzedaży i zadowolenia klientów.

ProductX pokonuje te ograniczenia i sprawia, że ​​wyszukiwanie produktów WooCommerce jest idealne dla Twojego sklepu. Dzięki mocy wyszukiwania WooCommerce AJAX i kompletnemu zestawowi opcji dostosowywania ProductX jest tym, czego naprawdę potrzebujesz. Zainstaluj ProductX, aby wyprzedzić grę.

I, jak powiedzieliśmy wcześniej, zanurzmy się w bezzwłocznym dodawaniu wyszukiwania produktów w WooCommerce. Istnieją 2 sposoby korzystania z wyszukiwania produktów WooCommerce. Możesz go użyć na dowolnej stronie lub dodać opcję wyszukiwania w nagłówku Sklepu. Omówimy obie strony, więc trzymaj się do końca.

Krok 1: Dodanie bloku wyszukiwania produktów na stronie

Po pomyślnym zainstalowaniu ProductX bloki wyszukiwania produktów są teraz dostępne do użytku wraz z jego rozszerzoną personalizacją. Więc bez zbędnych ceregieli pokażemy Ci, jak dodać Wyszukiwarkę produktów WooCommerce do Twojego sklepu.

Adding WooCommerce Product Search Block
Dodanie bloku wyszukiwania produktów WooCommerce

Najpierw musisz przejść do strony. Możesz przejść do opcji strony WordPress i kliknąć Dodaj nową, aby utworzyć nową stronę. Następnie wyszukaj „Wyszukiwanie produktów”, aby wybrać ten blok. Spowoduje to dodanie bloku wyszukiwania do strony.

Krok 2: Dostosowywanie bloku wyszukiwania produktów WooCommerce

Po dodaniu bloku wyszukiwania produktów możesz go dostosować do swoich potrzeb. Ten blok zapewnia wiele opcji dostosowywania, aby zapewnić idealne wyszukiwanie produktów dla Twojego sklepu.

Pozwól nam zobaczyć opcje dostosowywania, które otrzymasz bez żadnych opóźnień.

Wyszukaj układy pól

Kliknij opcję układu, aby wybrać różne układy pól wyszukiwania. Możesz eksperymentować z różnymi układami, aby znaleźć ten, który najlepiej pasuje do projektu Twojej witryny i wygody użytkownika.

Search Field Layout
Układ pola wyszukiwania

Do wyboru jest 5 układów pól wyszukiwania i możesz łatwo kliknąć, aby wybrać układ do wyboru.

Wyszukaj układy listy produktów

Możesz użyć układu listy produktów wyszukiwania, aby stworzyć atrakcyjny wizualnie i zorganizowany sposób wyświetlania wyników wyszukiwania. Otrzymasz 3 różne układy listy produktów wyszukiwania, a także dostosujesz szerokość, liczbę kolumn i odstęp między kolumnami, aby zoptymalizować rozmieszczenie miniatur produktów, tytułów, cen i ocen.

Product List Layout
Układ listy produktów

Wyszukaj styl formularza

Użyj ustawień stylu formularza wyszukiwania, aby zmodyfikować kolory (wprowadź kolor i tło), typografię, obramowania i inne elementy wizualne, takie jak promień formularza i wypełnienie formularza wyszukiwania.

Search Form Style Settings
Wyszukaj ustawienia stylu formularza

Panel ustawień jest bardzo intuicyjny i możesz wybrać wybrane ustawienia, aby dostosować sąsiednie ustawienia.

Styl kategorii

Za pomocą tego ustawienia możesz dostosować styl kategorii produktów wyświetlanych w wynikach wyszukiwania. Dostosuj kolory tekstu, czcionkę, odstępy i układ, aby wyróżnić swoje kategorie i nadać im atrakcyjność wizualną.

Category Style Settings
Ustawienia stylu kategorii

Możesz dostosować opcję typografii dla zaznaczonego tekstu i tekstu rozwijanego. Możesz także dostosować szerokość, szerokość i wysokość separatora oraz kolory separatora.

Ikona wyszukiwania

Ikona wyszukiwania jest najbardziej intuicyjną ikoną używaną do określania pola wyszukiwania. W ustawieniach ikony wyszukiwania możesz dostosować jej rozmiar, kolory i kolory tła dla trybów normalnego i aktywowanego. Dostosuj jego promień, szerokość i marginesy przycisku, aby idealnie umieścić ikonę wyszukiwania.

Search Icon Settings

Więcej przycisku wyników

Przycisk „Więcej wyników” umożliwia użytkownikom załadowanie dodatkowych wyników wyszukiwania bez opuszczania strony, zapewniając wygodny sposób na przeglądanie większej liczby produktów. Aby idealnie zaprojektować wyszukiwanie produktów, możesz zmienić typografię, tekst i kolor kursora w ustawieniach.

More Results Settings
Więcej ustawień wyników

Styl listy rozwijanej

W tych ustawieniach możesz dostosować styl menu rozwijanych w swoim bloku wyszukiwania. Dostosuj kolory, obramowanie i promień. Otrzymasz również ustawienie cienia ramki, odstępy między elementami (X i Y) oraz opcję wyboru koloru separatora i dostosowania szerokości separatora.

Dropdown Style Settings
Rozwijane ustawienia stylu

obraz produktu

To ustawienie pozwala kontrolować wyświetlanie obrazów produktów w wynikach wyszukiwania. Łatwo dostosuj szerokość, wysokość i promień obrazu za pomocą intuicyjnych ustawień.

Product Image Settings
Ustawienia obrazu produktu

Tytuł produktu

Dostosuj wygląd tytułów produktów w wynikach wyszukiwania. Zmodyfikuj wszystkie ustawienia związane z typografią, kolor najechania kursorem i wyszukaj wyróżniony kolor, aby wyglądał wspaniale.

Product Title Settings
Ustawienia tytułu produktu

Cena produktu

Dostosuj tutaj kolor i niezbędne ustawienia typografii, aby lepiej wyświetlać cenę produktu w polu wyszukiwania produktu.

Product Price Settings
Ustawienia ceny produktu

Ocena produktu

Kontroluj kolor ocen produktów w wynikach wyszukiwania. Włączaj lub wyłączaj oceny jednym kliknięciem lub łatwo zmieniaj kolory swojej oceny.

Product Rating Settings
Ustawienia oceny produktu

Jak dodać wyszukiwanie produktów WooCommerce w nagłówku

Możesz także dodać wyszukiwanie produktów WooCommerce w nagłówku. Pokażemy Ci przewodnik krok po kroku, abyś mógł z niego korzystać bez żadnych kłopotów.

Krok 1: Utwórz zapisany szablon

Najpierw musisz włączyć Zapisany dodatek szablonu.

Enabling Saved Template Addon
Włączanie dodatku do zapisanego szablonu

Teraz przejdź do ProductX → Zapisany szablon. I kliknij „Dodaj nowy szablon”.

Adding WooCommerce Product Search Block
Dodanie bloku wyszukiwania produktów WooCommerce

Dodaj „Blok wyszukiwania produktów” i dostosuj go według potrzeb. A następnie kliknij opublikuj.

Krok 2: Skopiuj krótki kod

Wróć do strony „Zapisany szablon” (ProductX → Zapisany szablon). Zobaczysz krótki kod.

Copying The Shortcode
Kopiowanie krótkiego kodu

Kliknij krótki kod, aby go skopiować.

Krok 3: Przejdź do Dostosowania motywu

„Uwaga: większość motywów można dostosować za pomocą narzędzia do dostosowywania. A dodanie wyszukiwania produktów WooCommerce można wykonać z sekcji nagłówka motywu. Różne motywy mogą mieć różne nazwy menu. Na przykład dzisiaj używamy motywu Kadence”.

Teraz przejdź do Wygląd → Dostosuj.

Go to Theme Customize
Przejdź do opcji Dostosuj motyw

Wybierz „Nagłówek”, aby wprowadzić jego ustawienia.

Theme Header Customization
Dostosowanie nagłówka motywu

Dodaj kod HTML w preferowanej sekcji.

Krok 4: Wklej krótki kod

Teraz kliknij HTML i przejdź do zakładki Tekst. Zobaczysz tutaj pole tekstowe.

Adding and Editing HTML in Header
Dodawanie i edycja kodu HTML w nagłówku

Wklej krótki kod w polu tekstowym i kliknij opublikuj.

Pasting Shortcode in HTML
Wklejanie krótkiego kodu w HTML

Spowoduje to dodanie opcji wyszukiwania produktów WooCommerce do sekcji nagłówka.

Uwaga: różne motywy mają różne szerokości sekcji nagłówka. Jeśli wyszukiwanie produktu nie pasuje, dostosuj „Szerokość” w ogólnych ustawieniach bloku „Wyszukiwanie produktu”.

Wniosek

Podsumowując, dostosowanie bloku wyszukiwania produktów WooCommerce za pomocą ProductX umożliwia pełną kontrolę nad wyszukiwaniem.

Za pomocą pełnych ustawień dostosowywania możesz stworzyć spersonalizowane i atrakcyjne wizualnie wyszukiwanie dla swoich klientów.

Ulepszenie funkcji wyszukiwania produktów poprawia komfort użytkowania i zwiększa szanse klientów na znalezienie pożądanych produktów, co ostatecznie prowadzi do poprawy sprzedaży i zadowolenia klientów.

Dzięki ProductX możesz zoptymalizować swój sklep WooCommerce i zapewnić kupującym idealne i wydajne wyszukiwanie.

Możesz obejrzeć samouczki wideo WordPress na naszym kanale YouTube. Znajdź nas również na Facebooku i Twitterze, aby otrzymywać regularne aktualizacje!

Podoba Ci się ten artykuł? Rozgłosić
  • How to Create a Food Blog in 9 Easy Steps

    Jak stworzyć blog kulinarny [w 9 łatwych krokach]

  • WooCommerce Pagination

    2 rodzaje stronicowania WooCommerce z ustawieniami

  • How to Reorder Posts in WordPress

    Jak zmienić kolejność postów w WordPress (3 skuteczne sposoby)

  • How To Display WordPress Video as Featured Image With PostX

    Jak wyświetlić wideo WordPress jako wyróżniony obraz za pomocą PostX