Jak dodać szybki podgląd w WooCommerce
Opublikowany: 2020-11-24Czy chcesz umieścić w swojej witrynie funkcję szybkiego podglądu? Dowiedz się , jak dodać i dostosować przycisk szybkiego podglądu w swoim sklepie WooCommerce .
W każdym sklepie WooCommerce klienci mogą zobaczyć szczegółowe informacje o produktach na stronach produktów. Nie widzą jednak opisu, odmian i innych informacji dołączonych do produktu na domyślnej stronie sklepu. Gdy kupujący są na stronie sklepu, muszą kliknąć obraz produktu lub link, aby przejść do strony produktu, aby zobaczyć więcej informacji o tym produkcie. Nie jest to idealne rozwiązanie, ponieważ dodaje krok do procesu zakupu i jeśli klienci chcą nadal przeglądać Twoje produkty, muszą wrócić do strony sklepu.
Możesz jednak dodać przycisk szybkiego podglądu na stronie sklepu WooCommerce i poprawić wrażenia użytkowników . W ten sposób kupujący będą mogli zobaczyć wszystkie informacje o produkcie bez opuszczania strony sklepu. Przyjrzyjmy się bliżej, jak działa szybki widok przycisku i jak dodać go do swojego sklepu .
Co to jest przycisk szybkiego podglądu?
Przycisk szybkiego podglądu pozwala klientom zobaczyć szczegóły produktu bezpośrednio na stronie sklepu i bez konieczności otwierania strony produktu każdego interesującego ich produktu. W ten sposób kupujący mogą nawigować po produktach ze strony sklepu, poprawiając zakup doświadczenia. Gdy użytkownik kliknie przycisk szybkiego podglądu, otworzy się wyskakujące okienko wyświetlające wszystkie istotne informacje o produkcie na tej samej stronie. Nie ma potrzeby ponownego ładowania strony sklepu ani przekierowywania użytkowników na inną stronę.
Jak dodać przycisk szybkiego podglądu do strony sklepu WooCommerce
Najłatwiejszym sposobem dodania przycisku szybkiego podglądu do sklepu jest użycie wtyczki. W tym demo użyjemy Direct Checkout, jednej z najlepszych wtyczek do kasy dla WooCommerce. Mimo że Direct Checkout ma wersję bezpłatną, będziesz potrzebować wersji premium, aby dodać przyciski szybkiego podglądu. Możesz wybrać dowolny z 3 planów premium, które zaczynają się już od 19 USD (płatność jednorazowa).
Instalowanie i aktywowanie bezpośredniej realizacji transakcji
Najpierw zainstaluj Bezpośrednią realizację transakcji. Musisz pobrać darmową wersję stąd i jedną z wersji premium z tego linku. Pamiętaj, że musisz zainstalować i aktywować zarówno darmową, jak i premium wersję wtyczki, aby odblokować funkcję szybkiego podglądu. Po zainstalowaniu obu, przejdź do WooCommerce > Bezpośrednia kasa > Archiwa i aktywuj opcję Dodaj przycisk szybkiego podglądu . 
W tej sekcji możesz również zastąpić domyślny tekst przycisku Dodaj do koszyka. Pamiętaj, że nie wpłynie to w żaden sposób na działanie przycisku szybkiego podglądu. Otóż to! Właśnie dodałeś przycisk szybkiego podglądu do swojej strony sklepu WooCommerce ! Tak wygląda przycisk, jeśli używasz motywu StoreFront: 
A kiedy klikniesz przycisk szybkiego podglądu, pojawi się modalne wyskakujące okienko i będzie wyglądać podobnie do tego: 
Pamiętaj, że wszystkie informacje o produkcie są wyświetlane w wyskakującym okienku szybkiego podglądu. Znajduje się tam nawet przycisk Dodaj do koszyka, który umożliwia klientom dodawanie produktów do koszyka bezpośrednio z wyskakującego okienka. Teraz przejdźmy o krok dalej i zobaczmy, jak dostosować przycisk szybkiego podglądu za pomocą odrobiny CSS.
Jak dostosować szybki podgląd WooCommerce
W tej sekcji dowiesz się, jak dostosować zarówno przycisk szybkiego podglądu, jak i modalne wyskakujące okienko szybkiego podglądu, używając odrobiny CSS . Skrypty CSS są bardzo przydatne do wielu zadań, więc nawet jeśli jesteś początkującym, warto poznać kilka podstawowych pojęć CSS. Przyjrzyjmy się teraz, jak dostosować różne elementy zarówno przycisku szybkiego podglądu, jak i wyskakującego okienka szybkiego podglądu.
Pamiętaj, że należy wkleić następujące kody w pliku style.css motywu podrzędnego lub w polu Dodatkowy CSS dostosowania motywu. Jeśli nie masz motywu podrzędnego, możesz sprawdzić ten post, aby go utworzyć lub użyć jednej z tych wtyczek.
3.1 Edytuj przycisk szybkiego podglądu
Zmień szerokość przycisku szybkiego podglądu
li.product .qlwcdc_quick_view.button{
width: 40%;
}
Edytuj kolor tła
li.product .qlwcdc_quick_view.button{
background: #79b0f7;
}
Edytuj kolor ikony
li.product .qlwcdc_quick_view.button{
color:red;
}
Dodaj zaokrąglone obramowania
li.product .qlwcdc_quick_view.button{
border-radius: 5px;
}
Użyj obrazu jako przycisku
li.product .qlwcdc_quick_view.button{
width:75px;
content:url('https://pbs.twimg.com/profile_images/476389199621275648/G6c2Zoe__400x400.jpeg');
}
Zamień ikonę na tekst
li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
content: "quick view text";
color:white;
background:black;
padding:10px;
}
Dodaj efekt najechania
li.product .qlwcdc_quick_view.button:hover{
color:black;
background:yellow;
}
3.2) Edytuj modalne wyskakujące okienko szybkiego podglądu
Zobaczmy teraz trochę kodu, aby dostosować modalne wyskakujące okienko szybkiego podglądu.
Zmień kolor tła
#qlwcdc_quick_view_modal>div>div>div.modal-body{
background:greenyellow;
}
Ukryj meta produktu
#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div .summary .product_meta{
display:none;
}
Ukryj ilość i dodaj do koszyka
#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{
display:none;
}#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{ Właśnie przyjrzeliśmy się różnym skryptom, aby dostosować różne aspekty przycisku szybkiego podglądu w WooCommerce. Jeśli chcesz dowiedzieć się więcej o tym, co możesz zrobić z CSS, zapoznaj się z tym przewodnikiem.
display:none;
}
Przykładowe skrypty CSS
Teraz, gdy nauczyłeś się, jak dodawać i wprowadzać podstawowe dostosowania do szybkiego widoku w WooCommerce, przejdźmy o krok dalej. Poniżej znajdziesz trzy przykłady, jak edytować przycisk szybkiego podglądu i dodać trochę smaczku do strony Twojego sklepu.
Okrągły przycisk z niestandardową ikoną
li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
font-style:normal;
font-family: "Font Awesome 5 Free";
content: "\f002";
color:white;
background:black;
padding: 15px;
border-radius:50%;
}
Stylizowany przycisk tekstowy
li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
font-style:normal;
content: "view";
color:black;
background:#eeeeee;
padding:8px 18px;
border:3px solid brown;
border-radius:15px 3px;
}
Używanie obrazu jako przycisku
li.product > a.button.add_to_cart_button{
bottom:30px;
position:relative;
}
li.product .qlwcdc_quick_view.button{
background:transparent;
width:85px;
content:url('https://icons.iconarchive.com/icons/iynque/flurry-extras-9/512/Quick-Look-Droplet-icon.png');
}
Wniosek
Podsumowując, dodając przycisk szybkiego podglądu poprawisz wrażenia zakupowe swoich klientów. Będą mogli zobaczyć główne szczegóły produktu bezpośrednio na stronie sklepu bez konieczności otwierania strony produktu każdego produktu, który chcą zobaczyć. Najłatwiejszym i wygodniejszym sposobem dodania przycisku szybkiego podglądu w WooCommerce jest użycie wtyczki Direct Checkout. To narzędzie umożliwia dodanie przycisku szybkiego podglądu na stronie sklepu za pomocą kilku kliknięć. Następnie, jeśli chcesz pójść o krok dalej i dostosować zarówno przycisk, jak i wyskakujące okienko, możesz użyć trochę CSS.
Czy znasz inne sposoby na umieszczenie przycisku szybkiego podglądu w swoim sklepie? Czy miałeś jakieś problemy z naszym przewodnikiem? Daj nam znać w sekcji komentarzy poniżej, a my dołożymy wszelkich starań, aby Ci pomóc.
Aby uzyskać więcej informacji na temat dostosowywania sklepu, zalecamy zapoznanie się z następującymi przewodnikami:
- Jak dostosować stronę sklepu WooCommerce?
- Jak dostosować przycisk Dodaj do koszyka w WooCommerce?
- Edytuj stronę kasy WooCommerce