Oferowanie klientom kodów rabatowych to świetny sposób na zachęcenie do sprzedaży i zwiększenie zaangażowania w Twoim sklepie WooCommerce. Niezależnie od tego, czy jest to zniżka, darmowa wysyłka, czy darmowy prezent, kody rabatowe to świetny sposób na zachęcenie klientów do dokonania zakupu. Jednak pole wprowadzania kodu rabatowego na stronie koszyka WooCommerce może być dość małe i ciasne, co prowadzi do mniej niż idealnego doświadczenia klienta.
Na szczęście istnieje prosty sposób na rozszerzenie pola wprowadzania kodu rabatowego i poprawę ogólnego doświadczenia Twoich klientów. Za pomocą kilku prostych kroków możesz szybko i łatwo rozszerzyć pole wprowadzania kodu rabatowego na stronie koszyka WooCommerce, zapewniając bardziej przyjazne dla użytkownika doświadczenie dla Twoich klientów.
Wprowadzenie
Kiedy instalujesz wiele motywów WordPress, które twierdzą, że obsługują WooCommerce, jednym z dużych problemów (i jednym z moich największych narzekań) jest to, że nikt nie zwraca uwagi na rozmiar pola kodu rabatowego na stronie koszyka.
Jeśli na stronie koszyka doświadczasz problemu z krótkim, nieczytelnym polem kodu rabatowego i chcesz coś z tym zrobić, aby ludzie mogli go używać, trafiłeś do właściwego artykułu!
Naprawa jest stosunkowo prosta, to tylko trochę CSS i pokażę Ci, jak wdrożyć poprawkę na kilka różnych sposobów.
Jak naprawić krótkie pole wprowadzania kodu rabatowego na stronie koszyka
Pierwszym krokiem jest otwarcie Google Chrome, Safari lub Firefox, w zasadzie każdego nowoczesnego przeglądarki.
Chcesz kliknąć prawym przyciskiem myszy na tym polu kodu rabatowego i wybrać „Zbadaj”.
Po kliknięciu „Zbadaj” otworzą się narzędzia deweloperskie, które pozwolą Ci badać elementy na stronie.
Jeśli robisz to po raz pierwszy, nie martw się, pokażę Ci dokładnie, co robić dalej.
Otworzy się pole wprowadzania kodu rabatowego, wyglądające tak:
Style to jest to, co chcemy zmienić.
Poeksperymentujmy trochę, aby upewnić się, że tworzymy nową regułę CSS z odpowiednią szerokością za pierwszym razem. Dobrą rzeczą jest to, że jeśli wprowadzisz zmiany w tym polu Narzędzi Deweloperskich, pojawią się one na stronie (tymczasowo, dopóki nie odświeżysz), więc możesz przetestować, co najlepiej sprawdzi się pod względem szerokości.
Kliknij przycisk „Nowa reguła stylu”:
Następnie zmień podświetlony tekst na następujący:
.woocommerce-cart table.cart td.actions input#coupon_code
Po wpisaniu tego tekstu naciśnij klawisz TAB na klawiaturze, a nie Enter. Jeśli przypadkowo naciśniesz Enter, nic się nie stało, po prostu kliknij między nawiasami klamrowymi { } i doda się nowa linia między nawiasami klamrowymi.
Dodaj regułę w ten sposób:
Baw się wartością szerokości (200px na zrzucie ekranu), dopóki nie będziesz zadowolony z wyglądu pola kodu rabatowego na ekranie. Zobaczysz, jak strona internetowa się aktualizuje podczas zmiany wartości.
Gdy będziesz zadowolony, skopiuj tekst i zapisz go w Notatniku (Windows) lub TextEdit (Mac) dla bezpieczeństwa.
.woocommerce-cart table.cart td.actions input#coupon_code {
width: 200px;
}
To jest kod CSS, który wygenerowaliśmy i teraz musimy go zainstalować na stronie na stałe.
Instalowanie poprawki pola wprowadzania kodu rabatowego na stałe
Jeśli masz doświadczenie w edycji plików CSS, prawdopodobnie wiesz, że w katalogu każdej zainstalowanej motywu znajduje się plik style.css.
Idealnie byłoby nadpisać to za pomocą motywu potomnego i zainstalować tam swoje zmiany.
Ale jeśli nie masz żadnego z nich, jest inny sposób, który możesz zastosować i nie wymaga edycji żadnych plików CSS, które mogłyby zostać nadpisane podczas aktualizacji motywu.
Istnieje wtyczka o nazwie Simple Custom CSS and JS. Ta wtyczka pozwala śledzić wszystkie drobne poprawki CSS i javascript, które musisz wprowadzić w swoim motywie, bez konieczności faktycznej edycji samego motywu. Jest bardzo przydatna.
Zainstaluj ją, przechodząc do Wtyczki->Dodaj nową i wyszukując ją. Zainstaluj i aktywuj.
Następnie otrzymasz nowe menu w backendzie:
Kliknij Dodaj niestandardowy CSS. Otworzy się nowe okno, w którym możesz wprowadzić wcześniej wygenerowany kod.
Nazwij ją na przykład „Poprawka szerokości pola kuponu koszyka”, abyś mógł od razu wiedzieć, do czego służyła, i dodaj swój kod w podanym polu.
Powinno to wyglądać tak:
I to wszystko!
Dlaczego to było tak ważne?
Cóż, kupony są jedną z twoich najlepszych broni marketingowych, a bez wizualnych wskazówek, jak używać tych kuponów, twoi klienci będą zmuszeni szukać miejsca, w którym można wpisać kod.
Obserwowałem przez lata, że klienci potrafią być dość leniwi, jeśli chodzi o takie rzeczy i łatwo się poddają. Im bardziej coś oczywiste, tym lepsze będą twoje wyniki dla tej akcji.
Więc w tym artykule omówiliśmy kluczowe koncepcje, które pomogą naprawić pole wprowadzania kuponu:
- Jak naprawić krótkie pole wprowadzania kodu rabatowego na stronie koszyka
- Instalowanie poprawki pola wprowadzania kodu rabatowego na stałe
Więc wejdź tam i wypróbuj tę poprawkę, dasz radę!
