Jak dodać szybki podgląd WooCommerce bez wtyczki

Chcesz ułatwić klientom poznanie Twoich produktów i szybkie dodanie ich do koszyka? Pomoże Ci w tym okno szybkiego podglądu produktu.

Pokazuje odwiedzającym kluczowe informacje, takie jak cena produktu, krótki opis, oceny klientów, warianty kolorystyczne i rozmiarowe, wraz z przyciskiem dodaj do koszyka.

Mimo że WooCommerce nie oferuje natywnej opcji szybkiego podglądu, możesz ją dodać za pomocą narzędzi innych firm.

Technicznie rzecz biorąc, możesz użyć wtyczki, aby dodać funkcję szybkiego podglądu do swojego sklepu WooCommerce, ale zainstalowanie zbyt wielu wtyczek może prowadzić do awarii witryny, powolnego ładowania strony i naruszenia bezpieczeństwa.

W tym samouczku pokażę, jak dodać okno modalne szybkiego podglądu do produktów WooCommerce bez użycia wtyczki.

1. Zainstaluj motyw Botiga WooCommerce

Najłatwiejszym sposobem na dodanie funkcji szybkiego podglądu do Twojego sklepu jest użycie motywu WooCommerce, który zawiera tę funkcję, takiego jak nasz darmowy motyw Botiga.

Oprócz możliwości dodania pola szybkiego podglądu do produktów, Botiga oferuje mnóstwo funkcji projektowania i handlu elektronicznego — na przykład możesz stworzyć własną paletę kolorów, dostosować układ koszyka i galerii produktów, dodać filtry produktów i odznaki i nie tylko.

Aby rozpocząć, pobierz motyw i zainstaluj go z menu Wygląd > Motywy > Dodaj nowy > Prześlij motyw :

Alternatywnie możesz także przejść do Wygląd > Motywy > Dodaj nowy i wpisać „botiga” w pasku wyszukiwania.

Gdy pojawi się motyw, kliknij przycisk Instaluj :

Po zainstalowaniu motywu na swojej stronie kliknij przycisk Aktywuj .

2. Importuj witrynę startową (opcjonalnie)

Witryna startowa to wstępnie zbudowana wersja demonstracyjna, którą można zaimportować do własnej witryny za pomocą zaledwie kilku kliknięć.

Botiga ma obecnie jedną bezpłatną (uroda) i cztery strony premium (odzież, meble, biżuteria, pojedynczy produkt). W tym samouczku użyję bezpłatnej wersji demonstracyjnej Beauty — tutaj możesz sprawdzić wszystkie strony startowe.

Jeśli nie chcesz korzystać z gotowych wersji demonstracyjnych, możesz także dodać od podstaw własne treści do swojego sklepu Botiga.

Aby znaleźć strony startowe, kliknij menu Wygląd > Witryny startowe na pulpicie nawigacyjnym WordPress.

Najedź kursorem na wersję demonstracyjną, którą chcesz zainstalować, i kliknij przycisk Podgląd wersji demonstracyjnej , aby wyświetlić jej podgląd.

Jeśli Ci się spodoba, kliknij Importuj , aby zainstalować gotową zawartość i ustawienia projektu w swojej witrynie:

Moduł importu motywu pokaże wtyczki i treści, które zostaną zaimportowane do Twojej witryny.

Masz możliwość odrzucenia importu dowolnej wtyczki i treści, ale zalecam importowanie wszystkiego:

3. Otwórz Konfigurator

Czynności wstępne dobiegły końca. Teraz pokażę Ci, jak dodać funkcję szybkiego podglądu WooCommerce do Twojego sklepu.

W obszarze administracyjnym WordPress przejdź do Wygląd > Dostosuj , aby otworzyć Konfigurator, w którym możesz uzyskać dostęp do funkcji szybkiego podglądu:

4. Włącz przycisk szybkiego podglądu dla swoich produktów

Konfigurator otworzy się po lewej stronie ekranu. Botiga ma mnóstwo opcji, z których możesz wybierać.

Aby uzyskać dostęp do funkcji szybkiego podglądu, przejdź do WooCommerce > Katalog produktów > Ogólne :

W zakładce Ogólne powinieneś zobaczyć opcję Karta produktu . Wybierz go, a element się rozwinie:

Teraz przewiń w dół do opcji Szybki podgląd .

Jak widać na poniższym zrzucie ekranu, przycisk Szybki podgląd jest już włączony w Twojej witrynie:

Aby sprawdzić, jak wygląda przycisk na froncie Twojej witryny, otwórz stronę swojego Sklepu. Jeśli zaimportowałeś demo Beauty, w górnym menu znajdziesz link do sklepu.

Najedź kursorem na dowolne zdjęcie produktu, a pojawi się przycisk Szybki podgląd:

Przycisk Szybki podgląd pojawia się zawsze, gdy grupa produktów jest wyświetlana na tej samej stronie.

Na przykład w wersji demonstracyjnej Beauty sekcja Polecana kolekcja zawiera również przycisk Szybki podgląd dla każdego produktu:

Ponieważ Botiga jest motywem responsywnym, przycisk szybkiego podglądu działa również na urządzeniach mobilnych — wystarczy lekkie dotknięcie obrazu produktu, aby go wyświetlić:

5. Wybierz układ przycisków szybkiego podglądu

Na pewno zauważyłeś, że dostępne są trzy opcje układu szybkiego podglądu:

Pierwszy całkowicie usuwa przyciski szybkiego podglądu z Twojej witryny.

Druga opcja pokazuje przycisk na środku obrazu produktu (jest to ustawienie domyślne):

Trzecia opcja wyświetla przycisk Szybki podgląd u dołu obrazu produktu:

Jeśli chcesz przełączać się między układami, wybierz opcję, której chcesz użyć, i naciśnij przycisk Publikuj u góry narzędzia Customizer:

6. Dodaj lub usuń elementy w oknie szybkiego podglądu

Modal Quick View zawiera nazwę produktu, cenę, krótki opis, licznik ilości, stylowy przycisk dodaj do koszyka, zdjęcia produktów oraz kategorię produktów:

Jeśli nie widzisz niektórych z tych elementów w polu szybkiego podglądu, możesz je dodać z opcji Elementy karty , którą można znaleźć tuż pod ustawieniem Szybki podgląd .

Kliknij ikonę oka obok elementu, który chcesz dodać, a pojawi się on w polu szybkiego podglądu.

Usuwanie elementów działa w ten sam sposób. Kliknij ikonę oka, aby wyłączyć element, a zniknie on z pola szybkiego podglądu:

7. Dodaj więcej produktów do swojego sklepu

Możesz dodać więcej produktów do swojego sklepu z menu Produkty > Dodaj nowy administrator. Ta opcja nie znajduje się w Konfiguratorze — aby uzyskać do niej dostęp, musisz wrócić do pulpitu nawigacyjnego WordPress.

Zamknij narzędzie Customizer i kliknij Produkty > Dodaj nowy na lewym pasku bocznym obszaru administracyjnego. Edytor produktów pojawi się na ekranie.

Wypełnij tytuł, opis, zdjęcie produktu, galerię produktów, kategorie produktów, tagi produktów oraz pola danych/metadanych produktów:

Pamiętaj, że jeśli dodasz więcej niż trzy zdjęcia do galerii produktów, domyślnie w oknie szybkiego podglądu będą wyświetlane tylko pierwsze trzy zdjęcia.

Jednak użytkownicy mogą uzyskać dostęp do pozostałych obrazów, klikając ikonę strzałki:

Polecam przeglądanie strony podczas uzupełniania szczegółów produktu za pomocą przycisku Podgląd zmian . Nie martw się, że popełnisz błędy — zawsze możesz wrócić i zmodyfikować szczegóły produktu.

Kiedy będziesz gotowy, naciśnij przycisk Publikuj , a nowy produkt pojawi się na stronie Twojego sklepu.

Wniosek

WooCommerce to fantastyczna wtyczka do założenia sklepu internetowego z WordPress. Istnieją jednak pewne funkcje, np. funkcja szybkiego podglądu produktu, których nie oferuje po wyjęciu z pudełka.

Na szczęście wysokiej jakości motyw WooCommerce, taki jak Botiga, może wypełnić tę lukę. Wszystko, co musisz zrobić, to zainstalować i aktywować motyw, przejść do Personalizacja i wybrać układ szybkiego podglądu.

Oprócz funkcji szybkiego podglądu Botiga zawiera wiele przydatnych funkcji eCommerce.

Na przykład możesz dodać efekt najechania kursorem do zdjęć produktów, wzbogacić galerie produktów o filmy, stworzyć własną paletę kolorów i nie tylko.

Aby zobaczyć, co Botiga może dla Ciebie zrobić, pobierz motyw za darmo lub sprawdź wersje demonstracyjne.

Mam nadzieję, że ten samouczek był dla Ciebie pomocny. Jeśli masz jakieś pytania lub sugestie dotyczące dodania funkcji szybkiego podglądu do swojego sklepu WooCommerce, zostaw nam komentarz poniżej.