Jak dodać Sticky Add To Cart w WooCommerce w 2023 roku

Dodanie lepkiego przycisku „dodaj do koszyka” do stron produktów WooCommerce to świetny sposób na zapewnienie klientom łatwego dodawania produktów do koszyka z dowolnego miejsca na stronie. Zachęca również niezdecydowanych użytkowników do zakupu Twoich produktów.

Lepki przycisk Dodaj do koszyka może zatem zwiększyć zadowolenie klientów Twojej witryny i współczynniki konwersji.

WooCommerce nie oferuje natywnej funkcji lepkiego dodawania do koszyka. Możesz jednak użyć wtyczki, takiej jak Botiga Pro, aby zapewnić tę funkcjonalność.

W tym samouczku pokażę, jak dodać lepkie przyciski dodawania do koszyka na stronach produktów WooCommerce.

1. Zainstaluj i aktywuj motyw Botiga WooCommerce

Botiga to darmowy motyw WooCommerce, podczas gdy Botiga Pro to wtyczka premium, która rozszerza motyw o zaawansowaną funkcjonalność.

Będziesz potrzebować zarówno motywu, jak i wtyczki, aby dodać lepkie przyciski WooCommerce dodające do koszyka do swojej witryny.

Nasz motyw Botiga jest jednym z najpopularniejszych darmowych motywów WooCommerce na rynku.

Możesz go pobrać tutaj lub znaleźć w oficjalnym repozytorium motywów WordPress.

Następnie otwórz pulpit nawigacyjny WordPress i przejdź do Wygląd > Motywy > Dodaj nowy > Prześlij motyw .

Kliknij przycisk Wybierz plik , aby przesłać motyw, a następnie naciśnij przycisk Zainstaluj teraz .

Po zainstalowaniu motywu kliknij przycisk Aktywuj :

Alternatywnie możesz przejść do Wygląd > Motywy > Dodaj nowy , wpisać „ Botiga ” w pasku wyszukiwania i kliknąć Instaluj , a następnie przyciski Aktywuj :

2. Zainstaluj i aktywuj wtyczkę Botiga Pro

Botiga Pro to wysokiej jakości wtyczka WordPress, która dodaje dodatkową funkcjonalność do darmowego motywu Botiga.

Zapewnia dostęp do wielu imponujących funkcji, w tym tabel rozmiarów, galerii audio i wideo, megamenu, wstępnie zaprojektowanych stron startowych, przyklejonych przycisków dodawania do koszyka i innych.

Ponieważ Botiga Pro jest wtyczką premium, musisz ją kupić tutaj przed przesłaniem do swojej witryny WordPress (cena zaczyna się od 69 USD rocznie).

Gdy masz już wtyczkę, przejdź do pulpitu nawigacyjnego WordPress i przejdź do Wtyczki > Dodaj nową > Prześlij wtyczkę .

Użyj opcji Wybierz pliki , aby przesłać Botiga Pro, a następnie kliknij przyciski Instaluj i Aktywuj , aby zainstalować wtyczkę na swojej stronie.

Następnie musisz aktywować swoją licencję. Skopiuj klucz licencyjny ze swojego konta Botiga, a następnie przejdź do Botiga > Ustawienia > Ogólne . Wprowadź klucz licencyjny i kliknij przycisk Zapisz zmiany , aby aktywować wtyczkę:

3. Importuj witrynę startową (opcjonalnie)

Strony startowe to gotowe strony internetowe, które możesz zaimportować do swojego sklepu WooCommerce. Botiga Pro oferuje wiele dobrze zaprojektowanych, potężnych witryn startowych dla różnych nisz eCommerce.

Chociaż importowanie strony startowej Botiga jest opcjonalne i możesz także zdecydować się na rozpoczęcie projektowania sklepu od zera, korzystając z opcji dostosowywania Botiga, zalecam skorzystanie z tego, ponieważ nada Twojemu sklepowi WooCommerce profesjonalny wygląd (możesz jeszcze dalej dostosować).

Możesz sprawdzić witryny startowe, przechodząc do Botiga > Witryny startowe i wyświetlić podgląd każdej witryny za pomocą przycisku Podgląd .

Gdy znajdziesz witrynę, która Ci się podoba, naciśnij przycisk Importuj :

Jak tylko to zrobisz, pojawi się wyskakujące okienko pokazujące elementy (np. zawartość, widżety, ustawienia Customizer, itp.), które instalator demonstracyjny doda do Twojej witryny.

Masz możliwość odznaczenia dowolnego elementu, ale zalecam pozostawienie ich wszystkich.

Możesz także wybrać pomiędzy zaimportowaniem całej strony początkowej (wraz z treścią, obrazami itp.) lub tylko symbolem zastępczym (który odnosi się do układu strony):

Instalator demonstracyjny zajmie kilka minut, aby zakończyć proces importowania.

4. Włącz moduł

Po zainstalowaniu wtyczki i zaimportowaniu strony startowej nadszedł czas, aby dodać lepkie przyciski dodawania do koszyka na stronach produktów WooCommerce.

Funkcja Product Sticky Add to Cart jest domyślnie wyłączona i należy ją włączyć ręcznie.

W obszarze administracyjnym WordPress przejdź do Botiga > Strona główna . Tutaj znajdziesz moduł Product Sticky Add to Cart w sekcji Zrób więcej z Botiga Pro .

Aktywuj moduł klikając przycisk Aktywuj :

Otóż ​​to. Teraz powinieneś widzieć przyklejony przycisk WooCommerce Dodaj do koszyka na każdej stronie produktu.

Lepki przycisk „Dodaj do koszyka” pojawia się na dole strony produktu obok krótkiego podsumowania produktu, zawierającego małą miniaturę, cenę, dostępne kolory i liczbę produktów, wewnątrz pełnoekranowego dodatku do -pasek koszyka:

5. Skonfiguruj pasek dodawania do koszyka

Możesz dostosować wygląd paska dodawania do koszyka z WordPress Customizer.

Możesz uzyskać dostęp do odpowiednich opcji dostosowywania z modułu Product Sticky Add to Cart .

Kliknij łącze Dostosuj w polu modułu na stronie Botiga > Administrator domowy , aby otworzyć ustawienia modułu:

Alternatywnie możesz uzyskać dostęp do narzędzia Personalizacja w zwykły sposób, z menu Wygląd > Dostosuj :

Po otwarciu Konfiguratora przejdź do sekcji WooCommerce > Pojedynczy produkt > Przyklejony Dodaj do koszyka, gdzie możesz zmodyfikować pasek dodawania do koszyka, korzystając z dostępnych opcji projektu i układu:

Otrzymujesz dostęp do następujących opcji:

I. Pozycja: Domyślnie pasek dodawania do koszyka pojawia się na dole ekranu, ale możesz zmienić jego położenie na górę za pomocą tej opcji.

II. Elementy: Jak wspomniano powyżej, przycisk Dodaj do koszyka pojawia się wraz z szeregiem innych elementów, takich jak obraz miniatury produktu, cena, kolor i licznik produktu. Aby wykluczyć którykolwiek z tych elementów, kliknij ikonę oka obok elementu, który chcesz usunąć.

iii. Odstępy między elementami: Tutaj możesz zdefiniować odstępy w poziomie między elementami wewnątrz paska dodawania do koszyka.

iv. Ukryj, gdy przewiniesz do góry: Ta opcja pozwala ukryć pasek dodawania do koszyka, gdy odwiedzający przegląda górę strony produktu (ponieważ jest tam inny przycisk dodawania do koszyka).

v. Zezwól na zawartość wtyczek innych firm: Tutaj możesz włączyć Botiga, aby wyświetlała zawartość wtyczek innych firm na pasku dodawania do koszyka.

wi. Widoczność: Ta opcja umożliwia wyświetlanie przycisku tylko na urządzeniach stacjonarnych, tylko urządzeniach mobilnych lub na wszystkich urządzeniach.

Wniosek

Dodanie przyklejonego przycisku Dodaj do koszyka do sklepu WooCommerce nie jest trudnym zadaniem, o ile masz dostęp do odpowiednich narzędzi.

Botiga to doskonały darmowy motyw, który w połączeniu z potężną wtyczką Botiga Pro zapewnia wiele zaawansowanych funkcji eCommerce, w tym stylowe, przyklejane przyciski dodawania do koszyka na stronach produktów.

Dodanie lepkiego przycisku Dodaj do koszyka WooCommerce do swojej witryny za pomocą Botiga Pro jest tak proste, jak naciśnięcie przycisku Aktywuj.

Dostosowanie paska dodawania do koszyka jest również proste i można to zrobić w Live Customizer, dzięki czemu możesz zobaczyć zmiany, które wprowadzasz w czasie rzeczywistym.

Czy masz pytania dotyczące tego, jak dodać przyklejony przycisk „dodaj do koszyka” do swojego sklepu WooCommerce? Daj nam znać w sekcji komentarzy poniżej.