Jak zmodyfikować szczegóły koszyka na stronie kasy WooCommerce?

Większość z was wiedziałaby, że WooCommerce nie pozwala klientom aktualizować koszyka ze strony kasy. Oznacza to, że nie możesz zmienić ilości ani usunąć produktu ze strony kasy. Klient musi wrócić do strony koszyka, zaktualizować koszyk, a następnie ponownie przejść do strony kasy. Powoduje to, że klienci muszą ponownie wypełnić wszystkie wymagane informacje. Jest to trochę frustrujące dla klientów , zwłaszcza dla gości (co stanowi zdecydowaną większość).

W tym poście omówimy, jak zaktualizować koszyk na stronie kasy WooCommerce. Opracowałem tę funkcję w naszym wydarzeniu Fun Friday w biurze. W wesołe piątki staramy się spędzić cały dzień robiąc rzeczy, które nie są związane z podstawową działalnością zawodową danej osoby.

Najpierw spójrzmy na tabelę szczegółów koszyka na stronie WooCommerce Checkout:

W tym miejscu klient nie może edytować ilości produktu ani go usunąć. Dlatego chcemy zapewnić możliwość zmiany ilości i usunięcia produktu bez konieczności opuszczania przez klienta strony kasy.

Zaczynajmy

Jeśli chcesz pominąć to wyjaśnienie, a zamiast tego chcesz wdrożyć funkcjonalność w swoim sklepie, możesz pobrać wtyczkę, którą stworzyłem.

1. Wprowadzanie zmian interfejsu użytkownika w sekcji koszyka na stronie kasy

Musimy zmodyfikować kolumnę „Produkt” w tabeli „Twoje zamówienie”. Musimy dodać ikonę „Usuń” i „Wybór ilości” dla każdej pozycji w koszyku.

Aby to osiągnąć, WooCommerce udostępnił filtr, który pozwala modyfikować wiersz Nazwa produktu każdego elementu koszyka: woocommerce_cart_item_name .

Wybraną ilość wyświetlaną w tabeli Twoje zamówienie można również zmodyfikować za pomocą innego filtra WooCommerce: woocommerce_checkout_cart_item_quantity .

Użyjemy obu filtrów i umożliwimy klientom edycję szczegółów koszyka na stronie kasy. Poniższe zmiany możesz wprowadzić, tworząc nową wtyczkę.

Po pierwsze, nie potrzebujemy ilości pokazanej dla każdej pozycji w tabeli Twoje zamówienie. Użyjemy więc filtra i zwrócimy pusty ciąg, aby nadpisał dane WooCommerce.

Następnie zmodyfikujemy wiersz Nazwa produktu za pomocą filtra woocommerce_cart_item_name i dodamy pole Ilość i ikonę Usuń.

Tutaj używamy funkcji is_checkout() , aby upewnić się, że wprowadzamy zmiany tylko na stronie kasy. Podzieliłem go na 3 kroki, jak wspomniano w powyższym fragmencie kodu.

Krok 1: Dodaj ikonę usuwania
W tym kroku dodamy ikonę Usuń dla każdej pozycji w koszyku. To jest ta sama ikona, która jest używana w koszyku WooCommerce.

Tutaj użyliśmy funkcji WooCommerce get_remove_url() . Musimy przekazać $cart_key dla każdej pozycji koszyka. Tak więc funkcja get_remove_url() zwróci unikalny adres URL, aby usunąć każdy element koszyka.

Krok 2: Dodaj nazwę produktu
Ponieważ modyfikujemy wiersz nazwy produktu, musimy również dodać nazwę produktu w wierszu wraz z nowymi polami. Nazwę produktu otrzymamy z samego filtra, który jest przekazywany jako pierwszy argument. W naszym przypadku jest to $product_title.

Zwiększ sprzedaż w sklepie WooCommerce

„Ciekawe, jak bardzo WooCommerce Abandoned Cart Pro zwiększył sprzedaż produktów o wysokiej wartości. Spodziewałem się, że wtyczka zwiększy sprzedaż produktów o niskiej wartości, których klienci nie mają nic przeciwko temu, czy kupują (np. żywność), ale ja Byliśmy bardziej zaskoczeni, widząc różnicę, jaką może to zrobić w przypadku produktów, które wymagają tak dużej decyzji o zakupie”. - Katie Keith, dyrektor operacyjny w Barn2 Media

Krok 3: Dodaj selektor ilości
Na koniec dodamy selektor ilości. Tutaj użyjemy funkcji WooCommerce woocommerce_quantity_input() .

Musimy podać cztery parametry dla funkcji „nazwa_wejścia”, „wartość_wejściowa”, „wartość_maks.”, „wartość_min”.

• input_name: Będzie zawierał tablicę o nazwie „cart”, w tym musisz podać klucz pozycji koszyka i ilość.
• input_value: Będzie zawierać wybraną ilość produktu.
• max_value: Będzie to maksymalny numer magazynowy produktu.
• min_value: Będzie to minimalna wartość selektora ilości.

Po wykonaniu wszystkich powyższych kroków zostanie teraz wyświetlony przycisk usuwania i selektor ilości w tabeli Twoje zamówienie na stronie kasy.

Tutaj mamy jeden warunek if ( is_checkout() ) { warunek. Jest to konieczne z powodów wymienionych poniżej.

Filtr, którego użyliśmy do zmiany wartości kolumny nazwy produktu (woocommerce_cart_item_name) jest również wywoływany na stronie Koszyk Twojego sklepu. Aby upewnić się, że kod, który piszemy, nie zakłóca funkcjonalności strony koszyka, upewniliśmy się, że zmiany są wprowadzane tylko na stronie kasy.

2. Aktualizacja koszyka za pośrednictwem połączenia Ajax

Dodanie tak dużej ilości nie zadziała, musimy się upewnić, że gdy klient zmieni ilość, odzwierciedli to w sumie koszyka.

Zmiana ilości

Potrzebujemy wywołania Ajax, aby zmienić sumę koszyka. Kiedy więc klient zmieni ilość, musimy podjąć działanie i zmienić sumę koszyka.

Teraz umieścimy w kolejce plik „add_quantity.js” w stopce witryny i upewnimy się, że jest on dołączony, gdy jesteśmy na stronie kasy.

Teraz musimy dodać funkcję w pliku Javascript, która wywoła ajax w celu zmiany sumy koszyka.

Powyższy javascript wywoła ajax, w którym przekażemy dane zmodyfikowanego formularza zamówienia. Ale zadzwoni, gdy klikniemy ikonę ilości. Będzie więc zawierał zmodyfikowaną wartość ilości.

Teraz musimy dodać funkcję dla ajax, która zmieni sumę koszyka zgodnie ze zmodyfikowaną ilością.

Gdy zmodyfikujemy ilość na stronie kasy, zostanie wywołana powyższa funkcja, która zmieni sumę koszyka. W naszych funkcjach wykorzystaliśmy funkcje WooCommerce.

Użyliśmy funkcji „set_quantity()”, „calculate_totals()”, „woocommerce_cart_totals()” do modyfikowania sumy koszyka i wyświetlania jej w tabeli Twoje zamówienie na stronie kasy.

set_quantity() : Ta funkcja ustawi zmodyfikowaną ilość w koszyku.

Wysłaliśmy dane z funkcji javascript, które będą miały zmodyfikowaną wartość ilości, więc użyjemy tej zmodyfikowanej wartości i ustawimy ją w koszyku.

Oblicz_totalnie() : Używając tej funkcji nakazujemy, aby ponownie obliczyć sumę koszyka.

woocommerce_cart_totals() : Ta funkcja służy do wyświetlania zmodyfikowanego koszyka.

Gdy wszystkie powyższe obliczenia zostaną wykonane, powróci do skryptu java, z którego wywołaliśmy funkcję ajax. W odpowiedzi na tę funkcję „uruchomimy” funkcję „update_checkout” , która z kolei zmodyfikuje koszyk i wyświetli go użytkownikowi.

Potrzebujemy kodu CSS dla przycisku „Usuń” w tabeli Twojego zamówienia. Powinien więc wyglądać jak przycisk usuwania koszyka WooCommerce. Więc musimy dodać do tego CSS. Możesz dodać CSS w stopce swojej witryny.

Po dodaniu musimy nadać CSS przyciskowi usuwania w pliku CSS. CSS pokazano poniżej.

Jesteśmy więc gotowi z funkcjonalnością, w której możemy modyfikować ilość na stronie kasy WooCommerce.

Po wdrożeniu powyższego, tak wyglądałaby tabela Twoje zamówienie na stronie kasy:

Doda selektor ilości i ikonę usuwania dla każdej pozycji w tabeli Twoje zamówienie na stronie kasy.

Zbudowałem to jako wtyczkę o nazwie Change Quantity on Checkout dla WooCommerce, która została wydana we wrześniu 2016. Jest używana w ponad 400 sklepach WooCommerce. Jeśli używasz już tej wtyczki w swoim sklepie WooCommerce, byłbym wdzięczny, gdybyś poświęcił trochę czasu na przejrzenie wtyczki.

Jeśli masz jakieś uwagi, możesz dać mi znać w komentarzach poniżej lub opublikować na forum wsparcia wtyczki.