Przycisk dodaj do koszyka na sklepie w motywie Divi (i nie tylko)

Divi to motyw, który albo się kocha, albo się nienawidzi. Na wiele pozwala – szczególnie teraz, gdy wprowadzono do niego konstruktor, dzięki któremu można sobie stworzyć np. własny nagłówek czy stopkę, ale też miejscami mega irytuje i wkurza. Jednym z takich miejsc jest standardowa strona sklepowa, gdzie wielu osobom brakuje przycisku “dodaj do koszyka”. Ale wiecie co? Jest sposób na to by go dodać! Wystarczy kawałek kodu. Gotowi na zabawę w to co kocham najbardziej?

Wiem, że grzebanie w kodzie nie każdy musi kochać jak ja, ale to naprawdę nie jest takie straszne! Tym bardziej, że podaję Wam gotowy kod do wrzucenia iiiii nawet załączam poniżej wideo, gdzie to dokładnie wrzucić, więc z pewnością dacie radę.

Jak dodać przycisk dodaj do koszyka na sklepie?

Sposób, który podam zadziała nie tylko w motywie Divi, ale również w innych motywach, więc jeśli korzystacie z czegoś innego, gdzie również brakuje Wam przycisku “dodaj do koszyka” na stronie sklepu to śmiało korzystajcie. Warunek – sklep musi być oparty o WooCommerce : ) Dobra – lecimy z koksem.

Po pierwsze – trzeba mieć motyw potomny. Nigdy nie robimy zmian “w kodzie” motywu głównego, bo przy jego aktualizacji (zakładam, że je robicie, bo robić je trzeba) wszystko co tam sobie dopisaliśmy zniknie. Jeśli nie macie jeszcze motywu potomnego i nie wiecie jak go zrobić zerknijcie tutaj.

Po drugie – potrzebujemy dostępu do FTP i klienta FTP, dzięki któremu dostaniemy się do plików naszego motywu. Nie polecam edytować plików motywu przez panel WordPress, ani przez wtyczki typu File Manager. Jeśli nie wiecie co do FTP i jak znaleźć dane zerknijcie o tutaj.

Po trzecie – magiczny kod dodając przycisk, czyli coś takiego

function przyciskdivi_add_cart_button () {
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 10 );
}
add_action( 'after_setup_theme', 'przyciskdivi_add_cart_button' );

Gdzie go wkleić?

Logujemy się na konto FTP, wybieramy folder, gdzie podpięta jest nasza domena, następnie wchodzimy w folder wp-content, potem w kolejny themes i w nim szukamy tego z naszym motywiem potomny. No i już zostaje tylko jeden krok. Jaki?

Otwieramy plik functions.php i wklejamy tam na końcu magiczny kod dodawania przycisku. Zapisujemy. Odświeżamy stronę iiii voila jest przycisk. Jeśli go nie ma, koniecznie sprawdź czy masz aktywny właśnie ten motyw potomny, w którym dodajesz kod i czy kod jest poprawnie wrzucony. Jeżeli nadal coś nie działa zapraszam na grupę FB – Zostań specką – poszukamy wspólnie rozwiązania.

Wolisz w formie wideo? Nie ma problemu – poniżej zamieszczam krótki filmik jak ogarnąć dodawanie przycisku ładującego produkt do koszyka właśnie na przykładzie motywu Divi. Powodzenia!

Subscribe
Powiadom o
guest
6 komentarzy
najstarszy
najnowszy oceniany
Inline Feedbacks
View all comments
Karolina
Karolina
3 lat temu

a jak ostylować ten przycisk?

Jurek
Jurek
Reply to  Sylwia
1 rok temu

Hej, dzięki bardzo:) masz może jakiś kawałek kodu css dla przykładowego ostylowania, który będzie potem można sobie zedytować dla siebie?

Paweł
Paweł
6 miesięcy temu

Witam serdecznie Pani Sylwio, mam mały kłopot z dostosowaniem przycisku „dodaj do koszyka”, po wklejeniu w functions.php linkijki
„add_action( 'woocommerce_after_shop_loop_item’, 'woocommerce_template_loop_add_to_cart’, 20 );

przycisk u mnie wygląda następująco (jak na zdjeciu” chciałbym natomiast aby był on na całej szerokości produktu czy to na urządzeniu mobilnym czy na desktopie. Oczywiście jak mogłaby Pani pomóc jakimś kodem css w zamian za wynagrodzenie jak najbardziej się na to piszę! Dziękuje i pozdrawiam!

Zrzut ekranu 2023-09-09 164832.png