Jak dodać przycisk szybkiego zakupu w WooCommerce? Z wtyczkami i bez

Jeśli prowadzisz firmę online, być może szukasz sposobów na zwiększenie sprzedaży, konwersji i przychodów. Możesz przechwytywać adresy e-mail odwiedzających, włączać wyskakujące okienka z zamiarem wyjścia lub wysyłać biuletyny, ale jest coś znacznie potężniejszego. W tym poście pokażemy, jak dodać przycisk szybkiego zakupu w WooCommerce !

Co to jest przycisk szybkiego zakupu?

Przycisk szybkiego zakupu, znany również jako przycisk Kup teraz, umożliwia kupującym szybsze kupowanie żądanych produktów i uniknięcie dodatkowych etapów procesu realizacji transakcji. Więc zamiast dodawać produkty do koszyka, przechodząc do strony koszyka, a następnie do strony kasy, mogą jednym kliknięciem przejść ze strony produktu na stronę kasy. W ten sposób ograniczysz porzucanie i porzucanie koszyków.

Większość dużych firm e-commerce, takich jak Amazon, ma przycisk szybkiego zakupu na swojej stronie produktu, który umożliwia kupowanie jednym kliknięciem. Tak więc, gdy kupujący kliknie przycisk Kup teraz, zostanie automatycznie przekierowany na stronę kasy. Jak możesz sobie wyobrazić, jest to świetny sposób na zwiększenie sprzedaży.

Dlaczego powinieneś używać przycisku Szybki zakup WooCommerce?

Ponad 75% kupujących opuszcza sklepy internetowe z produktami w koszyku. Jednym z głównych powodów jest to, że proces zakupu jest długi i niejasny. Im dłuższy ten proces, tym większe szanse, że użytkownicy zrezygnują, więc jednym z najlepszych rozwiązań jest dodanie przycisku szybkiego zakupu do sklepu WooCommerce. Nie oznacza to, że musisz pozbyć się przycisku Dodaj do koszyka. Nie wszyscy użytkownicy są gotowi do zakupu w chwili, gdy odwiedzają Twoją witrynę.

Jednak udostępnienie użytkownikom, którzy są gotowi do zakupu od razu, jednym kliknięciem, pomoże Ci zwiększyć liczbę konwersji. Dodatkowo przyciski szybkiego zakupu to dobry pomysł na strony z subskrypcją lub członkostwem. Gdy użytkownik zarejestruje się w celu subskrypcji, wystarczy przekierować go na stronę kasy, zamiast przenosić go na stronę koszyka, a następnie do kasy.

Jak dodać przycisk szybkiego zakupu w WooCoommerce?

Istnieją trzy główne metody dodania przycisku szybkiego zakupu w WooCommerce :

1. Podłącz
2. Programowo (kodowanie)
3. Skróty

Wszystkie te metody są w 100% przyjazne dla początkujących, więc możesz wybrać tę, która najbardziej Ci odpowiada.

1) Wtyczka

Dostępnych jest wiele wtyczek WordPress do dodawania przycisku szybkiego zakupu do Twojej witryny. Jednak zalecamy WooCommerce Direct Checkout by QuadLayers, jeden z najlepszych i lekkich dodatków, które upraszczają proces realizacji transakcji.

Direct Checkout dla WooCommerce to narzędzie freemium, które ma darmową wersję i trzy plany premium, które zaczynają się od 20 USD (płatność jednorazowa). Darmowa wersja ma ponad 70 000 aktywnych instalacji i ma wiele wspaniałych funkcji. Ale jeśli potrzebujesz bardziej zaawansowanych funkcji, najlepszym wyborem będzie wersja pro.

Instalacja i aktywacja wtyczki

1) Zainstaluj wtyczkę na swojej stronie.

2) Następnie aktywuj go.

Jeśli korzystasz z niektórych planów premium, z tej samej strony będziesz mógł przesłać pobrane pliki wtyczek. Następnie kliknij Zainstaluj teraz .

Po instalacji aktywuj wtyczkę.

Teraz, gdy funkcja Direct Checkout dla WooCommerce jest aktywna, przyjrzyjmy się konfiguracji.

Aktywuj licencję

W WooCommerce > Ustawienia > Bezpośrednia kasa , będziesz mógł zobaczyć opcje konfiguracji, aby uprościć proces realizacji transakcji.

Następną rzeczą, którą musisz zrobić, to aktywować kopię premium wtyczki za pomocą ważnego klucza licencyjnego.

Klucz licencyjny można znaleźć na swoim koncie QuadLayers. Po prostu skopiuj klucz licencyjny i wklej go do ustawień wtyczek wraz z powiązanym z nim adresem e-mail. Weryfikacja klucza jest ważna, ponieważ pozwoli Ci otrzymywać automatyczne aktualizacje. Za każdym razem, gdy pojawi się nowa wersja wtyczki, możesz ją zaktualizować bezpośrednio z pulpitu WordPress.

Konfiguracja

Zanim dodasz przycisk Kup teraz do WooCommerce, musisz skonfigurować i dostosować opcje realizacji transakcji. Przede wszystkim upewnij się, że masz jakieś produkty dostępne w swoim sklepie, abyś mógł przetestować personalizację. W naszym przypadku mamy jeden produkt testowy, a jak widać na stronie produktu znajduje się tylko przycisk Dodaj do koszyka .

Za każdym razem, gdy odwiedzający kliknie ten przycisk, produkt zostanie dodany do jego koszyka. Klient będzie musiał przejść do strony koszyka, a następnie strony kasy. Dzięki funkcji Direct Checkout możesz skierować kupującego ze strony produktu na stronę kasy, pomijając stronę koszyka. W ten sposób możesz zwiększyć konwersje.

Korzystanie z tej wtyczki jest bardzo łatwe. W sekcji ustawień Direct Checkout zobaczysz opcję wyłączenia strony koszyka. Wszystko, co musisz zrobić, to włączyć przekierowanie i dodać stronę kasy jako miejsce docelowe.

Następnie upewnij się, że zapisałeś zmiany.

Teraz możesz już iść. Gdy kupujący klikną przycisk zakupu, zostaną automatycznie przekierowani na stronę kasy. Stamtąd klient będzie mógł dodać informacje rozliczeniowe, adresy wysyłki i dokonać płatności.

Wtyczka WooCommerce Direct Checkout umożliwia również usuwanie pól kasowych, adresów rozliczeniowych, adresów wysyłkowych i innych.

Cennik WooCommerce Direct Checkout

Direct Checkout dla WooCommerce ma darmową wersję z podstawowymi funkcjami i trzema planami premium.

• Osobisty – 20 USD jednorazowa płatność – Pojedynczy klucz licencyjny
• Agencja – 40 USD jednorazowa płatność – 5 kluczy licencyjnych
• Programista – jednorazowa płatność 80 USD – Nielimitowane klucze licencyjne

Darmowa wersja jest doskonała i ma wszystko, czego potrzebujesz na początek. Ale jeśli potrzebujesz bardziej zaawansowanych funkcji, zalecamy wypróbowanie planu osobistego lub agencyjnego.

Sprawdź WooCommerce Direct Checkout

Jeśli chcesz rzucić okiem na inne narzędzia, sprawdź naszą listę najlepszych wtyczek do szybkiego zakupu. Jeśli z drugiej strony chcesz jeszcze bardziej dostosować swoją stronę kasy, dodając i edytując pola kasy, możesz zajrzeć do WooCommerce Checkout Manager.

2) Programowo (kodowanie)

Jeśli nie chcesz instalować żadnych wtyczek, możesz programowo dodać przycisk szybkiego zakupu w WooCommerce. Ta metoda wymaga pewnej wiedzy technicznej i cierpliwości. Jeśli jednak wykonasz te kroki, będziesz w stanie to zrobić, nawet jeśli jesteś początkującym. Pokażemy Ci, jak utworzyć przycisk dodawania do koszyka, zmodyfikować jego adres URL oraz jak wstawić go dla produktów prostych, zmiennych i pogrupowanych.

1- Utwórz adres URL kasy

Najpierw musisz dodać link do przycisku dodawania do koszyka. Musisz zastąpić PRODUCT_ID kodem produktu, który chcesz umieścić w koszyku.

 https://twojadomena.com/cart/?add-to-cart=PRODUCT_ID

Ponieważ chcemy, aby użytkownicy pomijali stronę koszyka i przekierowywali ich na stronę kasy, musimy zmodyfikować adres URL w następujący sposób:

 https://twojadomena.com/checkout/?add-to-cart=PRODUCT_ID

2- Utwórz link do produktu

Następnie musisz zmodyfikować adres URL w oparciu o typ produktu: pojedynczy, zmienny i pogrupowany. A) Pojedynczy produkt Adres URL pojedynczych produktów to:

 https://twojadomena.com/checkout/?add-to-cart=PRODUCT_ID

Musisz zastąpić PRODUCT_ID swoim identyfikatorem produktu. Na przykład dla pojedynczego produktu o ID = 10 link będzie wyglądał następująco:

 https://twojadomena.com/checkout/?add-to-cart=10 

B) Zmienny produkt W przypadku zmiennych produktów musisz uzyskać identyfikator odmiany z Produkty > Odmiany i użyj tego identyfikatora odmiany w adresie URL w następujący sposób:

 https://twojadomena.com/checkout/?add-to-cart=VARIATION_ID

Jeśli więc identyfikator odmiany = 29, link będzie wyglądał następująco:

 https://twojadomena.com/checkout/?checkout=29

Możesz również utworzyć link, używając identyfikatora produktu i identyfikatora odmiany:

 https://twojadomena.com/checkout/?checkout=PRODUCT_ID&variation_id=VARIATION_ID

Zalecamy jednak używanie tylko identyfikatora odmiany, ponieważ jest to prostsze.

UWAGA : będzie to działać tylko w przypadku odmian, które mają wygenerowane wszystkie atrybuty. W przypadku innych odmian musisz dodać definicję atrybutu, którego brakuje w linku. Załóżmy na przykład, że chcesz utworzyć adres URL dla identyfikatora odmiany = 30. Zdefiniowany jest kolor atrybutu (zielony), ale nie rozmiar. Jeśli więc chcemy dodać size = medium, adres URL będzie wyglądał następująco:

 https://twojadomena.com/checkout/?checkout=30&pa_size=medium

C) Produkt zgrupowany W przypadku produktów zgrupowanych, zamiast dodawać identyfikator odmiany, należy dodać identyfikator produktu zgrupowanego wraz z identyfikatorem produktów podrzędnych i ilościami dla każdego z nich.

 https://twojadomena.com/checkout/?add-to-cart=GROUPED_PRODUCT_ID&ilość[PRODUCT_ID1]=1&ilość[PRODUCT_ID2]=1

Na przykład uwzględnimy tutaj identyfikator produktu zgrupowanego = 1900, a identyfikator produktu podrzędnego = 10 i 15.

 https://twojadomena.com/checkout/?add-to-cart=1900&ilość[10]=1&ilość[15]=1

3- Zdefiniuj ilość

Dodatkowo możesz również zdefiniować liczbę produktów, które chcesz uwzględnić. W tym celu musisz użyć parametru ilość . Jeśli nie określisz liczby produktów, domyślnie będzie to 1.

Przyjrzyjmy się teraz, jak uwzględnić ilość parametrów w produktach pojedynczych, zmiennych i zgrupowanych.

A) Pojedynczy produkt Dodajesz parametr ilość po identyfikatorze produktu :

 https://twojadomena.com/checkout/?add-to-cart=PRODUCT_ID&quantity=1

Jeśli więc chcesz dodać identyfikator produktu = 10 x2, link będzie wyglądał następująco:

 https://twojadomena.com/checkout/?add-to-cart=10&quantity=2

B) Produkt zmienny W przypadku produktów zmiennych logika jest taka sama:

 https://twojadomena.com/checkout/?add-to-cart=VARIATION_ID&quantity=1

W przypadku identyfikatora odmiany = 29 i ilości = 3 link będzie wyglądał następująco:

 https://twojadomena.com/checkout/?add-to-cart=29&quantity=3

C) Produkty zgrupowane Na koniec, w przypadku produktów zgrupowanych, standardowy adres URL to:

 https://twojadomena.com/checkout/?add-to-cart=GROUPED_PRODUCT_ID&ilość[PRODUCT_ID1]=1&ilość[PRODUCT_ID2]=1

Tak więc dla zgrupowanego identyfikatora produktu = 1900 link o identyfikatorze produktu = 10 x3 i identyfikatorze produktu = 15 x2 będzie wyglądał następująco:

 https://twojadomena.com/checkout/?add-to-cart=1900&ilość[10]=3&ilość[15]=2

Po zakończeniu dostosowywania adresu URL, jeśli sprawdzisz stronę z interfejsu, zobaczysz adres URL Dodaj do koszyka , który przekieruje użytkowników bezpośrednio na stronę kasy. Działa to funkcjonalnie, ale nie wygląda świetnie. Teraz musisz przekształcić ten link w ładny przycisk, dodając trochę stylizacji z odrobiną CSS.

4- Zdefiniuj styl przycisku

Po zmodyfikowaniu wszystkich adresów URL, musisz utworzyć przycisk Kup teraz. Ponieważ skierujemy klientów bezpośrednio do kasy, wywołamy przycisk Kup teraz zamiast Dodaj do koszyka .

W WooCommerce istnieją dwa style przycisków:

1. Domyślny styl przycisku

 <a class="button" href="#">Kup teraz</a>

2. Alternatywny styl przycisku

 <a class="button alt" href="#">Kup teraz</a>

Dodatkowo możesz stworzyć własny styl przycisku:

 <a class="button my-button" href="#">Kup teraz</a>

Poniższy kod wyświetli czerwony przycisk z białymi literami i cienką niebieską obwódką.

 .mój-przycisk {
kolor biały;
kolor tła: czerwony;
obramowanie: 1px stałe niebieskie;
promień obramowania: 3px;
box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.75);
}

Po prostu skopiuj i wklej kod w panelu WordPress > Wygląd> Dostosuj> Niestandardowy CSS.

Następnie dostosuj go, aby nadać mu wygląd i styl swojej witryny, zmieniając kolory, obramowanie, rozmiar itd. Jeśli chcesz dostosować swój sklep za pomocą odrobiny kodowania, zalecamy zapoznanie się z niektórymi z poniższych przewodników:

• Jak dostosować przycisk Dodaj do koszyka
• Jak edytować stronę sklepu
• Dostosuj stronę kasy krok po kroku

3) Skróty

Ostatnią metodą dodania przycisku Kup teraz są krótkie kody. Mimo że nie ma skrótu do przycisku szybkiego zakupu w WooCommerce, istnieją obejścia umożliwiające zrobienie czegoś podobnego. Ta metoda jest przydatna, jeśli na przykład chcesz promować jeden ze swoich produktów w poście na blogu, możesz dodać artykuł dotyczący opcji szybkiego zakupu bez konieczności łączenia go z produktem.

WooCommerce zawiera wiele skrótów, których możesz używać w dowolnym miejscu na swojej stronie. Wspaniałą rzeczą w używaniu skrótów jest to, że nie musisz modyfikować podstawowych plików ani niczego. Po prostu skopiuj i wklej krótki kod w dowolnym miejscu, w którym chcesz go wyświetlić i to wszystko.

Dodaj do koszyka shortcode

Ponieważ nie ma skrótu do przycisku szybkiego zakupu, dodamy przycisk Dodaj do koszyka, a następnie zmienimy adres URL, aby przekierować użytkownika do kasy. Najpierw zaloguj się do swojej witryny WordPress i przejdź do edytora treści, w którym chcesz wyświetlić przycisk dodawania do koszyka. Tutaj dodasz przycisk na przykład do jednego z postów z recenzjami produktów.

Edytor Gutenberg jest dostarczany z blokiem shortcode, więc dodaj blok do obszaru zawartości. Skrót, którego użyjemy dla przycisku, to:

 [ add_to_cart ]

Musisz zastąpić identyfikator swoim identyfikatorem produktu. Możesz pobrać swój unikalny identyfikator produktu z sekcji Produkty WooCommerce .

W naszym przypadku identyfikator produktu to 10, więc zmodyfikujemy krótki kod w następujący sposób:

 [ add_to_cart ]

Postępując zgodnie z tym przykładem, wklej krótki kod do obszaru treści i opublikuj lub zaktualizuj post.

Kiedy więc sprawdzisz swój artykuł z frontendu, zobaczysz stylowy przycisk, który pozwoli Twoim klientom dodać produkt o ID=10 do koszyka.

Możesz także dostosować krótki kod za pomocą niektórych atrybutów. Wraz z identyfikatorem shortcode obsługuje inne atrybuty, takie jak klasa, ilość, SKU, styl i pokazywanie ceny. Na przykład możesz zmodyfikować przycisk dodawania do koszyka za pomocą krótkiego kodu w następujący sposób:

 [ add_to_cart id=”XXXX” class=”alt” quantity=”2” sku=”XXXX” style=”border:4px solid #ccc; padding: 12px;” show_price=”true” add_to_cart id=”XXXX” class=”alt” quantity=”2” sku=”XXXX” style=”border:4px solid #ccc; padding: 12px;” show_price=”true” add_to_cart id=”XXXX” class=”alt” quantity=”2” sku=”XXXX” style=”border:4px solid #ccc; padding: 12px;” show_price=”true” ]

Po prostu wpisz prawidłowe wartości dla swojego produktu w każdym atrybucie. Dodatkowo możesz dostosować stylizację przycisku. Jedną z zalet tej metody jest to, że możesz również wstawić przycisk dodawania do koszyka w jednym z obszarów widżetów.

Zmień adres URL, aby kierować użytkowników do kasy

Po umieszczeniu krótkiego kodu pamiętaj, aby zmienić adres URL koszyka, aby skierować użytkownika do kasy.

 href=”http://twojadomena.com/checkout/?add-to-cart=10″

Aby to zrobić, masz dwie możliwości:

1. Na pulpicie WP przejdź do WooCommerce > Ustawienia > Produkty > Ogólne . Tutaj zaznacz opcję „ Włącz przyciski dodawania AJAX do koszyka w archiwach ” i wyłącz „Przekieruj do strony koszyka po pomyślnym dodaniu”.

2. Zainstaluj Direct Checkout dla WooCommerce, aby pominąć stronę koszyka i przekierować kupujących ze strony produktu na stronę kasy.

Rozwiązywanie problemów

Jeśli zmodyfikowałeś przycisk CSS, a zmiana nie jest odzwierciedlona w Twoim interfejsie, prawdopodobnie jest to problem z pamięcią podręczną. Aby to naprawić, po prostu wyczyść pamięć podręczną przeglądarki i pamięć podręczną WordPress. Jeśli przycisk nadal się nie pojawia, dokładnie sprawdź kod.

Wniosek

Podsumowując, dodanie przycisku szybkiego zakupu do sklepu WooCommerce może pomóc w zwiększeniu konwersji. Nauczyłeś się 3 różnych sposobów, aby to osiągnąć:

1. Z wtyczką
2. Programowo (kodowanie)
3. Ze skrótami

Najprostszym sposobem jest użycie wtyczki Direct Checkout . Za pomocą kilku kliknięć będziesz mógł skierować swoich użytkowników ze strony produktu na stronę kasy. Jeśli nie chcesz używać żadnych wtyczek, metoda kodowania jest doskonałym wyborem, ale wymaga pewnych umiejętności technicznych.

na koniec, kolejną interesującą opcją skrócenia procesu kasowania i zwiększenia konwersji jest utworzenie bezpośrednich linków do kasy w Twoim sklepie. Więcej informacji na ten temat znajdziesz w naszym przewodniku krok po kroku.

Mamy nadzieję, że ten przewodnik okazał się pomocny i nauczyłeś się, jak dodać przycisk szybkiego zakupu w WooCommerce. Jeśli tak, rozważ udostępnienie tego posta w mediach społecznościowych.

Którą metodę zamierzasz wypróbować w swojej witrynie? Jakie inne rzeczy robisz w swoim sklepie, aby zwiększyć współczynniki konwersji? Daj nam znać w komentarzach poniżej!