Wszystko o WooCommerce | Webinsider - Internet widziany od środka ™

Kategoria: WooCommerce

Simple Cloudflare Turnstile, czyli Cloudflare Turnstile zamiast reCAPCTHA od Google na stronie na WordPressie

Pod koniec lutego opublikowałem informację, że od 1 kwietnia 2024 Google wprowadza nowe limity w ramach usługi Google reCAPTCHA, również w darmowej wersji (reCAPTCHA Lite), co sprawi, że w przypadku np. strony Webinsider.pl z automatu nowy limit, czyli 10 000 „ocen” starczy może na jeden dzień. Dlatego też zapowiedziałem, że pora na migrację na inne rozwiązanie, a konkretnie Cloudflare Turnstile. I jak zapowiedziałem, to właściwie od razu zrobiłem. Zresztą nie tylko na tej stronie…

Prosty sposób na przeniesienie opisu kategorii (i tagów) pod listę produktów w sklepie internetowym na WooCommerce

Wśród sklepów na WooCommerce, z którymi mam styczność w mniejszym lub większym stopniu, w części z nich, są używane opisy kategorii. W większości przypadków tylko i wyłącznie pod pozycjonowanie (SEO), więc teksty tam są, jakie są, niekoniecznie mają faktyczny sens dla zwykłego klienta sklepu, przeglądającego ofertę. Dlatego jedną z częstszych modyfikacji, o jakie jestem proszony w takim przypadkach, jest przeniesienie opisów kategorii pod listę produktów w widoku archiwum kategorii (i tagów).

Edytor blokowy w WordPressie (Gutenberg) nieśmiało atakuje kolejny element – ekran edycji produktów w WooCommerce, choć na razie tylko u chętnych, nawet z przypadku

Mamy już wtyczkę pozwalającą pozbyć się Gutenberga z edytora. Mamy też wtyczkę pozwalającą się pozbyć Gutenberga z konfiguratora widgetów. Brakuje chyba cały czas jeszcze wtyczki pozwalającej w klasyczny sposób zarządzać menu, ale na szczęście ten problem dotyczy – przynajmniej na razie – tylko użytkowników motywów FSE, a więc można powiedzieć, że „widziały gały, w co się pakowały”. Jednak w ostatnich dniach coraz częściej trafiają do mnie pytania/zgłoszenia, że coś dziwnego stało się z edytorem produktów w WooCommerce, i nie tylko wygląda dziwnie, ale brakuje w nim większości opcji. Tak, wirus edytora blokowago powoli i tutaj dociera, więc pewnie niebawem powstanie wtyczka klasyczny edytor, ale tym razem produktów.

Dodawanie własnych etykiet (odznak, badge), np. na zdjęciach produktów w sklepie internetowym na WooCommerce

Dostałem zapytanie od czytelniczki (i klientki naszego sklepu internetowego), jakiej wtyczki właśnie w naszym sklepie używamy do wyświetlania dodatkowych etykiet (po angielsku „badge”, więc tłumacząc dosłownie, będzie to odznaka) na zdjęciach produktów. I choć mógłbym zgodnie z prawdą podać nazwę wtyczki, to nic by to nie dało, bo jest to wtyczka napisana specjalnie na potrzeby naszego sklepu, specjalnie na potrzeby wyświetlania właśnie tych etykiet (odznak). Mogę jednak pokazać, jak szybko w prosty sposób, za pomocą kilku linijek kodu, wdrożyć coś takiego w swoim sklepie.

Zmiana działania przycisków „dodaj do koszyka” na liście produktów (archiwum) w WooCommerce na „sprawdź szczegóły” z linkiem do stron produktów

Jeden z uczestników naszego kursu „Wdrożenie Omnibusa w sklepie na WooCommerce” zapytał, czy faktycznie  – w przypadku informowania o zniżce – trzeba wyświetlać informację o najniższej cenie również w widoku archiwum, czyli katalogu produktów, bo to „trochę rozbija” wygląd tej listy. No cóż, dobre pytanie, bo też spotkałem się z różnymi interpretacjami dotyczącymi tego, gdzie w wyświetlać taką informację, by być „zgodnym z Omnibusem”. Ja uważam, że raczej powinniśmy taką informację wyświetlać wszędzie, gdzie komunikujemy a promocyjnej cenie, a już na pewno tak, skąd można produkt kupić, czyli dodać do koszyka.

Wdrożenie Omnibusa w sklepie internetowym na WooCommerce od strony praktycznej i technicznej, czyli nasz nowy kurs internetowy

Choć od wejścia w życie przepisów wprowadzających do krajowego porządku prawnego przepisów wprowadzających Dyrektywę Omnibus (w uproszczeniu tej nazwy będę używał) minęło już kilka miesięcy, to do tej pory regularnie trafiają do mnie zapytania o wdrożenie Omnibusa w sklepie internetowym. Nie jest to usługa specjalnie droga, ale też nie może być bardzo tania, bo jednak jak to w przypadku usług – płaci się nie tylko za moją wiedzę, ale również czas. I też nie ma co się dziwić, że od czasu do czasu trafi się ktoś, dla kogo w danym monecie kwota ta będzie za wysoka. Dlatego uznałem, że zamiast odprawiać takie osoby z kwitkiem (sorki, ale promocji na czas robić nie mogę, ze względu na jego nieodzyskiwalne zasoby), postanowiłem na bazie doświadczenia zebranego przy wdrażaniach Omnibusa w sklepach (m.in) na WooCommerce przygotować kurs internetowy, tak, by zmienić droższą usługę w tańszy produkt.

Platforma kursowa na LearnPress i dwa różne podejścia do sprzedaży kursów za pośrednictwem WooCommerce

Od jakiegoś czasu najczęściej tworząc platformę kursową na WordPressie, wybieram wtyczkę Tutor LMS, a konkretnie Tutor LMS Pro. Po części zasługa w tym nieimitowanej w czasie i liczbie stron licencji, jaką posiadam, a po części tego, że pomimo swoich wad, jest całkiem dobra wtyczka do kursów internetowych, która dodatkowo chwalą sobie pod względem łatwości obsługi klienci. Jednak od czasu do czasu zapuka do mnie ktoś, kto ma już platformę kursową, czasem na innej wtyczce i potrzebuje „tylko” konsultacji, lub wdrożenia jakiejś dodatkowej funkcjonalności. Tym razem padło na wtyczkę LearnPress i zintegrowanie jej z WooCommerce.

Opinie w sklepie internetowym na WooCommerce zgodne z Omnibusem to coś więcej, niż „zweryfikowany właściciel”

Pakiet ustaw potocznie zwany Omnibus jest z nami już prawie od pół roku, ale to nie oznacza, że wszystko i u wszystkich wdrożone. W ostatnich dniach przeprowadzaliśmy konsultację sklepu internetowego, również od strony podstawowych wdrożeń związanych właśnie z Omnibusem. Jednym z elementów, który musieliśmy umieścić na liście zadań do zrobienia, był moduł odpowiedzialny za opinie. Niby funkcjonujący prawidłowo, ale właśnie – niby…

Modyfikacja zawartości zablokowanej paczki kursów w Tutor LMS, czyli jak dodać lub skasować kurs z paczki, do której są już przypisani kursanci (studenci, uczniowie)

Wraz z premierą wersji 2.2.0 wtyczki Tutor LMS pojawiła się opcja, pozwalającej na sprzedaż wielu kursów w ramach jednego produktu WooCommerce, czyli tworzenia paczek kursów sprzedawanych jako jeden produkt. Niedawno pojawiła się wersja 2.2.2 wtyczki, która przyniosła opcję ręcznego przypisywania użytkowników do paczek kursów. I choć jest to opcja dość świeża, to już miałem okazje odbyć kilka rozmów, nie tylko na temat jak z niej korzystać, ale jak obejść pewne blokady, które przy opcji „course bundle” w Tutor LMS funkcjonują.

Usuwanie lupki (zooma) i linku ze zdjęcia produktu na stronie produktu w sklepie internetowym na WooCommerce

Dziś na tapet bierzemy zdjęcie produktu w WooCommerce. Ale nie będziemy go wyrównywać w widoku archiwum. Zajmiemy się zdjęciem produktu na karcie produktu. Jednak nie będziemy go modyfikować np. dla produktów niedostępnych na stanie, a zajmiemy się jego powiększaniem. Od sterowania jego „intensywnością”, po całkowite wyłączenie. A na deser pozbędziemy się linku, który pod zdjęciem się w standardzie kryje.

Tutor LMS 2.2.0, czyli premiera opcji, pozwalającej na sprzedaż wielu kursów w ramach jednego produktu WooCommerce

Główną wtyczką, z której korzystam, do tworzenia platform kursowych na WordPressie od dawna jest Tutor LMS. Nie jest to wtyczka idealna, a wręcz często doprowadza mnie do… Ale też nie jest zła. Do tego mam nielimitowaną wersję „pro”, zarówno dla siebie, jak i swoich klientów, więc… Korzystam. Jedną z bolączek tek wtyczki jest była sprzedaż kursów w pakietach. Właściwie bez dodatkowych rozwiązań (pakiety produktów w WooCommerce) było to niemożliwe. Tak, nieprzypadkowo posługuję się tutaj czasem przeszłym, bo od wersji 2.2.0, która ukazała się dziś, jest to już możliwe.

Blokowanie dostępu do katalogu w OpenLiteSpeed, czyli alternatywa dla nieobsługiwanego „deny from all” w pliku .htaccess

Wczoraj napisał do mnie lekko zaskoczony kolega, który po wcześniejszej rozmowie ze mną postanowił na swoim VPSie przejść z Nginx a OpenLiteSpeed. Głównie ze względu na wygodę. I to nawet nie chodzi o to, że dużo ustawień (większość?) można zrobić z poziomu panelu zarządzania w przeglądarce internetowej, bo czasem to tylko wydłuża czas potrzebnym, do wykonania zadania. Zresztą skoro kolega używał Nginx, to co jak co, ale konfiguracja bezpośrednio w plikach konfiguracyjnych nie jest mu raczej obca. Bardziej chodziło o obsługę plików .htaccesss, dzięki czemu wiele aplikacji webowych (np. WordPress) potrafi nie tylko samodzielnie skonfigurować sobie środowisko, ale i zabezpieczyć odpowiednimi regułami w tym pliku to, co powinno być zabezpieczone.

W ramach usługi Divi Cloud pojawiła się możliwość zapisywania i wczytywania ustawień motywu Divi (Theme Option Presets)

W wielu projektach stron internetowych (w większości?) korzystam z bazowego zbioru rozwiązań, takich jak np. WordPress, konkretny zestaw wtyczek i odpowiedni motyw. Często tym motywem jest Divi od Elegant Themes. Nie jest to motyw idealny, ale wiem, jak działa, a do tego dość łatwo przekazać taką stronę pod zarządzanie – przynajmniej jeśli chodzi szeroko rozumiane „treści” – nawet „mniej technicznym” użytkownikom. Dlatego też staram się zautomatyzować co tylko się da – dodawanie domeny do serwera, aktywacja certyfikatu SSL (Let’s Encrypt), instalacja i bazowa konfiguracja WordPressa, wraz ze startowym zestawem wtyczek. Mógłbym do tego dodać jeszcze jakąś bazową bazę danych, z podstawową konfiguracją, ale jest z tym więcej problemów, niż potencjalnych zysków. Stąd wiele czynności konfiguracyjnych każdorazowo wykonuję „ręcznie”. Na szczęście dzięki ostatniej aktualizacji motywu Divi, z tej listy mogę skreślić podstawową konfigurację tego motywu.

Wyrównywanie wyglądu zdjęć produktów w widoku archiwum produktów w WooCommerce na przykładzie CSSa i object-fit

Ostatnio odbyłem kolejną rozmowę z cyklu „mamy 2023 i CSSem zrobisz wszystko, więc po co…”. Tym razem (znowu) poszło o nierówne miniatury zdjęć produktów w widoku archiwum WooCommerce (choć w widoku strony produktu też ten problem występuje, choć trudniej pokazać porównanie). Ja pomimo tego, że faktycznie mamy 2023, oraz faktycznie CSSem można zrobić cuda, nadal uważam, że jeśli tylko można, lepiej już na etapie przygotowania zdjęć zadbać nie tylko o ich rozmiar, ale i proporcje. Mój (kolejny) oponent pełen wiary w CSS w 2023 roku twierdził, że nie ma takiej potrzeby, bo mamy przecież object-fit…

Dodawanie niestandardowego kodu HTML i JavaScript do wybranych elementów strony za pomocą JavaScript, na przykładzie WordPressa

Dostałem zapytanie o umieszczenie formularza zapisu do newslettera w ramach usługi MailerLite na stronie internetowej działające na WordPressie. Niby nic nadzwyczajnego, ale tutaj miejsce, gdzie ów kod miał być umieszczony, było bardzo precyzyjnie wybrane i niekoniecznie łatwo dostępne do modyfikacji.

Zmiana wyglądu zdjęcia produktu, którego nie ma na stanie, na przykładzie sklepu internetowego na w WooCommerce

Niedawno wyrównywaliśmy wysokości wierszy w widoku katalogu produktów na przykładzie sklepu internetowego na WooCommerce, za pomocą CSSa. Dziś na tapet bierzemy główną grafikę produktu i stany magazynowe, a konkretnie zmodyfikujemy wygląd grafiki (zdjęcia) produktów, których nie ma na stanie. I choć przykład będzie na bazie sklepu internetowego na WooCommerce, to po dostosowaniu selektorów (nazw klas), bez problemu można pokazane kody wykorzystać na innych stronach. Niekoniecznie nawet sklepach internetowych…

Skuteczna blokada (rejestracji) fałszywych kont w WordPressie i WooCommerce za pomocą wbudowanych ustawień

W ostatnich dniach miałem sporo zapytań „z zewnątrz” na temat nowych rezerwacji na stronach z WordPressem i sklepach na WooCommerce, które w większości przypadków były (są) zakładane na nieistniejące adresy e-mail, często w domenie z końcówką „z krainy orków” (.ru), które są właściwie standardowym elementem internetu, ale w ostatnich dniach jakby się nasiliły. Potwierdzają to też statystyki z moich testowych WordPressów (honeypot), gdzie też widać dużo większą niż zwykle aktywność w tym zakresie…

Wyrównanie wysokości wierszy w widoku katalogu produktów na przykładzie sklepu internetowego na WooCommerce

Jednym z częstszych tematów, z jakimi zwracają się do mnie „osoby z zewnątrz” w kontekście WooCommerce, jest wyrównanie wysokości, na jakiej znajdują się przyciski „dodaj do koszyka” i „wybierz opcje” w widoku listy produktów, czyli archiwum, w przypadku, gdy produkty mają różnej długości tytuły. I choć jest to właściwie tylko kwestia wizualna, niemająca żadnego przełożenia na działanie sklepu, to rozumiem problem, bo sam też tak preferuję. I choć są to łatwe i szybkie pieniądze, do tego z łatwym do osiągnięcia efektem zadowolenia po stronie klienta, to zamykam ten „kran z pieniędzmi” i pokażę, jak taki efekt uzyskać samodzielnie. Do tego w bardzo prosty sposób, bo za pomocą odrobiny CSSa…

Zmiana kolejności wyświetlania kolumn w widoku mobilnym za pomocą CSSa na przykładzie WordPressa, WooCommerce i Divi

Trafiłem dziś na pytanie na temat zmiany kolejności wyświetlania paska bocznego (sidebar) i listy produktów w widoku archiwum WooCommerce (sklep internetowy na WordPressie) dla urządzeń mobilnych, gdzie w standardzie wyświetlają się najpierw produkty, a potem zawartość paska bocznego (widżety), niezależnie od tego, czy będzie on standardowo po lewej, czy prawej stronie. Co ma zresztą sens, bo nawet jeśli w bocznej sekcji – tak jak w tym przypadku było – są filtry produktów, to jednak produktami będą zainteresowani raczej wszyscy odwiedzający sklep, a filtrami tylko niektórzy.

Loading

Wesprzyj nas!

Postaw nam kawę!

Promocja własna

Jak (legalnie) latać dronem w Kategorii Otwartej

Promocja własna

Jak (legalnie) latać dronem w Kategorii Otwartej

Promocja własna

WordPress: Pierwsze kroki

Pin It on Pinterest