Jak utworzyć przycisk Dodaj do koszyka WooCommerce według identyfikatora produktu
Opublikowany: 2021-02-24
WiIt można utworzyć przycisk dodawania do koszyka WooCommerce według identyfikatora produktu i używać przycisku na formularzach, widżetach, poście lub stronach, a nawet na szablonach. Idealnie przycisk Dodaj do koszyka WooCommerce można dostosować, aby pasował do szerokiej gamy niestandardowych opcji.
Przycisk Dodaj do koszyka WooCommerce według identyfikatora produktu
W poprzednim poście wyjaśniłem, jak zmienić przycisk Dodaj do koszyka WooCommerce na link, a także jak zmienić przycisk Dodaj do koszyka WooCommerce, aby przeczytać więcej.
Oto inne poprzednie samouczki, które mogą pomóc Ci dowiedzieć się więcej o tym, jak dostosować przycisk dodawania do koszyka WooCommerce:
- Jak zamienić przycisk Dodaj do koszyka na link WooCommerce
- Jak ukryć więcej informacji i dodać do koszyka WooCommerce
- Jak zmienić tekst przycisku Dodaj do koszyka na stronie sklepu WooCommerce?
- Jak zmienić tekst Dodaj do koszyka Poradnik WooCommerce z przykładami
- Jak programowo dodać produkt do koszyka w WooCommerce?
- Jak zmienić powiadomienie „Dodano do koszyka” WooCommerce?
- Jak ukryć cenę i dodać do koszyka dla wylogowanych użytkowników WooCommerce
Jak widać na powyższej liście samouczków, istnieje kilka sposobów dostosowania przycisku dodawania do koszyka WooCommerce, aby pomóc Ci osiągnąć różne układy treści lub projekt.
Na przykład, jeśli chcesz utworzyć tabelę cen WooCommerce, może być konieczne utworzenie przycisków dodawania do koszyka, które można dodać do przycisku wezwania do działania w tabeli cen.
Utwórz prosty produkt WooCommerce Dodaj do koszyka przycisk według identyfikatora produktu
Aby utworzyć przycisk Dodaj do koszyka WooCommerce według identyfikatora produktu, musisz znać identyfikator produktu konkretnego produktu, dla którego chcesz utworzyć przycisk dodawania do koszyka. Identyfikator produktu można łatwo znaleźć na stronie przeglądu wszystkich produktów, jak wyjaśniono w tym samouczku – Jak uzyskać identyfikator produktu WooCommerce .
Dodaj do koszyka Link
Możesz teraz utworzyć adres URL dodawania koszyka, którego nie dodasz do kodu przycisku w miejscu, w którym chcesz wyświetlić przycisk. W tym przypadku możesz utworzyć prosty link do produktu Dodaj do koszyka, jak w poniższym kodzie:
https://example.com/?add-to-cart=840
Adres URL Twojej witryny powinien zastąpić część adresu URL przyklad.com, a konkretny identyfikator produktu powinien zastąpić identyfikator produktu 840 użyty w powyższym przykładzie.
Możesz dodać to w kodzie przycisku HTML, jak w poniższym kodzie:
Utwórz prosty produkt z ilością WooCommerce Dodaj do koszyka według identyfikatora produktu
Możesz również dodać ilość do adresu URL dodawania do koszyka i możesz to zrobić za pomocą różnych parametrów adresu URL, które są używane do dodawania logiki do adresów URL.
W takim przypadku możesz rozszerzyć kod, który stworzyliśmy w powyższym kroku i utworzyć prosty przycisk produktu WooCommerce dodaj do koszyka o identyfikator produktu z ilością 2 w następujący sposób:
https://example.com/?add-to-cart=840&quantity=2
Jak widać, dodaliśmy znak ampersand i słowo ilość i przyrównaliśmy je do liczby pozycji, które chcemy dodać do koszyka po kliknięciu przycisku tego samego produktu.
Aby dodać ten adres URL do kodu HTML i utworzyć przycisk Dodaj do koszyka WooCommerce według identyfikatora produktu z ilością, użyj poniższego kodu:
Utwórz przycisk Dodaj do koszyka WooCommerce według identyfikatora produktu z przekierowaniem do koszyka
Aby ułatwić klientom sklepu WooCommerce poruszanie się po witrynie, tworzenie przekierowań jest bardzo ważne. W przeszłości wskazywałem na wiele sposobów tworzenia przekierowań WooCommerce.
Warto zauważyć, że udostępniłem w tych wpisach na blogu – WooCommerce tworzy przekierowanie po kasie i przekierowanie WooCommerce po wylogowaniu , a nawet stworzyłem wtyczkę przekierowania WooCommerce po kasie , aby pomóc Ci wdrożyć przekierowanie po kasie.
Przekierowanie WooCommerce do koszyka po dodaniu do koszyka
Możesz również utworzyć przekierowanie do koszyka za pomocą przycisku Dodaj do koszyka WooCommerce według identyfikatora produktu. Możesz to osiągnąć, zmieniając kod, który udostępniłem w powyższym kroku, na następujący:
https://example.com/cart/?add-to-cart=840
Jak widać, dodaliśmy koszyk do adresu URL , aby upewnić się, że użytkownik zostanie przekierowany do koszyka po dodaniu produktu do koszyka. Pełny kod z kodem przycisku HTML wygląda następująco:
Przekierowanie WooCommerce do kasy po dodaniu do koszyka
Możesz również utworzyć przekierowanie do kasy za pomocą przycisku Dodaj do koszyka WooCommerce według identyfikatora produktu. Możesz to osiągnąć, zmieniając kod, który udostępniłem w kroku, dodając kasę na powyższym adresie URL, aby wyglądał następująco:
https://example.com/checkout/?add-to-cart=840
Jak widać, dodaliśmy kasę do adresu URL , aby upewnić się, że użytkownik zostanie przekierowany do kasy po dodaniu produktu do koszyka. Pełny kod z kodem przycisku HTML wygląda następująco:
Wniosek
W tym samouczku podkreśliliśmy różne sposoby tworzenia przycisku Dodaj do koszyka WooCommerce według identyfikatora produktu. Widzieliśmy również, jak dodać przekierowanie do przycisku Dodaj do koszyka, a także jak dodać ilość produktu do dodania przycisk do koszyka.
Mam nadzieję, że możesz teraz utworzyć przycisk Dodaj do koszyka WooCommerce według identyfikatora produktu i użyć go w swojej tabeli cen, formularzach i szablonach. Możesz również dodatkowo dostosować przycisk dodawania do koszyka, korzystając z klasy przycisku dodanej do powyższego kodu. Jeśli nadal dostosowujesz swoją witrynę, możesz skorzystać z pomysłów, które podzieliłem się w Ultimate WooCommerce Hide Guide.
Dla użytkowników WooCommerce, którzy mają zainstalowany motyw Storefront i chcą go dalej dostosowywać, udostępniłem genialną kolekcję ponad 80 porad dotyczących dostosowywania motywu WooCommerce Storefront , które poprowadzą Cię, jak stworzyć niestandardowy wygląd swojej witryny przy użyciu domyślnego motywu WooCommerce – Storefront .
Podobne artykuły
- Jak utworzyć warunkowe pola kasy WooCommerce?
- Jak utworzyć krótki kod logowania do logowania WooCommerce?
- Jak zmienić kolor przycisku Storefront Theme
- Jak uzyskać tytuł produktu WooCommerce?
- Jak ukryć cenę i dodać do koszyka dla wylogowanych użytkowników WooCommerce
- Jak ukryć przycisk aktualizacji koszyka Strona koszyka WooCommerce
- Jak zamienić przycisk Dodaj do koszyka na link WooCommerce
- Jak ukryć cenę, jeśli zero w WooCommerce?
- Jak utworzyć motyw podrzędny WooCommerce Storefront [Kompletny przewodnik]
- Jak ukryć opcję administratora WooCommerce Marketing Hub?
- Jak uzyskać identyfikator produktu na stronie kasy lub stronie zamówienia w WooCommerce?
- Jak uzyskać szczegóły zamówienia po złożeniu zamówienia w WooCommerce?
- Jak przekierować do koszyka po zalogowaniu w WooCommerce
- Jak dodać przekierowanie strony mojego konta WooCommerce?
- Hak przekierowania logowania WooCommerce wyjaśniony na przykładzie
- Jak tymczasowo wyłączyć kasę w WooCommerce?
- Jak skonfigurować blog WooCommerce Storefront