Jedną z opcji, bez której Woocommerce stałby się bezużyteczny jest opcja dodawania produktu do koszyka. Jeśli pracujemy na szablonie przystosowanym do Woocommerce to automatycznie otrzymujemy stronę produktu, a tam przycisk dodaj do koszyka. Wystarczy wpisać cenę oraz opis produktu, a szablon auytomatycznie wyświetli nam odpowiedni przycisk.
W przypadku gdy chcemy dodać niestandardowy przycisk “dodaj do koszyka” np. gdzieś na stronie statycznej lub we wpisie możemy posłużyć się shorcodami, które przygotowali dla nas twórcy Woo. Pełną listę shortcodów znajdziemy tutaj.
Tak więc chcąc dodać przycisk dodaj do koszyka na stronie posłużymy się shortcodem [product id=” 99″] Jednak w przypadku takiego rozwiązania jesteśmy zdani na wyświetlenie tego co oferuje nam szablon. Jednym słowem otrzymujemy przycisk “dodaj do koszyka” taki jaki mamy ustawiony w stylach css szablonu. Mniej więcej będzie wyglądać to tak :
Bardzo często w przypadku zastosowania takiego rozwiązania otrzymujemy oprócz przycisku również cenę, tytuł oraz zdjęcie produktu. Nie możemy ustawić indywidualnie koloru przycisku, usunąć ceny lub pozbyć się zdjęcia.
Jednak co zrobić w przypadku gdy chcemy utworzyć własny przycisk “dodaj do koszyka” na każdej stronie inny ? Lub jeśli chcemy by zdjęcie było przyciskiem ?
W takim przypadku należy utworzyć własny adres URL. Na początek przejdź do zakładki produkty gdzie widzisz listę wszystkich Twoich produktów w sklepie. Pod tytułem produktu z lewej strony zobaczysz numer ID produktu. Zapamiętaj ten numer.
W tym wypadku numer 8636 to właśnie identyfikator produktu.
Teraz pora na stworzenie niestandardowego adresu URL, który będzie odpowiedzialny za dodanie do koszyka właśnie tego produktu. Adres tworzymy formułą ?add-to-cart=. Po znaku równości oczywiście wpisujemy numer ID produktu czyli w naszym przypadku pełna formułą to ?add-to-cart=8636.
Taką formułę możemy teraz podlinkować pod dowolny przycisk, zdjęcie tekst. Nie musimy poprzedzać ją przedrostkiem http czy też adresem naszej strony. Wystarczy sama formuła. Umożliwia nam to zastosowane własnego przycisku, który sobie stworzyliśmy czy to w stylach css czy też w formie graficznej.
Metoda powyżej znajduje zastosowanie dla prostego produktu bez wariantów. Co w przypadku gdy posiadamy produkty z wariantami i atrybutami ? Musimy do formuły dopisać numer ID wybranego wariantu oraz atrybut. Numer ID wariantu znajdziemy przechodząc w edycję produktu, a następnie w zakładkę warianty.
W tym wypadku mamy numer Id wariantu 3755. Dopisujemy więc wariant do adresu formuły: ?add-to-cart=8636&variation_id=3755
Jeśli chcemy jeszcze do tego dodać atrybuty to musimy przejść w zakładkę atrybuty danego produkty i spisać ich nazwę. W naszym przypadku mamy atrybut o nazwie kolor, zielony czyli &attribute_kolor=zielony.
Powstanie taka formuła, którą dodajemy do naszego całego linku ?add-to-cart=8636&variation_id=3755&attribute_kolor=zielony.
