Brak produktu w magazynie? – wyświetlenie wiadomości na stronie katalogu

Dziś pokażę Ci rozwiązanie problemu, z którym spotkałem się podczas tworzenia sklepu internetowego. Chodzi o wyświetlanie wiadomości „Brak produktu w magazynie” dla odpowiedniego produktu na stronie katalogu. Część motywów robi to automatycznie. Poradnik będzie pomocny dla pozostałych motywów.

Kilka miesięcy temu pisałem na temat sortowania listy produktów brakujących w magazynie. Pokazywałem rozwiązanie, dzięki któremu produkty ze statusem „Brak produktu w magazynie” były wyświetlane po produktach, które są „Na stanie”. W tamtym przypadku zastosowałem motyw Storefront. Dodawał on automatycznie etykietę informującą o braku produktu, gdy produkt był niedostępny.

Przy użyciu WordPressowego motywu Twenty Sixteen taka wiadomość nie pojawia się. Jedyna opcja by dowiedzieć się, że produkt jest niedostępny, to przejście do strony produktu. Nie jest to ani wygodne, ani intuicyjne dla użytkownika. Dlatego pokażę, jak rozwiązać ten problem i dodać wiadomość „Brak produktu w magazynie” do produktów, które są niedostępne.

Przygotowałem 2 warianty dla wyświetlenia odpowiedniej wiadomości.

„Brak produktu w magazynie” pod zdjęciem produktu

Na początek przejdźmy do pliku functions.php motywu Twenty Sixteen, którego w tym przypadku używam domyślnie. W tym celu skorzystamy z Edytora dostępnego w sekcji Wygląd:

Na końcu tego pliku wstawiamy następujący fragment kodu:

Dla klasy soldout dodamy styl wyświetlania. Otwórzmy plik style.css za pomocą edytora WordPress. Na końcu arkuszu stylów dodajmy kod:

span.soldout {
padding: 3px 7px;
background: #7b1616;
color: white;
font-size: 13px;
}

Po zapisywaniu zmian możemy odświeżyć stronę sklepu:

Jak widać na zrzucie ekranu, poniżej rysunku na bordowym tle pojawiła się wiadomość informująca o braku czapki w magazynie. Możesz pokombinować nad położeniem tej wiadomości.

„Brak produktu w magazynie” po cenie

Pokażę Ci jeszcze jedno możliwe rozwiązanie dla podanego problemu. Wyświetlimy wiadomość o braku produktu zaraz po cenie. W tym celu w pliku functions.php zastąpimy poprzedni kod następującym:

Po zapisywaniu zmian otrzymamy następny rezultat:

Jak widać na zrzucie ekranu, wszystko działa poprawnie. Wiadomość „Brak w magazynie” jest wyświetlana w nawiasach obok ceny.

Podsumowanie

Motyw dla WordPress nie zawsze jest kompatybilny z WooCommerce oraz często nie posiada kluczowych opcji związanych z wyświetlaniem produktów.

Jeśli planujesz uruchomić sklep internetowy na działającej stronie WordPress, jest duża szansa spotkania się z problemem przedstawionym w artykule.

Jak widzisz, w takim przypadku konieczne jest samodzielne edytowanie motywu i dopasowanie go do własnych potrzeb. Takie zmiany nie tylko wymagają odpowiedniej umiejętności, lecz także wymagają trochę czasu.

Warto się zastanowić nad wadami rozbudowy dotychczasowej strony o sklep na motywie WordPressowym. Być może warto zrealizować stronę od nowa na motywie w pełni kompatybilnym z WooCommerce?

Podziel się własnym doświadczeniem na ten temat w komentarzach.