Dodawanie pliku PDF do pobrania w produkcie WooCommerce

Dzisiejszy artykuł poświęcimy na rozbudowanie funkcjonalności produktów, na sklepie internetowym WooCommerce. Z mojego doświadczenia wynika, że bardzo często produkty, które sprzedają sprzedawcy w sklepach internetowych wymagają dokumentacji technicznych, a te są najczęściej w plikach PDF. I teraz tak, jak przekazać taką dokumentację z danymi technicznymi klientowi jeszcze przed zakupem?

Na pewno można dodać taki plik do biblioteki mediów i wstawić w opisie produktu. No tak, tylko że taki link może być słabo widoczny – to po raz. A po dwa, nie jest to do końca profesjonalne rozwiązanie. Dlatego w tym artykule przetestujemy sobie dwa proste rozwiązania techniczne, które pozwolą zainteresowanym klientom na pobieranie udostępnionych przez nas dokumentacji.

Założenia i określenie potrzeb

Powyżej wstępnie sobie nakreśliliśmy temat, jednak co dokładnie należałoby wykonać? Osobiście widziałbym na karcie produktu przycisk, duży, zwracający na siebie uwagę, pod którym będzie znajdować się plik PDF do pobrania. Wykonanie tego założenia, będzie również po części uzależnione od szablonu, który posiadamy na naszym sklepie internetowym.

Dla osób, które nie chcą edytować szablonu, zaproponujemy szybką i prostą wersję rozwiązania tematu. Aczkolwiek również przetestujemy opcję troszkę bardziej rozbudowaną, wymagającą edycji szablonu karty produktu, ale umożliwiającej zdecydowanie więcej.

Rozwiązanie nr 1 – moduł “Product Attachment for WooCommerce”

Opcja numer jeden na pewno spodoba się zdecydowanej większości osób, szukających prostego sposobu na udostępnienie plików dla klientów. Rozwiązanie to  nie wymaga edycji szablonu, co na pewno przyspieszy kwestie związane z poświeceniem czasu na tą zmianę.

Przechodząc do meritum, po zalogowaniu się do panelu administracyjnego WordPress’a, wchodzimy do sekcji Wtyczki > Dodaj nową. Po przeładowaniu się serwisu, wyszukujemy moduł o nazwie “Product Attachment for WooCommerce”. Instalacja nie powinna sprawiać problemów, moduł po włączeniu uruchomi samouczek, z którym jak najbardziej można się zapoznać.

W kolejnym kroku przechodzimy do ustawień i dokonujemy potrzebnych zmian:

W moim przypadku dokonałem jedynie kosmetyki, czyli aby po kliknięciu w przycisk – plik został wyświetlony w nowej zakładce, a nie pobrany bezpośrednio na komputer klienta. Jeżeli będzie osoba zainteresowana produktem pobrać taką dokumentację, będzie miała taką możliwość przy wyświetleniu dokumentacji w nowym oknie.

Następnie przechodzimy do edycji już konkretnego produktu, w którym nazywamy oraz wgrywamy plik PDF

Po uzupełnieniu wszystkich pól, zapisujemy edycje produktu i przechodzimy na jego podstronę – w celu przetestowania dodanej funkcjonalności. Powinna dojść nam kolejna zakładka w kartach produktu, w której klient będzie mógł w prosty sposób pobrać i zapoznać się z dokumentacją techniczną.

Rozwiązanie nr 2 – moduł “Advanced Custom Fields (ACF)”

Drugie rozwiązanie to narzędzie, o którym mówiliśmy już kiedyś w tym artykule: https://www.s90.pl/wlasne-pola-w-wordpress-przy-uzyciu-advanced-custom-fields/

Moduł Advanced Custom Fields, pozwala na dodanie dodatkowych pól, grafik, galerii, przycisków do naszych wpisów, stron, produktów czy projektów – generalnie tam gdzie potrzebujemy posiadać więcej niż standardowe pola. Dziś wykorzystamy ten moduł, do stworzenia linku pobierania, a przycisk stworzymy w posiadanym przez nas szablonie.

Także w pierwszej kolejności instalujemy moduł, o ile jeszcze nie go macie w swojej „kolekcji”. Po instalacji w panelu administratora, w lewej belce odszukujemy pozycję „ACF” i tworzymy nową grupę pól:

I uzupełniamy w poniższy sposób:

Co ważne? Aby w rodzaju pola wybrać „Plik” oraz w zwracanej wartości ustawić „Adres URL pliku”, natomiast etykietę ustawiamy według potrzeb.

Przewijamy kartę ustawień jeszcze niżej, aż dojdziemy do reguł lokalizacji,  tutaj musimy ustawić sekcję produktów:

Zapisujemy ustawienia i jesteśmy prawie już „w domu”. Co do tej pory osiągnęliśmy? Mamy stworzoną funkcjonalność wgrywania pliku do pobrania w każdym produkcie z osobna. Pozostało jedynie przygotować przycisk w szablonie karty produktu.

W moim przypadku korzystam z szablonu Divi, jednak w innych page builder’ach powinna być analogiczna sytuacja.

Także po przejściu do edytora karty produktu, wybieramy z dostępnych widget’ów przycisk, określamy jego wygląd wizualny oraz w linku podajemy shortcode naszego pola stworzonego w ACF – informace o shortcode’ach znajdziemy pod adresem: https://www.advancedcustomfields.com/resources/shortcode/

W przypadku szablonu Divi, ten współpracuje dość ściśle z modułem ACF, dlatego nie musimy podawać shortcode, a jedynie wybrać dodatkowe pole z listy:

I mamy to 🙂 Która wersja wam bardziej odpowiada? Pierwszy moduł prostu i łatwo dodaje możliwość pobierania plików, za to drugi – również to zrobi, oraz dużo więcej innych rzeczy.

Podsumowanie

Przetestowałem w tym artykule dwa rozwiązania: moduł “Product Attachment for WooCommerce” i “Advanced Custom Fields (ACF)”. Pierwsze z nich jest idealne dla osób poszukujących szybkiego i prostego sposobu na udostępnienie plików bez edycji szablonu, natomiast ACF oferuje większą elastyczność i możliwości dostosowania, choć wymaga nieco więcej pracy, w tym edycji szablonu karty produktu. Oba te rozwiązania znacznie ułatwiają przekazanie wartościowych informacji technicznych klientom, podnosząc profesjonalizm sklepu.

Jeżeli macie inne pytania odnośnie tworzenia stron internetowych, administracji stron internetowych lub pozycjonowaniem stron śmiało piszcie do nas.