Jak dodać przycisk Dodaj do koszyka na stronach sklepu Divi

Czy korzystasz z Divi i chcesz dostosować strony swojego sklepu? W tym samouczku dowiesz się, jak umieścić przycisk Dodaj do koszyka na stronach sklepu Divi.

Jeśli planujesz założyć sklep internetowy, WooCommerce to najłatwiejszy i najszybszy sposób na zrobienie tego. Nawet jeśli nie jesteś programistą, niektóre doskonałe motywy WooCommerce mogą pomóc Ci rozpocząć i ulepszyć funkcje Twojego sklepu. Jedną z najlepszych dostępnych opcji jest Divi.

Po co umieszczać przycisk Dodaj do koszyka na stronach sklepu?

Motyw Divi to jedna z najpopularniejszych opcji dla sklepów WooCommerce. To bardzo elastyczny motyw, który zawiera wiele zaawansowanych funkcji. Jednak jedną wadą jest to, że produkty na stronach sklepu nie mają przycisku Dodaj do koszyka. To dodaje krok w ścieżce zakupu i może wpływać na konwersje. Dobra wiadomość jest taka, że ​​istnieje sposób, aby to naprawić.

W tym przewodniku pokażemy, jak łatwo dodać przycisk Dodaj do koszyka na stronach sklepu Divi .

Jak dodać przycisk Dodaj do koszyka w Divi?

Tutaj pokażemy Ci najprostsze i najskuteczniejsze sposoby włączenia przycisku Dodaj do koszyka w Divi. Mimo że wprowadzimy pewne zmiany w podstawowych plikach motywu, metody te są bardzo łatwe do naśladowania nawet dla początkujących.

Główne dwie metody dodania przycisku Dodaj do koszyka na stronach sklepu to:

1. Modyfikowanie pliku functions.php
2. Korzystanie z wtyczki Fragmenty kodu

Obie metody są przyjazne dla początkujących i pozwolą szybko dodać przycisk Dodaj do koszyka.

Zanim zaczniemy

Zanim zaczniemy, polecamy:

• Wygeneruj pełną kopię zapasową na wypadek, gdyby coś poszło nie tak.
• Utwórz motyw podrzędny: nie zalecamy bezpośredniego modyfikowania plików motywu. Zamiast tego możesz utworzyć motyw podrzędny i wprowadzić w nim zmiany. Można to zrobić na różne sposoby. W tym samouczku użyjemy wtyczki.

1) Dołącz przycisk Dodaj do koszyka z functions.php

Utwórz motyw potomny

Zanim dodamy przycisk Dodaj do koszyka w Divi, musisz utworzyć motyw podrzędny. W tym celu użyjemy darmowej wtyczki WordPress o nazwie Child Themify. Więc najpierw musisz zainstalować Child Themify na swojej stronie.

Następnie aktywuj go.

Następnie zobaczysz ustawienia wtyczki w sekcji Wygląd .

Z menu musisz wybrać motyw nadrzędny. W naszym przypadku stworzymy motyw potomny dla Divi. Następnie nazwij swój nowy motyw potomny.

Istnieje również kilka zaawansowanych opcji, ale nie musisz ich do tego używać.

Po wybraniu motywu nadrzędnego i nazwaniu motywu potomnego, naciśnij przycisk Utwórz motyw potomny.

Następnie przejdź do sekcji Wygląd > Motywy , a zobaczysz nowy motyw potomny. Aktywuj to.

Teraz sprawdź stronę swojego sklepu. W naszym przypadku stworzyliśmy sklep demonstracyjny z przykładowych produktów.

Jak widać na powyższym zrzucie ekranu, nie ma przycisku Dodaj do koszyka. Tak więc, gdy użytkownik chce dodać produkt do koszyka, nie może tego zrobić bezpośrednio ze strony sklepu. Zamiast tego muszą przejść do określonych stron produktów i stamtąd dodać produkty do koszyka.

Dobrą wiadomością jest to, że istnieje łatwy sposób na umieszczenie przycisku Dodaj do koszyka na stronie sklepu. Aby to zrobić, musisz dodać kilka wierszy kodu do motywu potomnego.

Zmień plik functions.php

Aby umieścić przycisk Dodaj do koszyka na stronie sklepu w Divi, przejdź do edytora motywów i wybierz plik functions.php . Skopiuj poniższy kod i wklej go do pliku functions.php .

 // Ten kod dodaje przyciski „Dodaj do koszyka” do strony wyświetlającej pętlę sklepu
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

Po wklejeniu kodu kliknij Aktualizuj plik . A jeśli sprawdzisz frontend strony sklepu, zobaczysz zmiany.

Dodałeś przyciski Dodaj do koszyka do strony sklepu !

2) Wtyczka fragmentów kodu

Alternatywnie, zamiast aktualizować plik functions.php , możesz dołączyć przycisk Dodaj do koszyka w Divi za pomocą wtyczki. Z naszego doświadczenia z WordPressem i dostosowywaniem, Code Snippets jest jednym z najlepszych narzędzi do tego zadania.

Przede wszystkim musisz zainstalować i aktywować wtyczkę Code Snippets na swojej stronie.

Następnie musisz dodać nowy fragment kodu do swojej witryny.

Po prostu nazwij swój fragment w celu identyfikacji, skopiuj poniższy kod i wklej go w polu Kod.

 // Ten kod będzie zawierał przyciski „Dodaj do koszyka” na stronie wyświetlającej pętlę sklepu
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

Następnie zapisz i aktywuj fragment kodu.

Po raz kolejny zobaczysz przyciski Dodaj do koszyka na swojej stronie sklepu.

Jak widać, obie metody są bardzo proste i skuteczne. Jeśli jesteś początkującym, zalecamy korzystanie z fragmentów kodu. Jest to darmowe narzędzie, które pozwala łatwo modyfikować podstawowe pliki i nie zepsuje Twojej witryny.

Jak dostosować przycisk Dodaj do koszyka?

Teraz, po pomyślnym umieszczeniu przycisku Dodaj do koszyka na stronach sklepu Divi, musisz dostosować przycisk.

Aby to zrobić, musisz określić niestandardową klasę CSS dla swojego przycisku. Wystarczy prosty kod PHP. Następnie możesz dodać trochę CSS i dostosować przycisk.

Aby to zrobić, wklej poniższy kod PHP w sekcji Fragmenty kodu jako nowy.

 add_action( 'woocommerce_after_shop_loop_item', 'quadlayers_woocommerce_template_loop_add_to_cart', 10 );
add_action( 'woocommerce_after_shop_loop_item_title', 'quadlayers_woocommerce_template_loop_add_to_cart', 10 );

funkcja quadlayers_woocommerce_template_loop_add_to_cart(){
   woocommerce_template_loop_add_to_cart(array('class'=>'button product_type_simple add_to_cart_button ajax_add_to_cart my_class_here')); 
}

Następnie możesz użyć CSS, aby zmodyfikować przycisk. W tym kodzie wspomnieliśmy o domyślnych klasach CSS przycisku, takich jak: button product_type_simple add_to_cart_button ajax_add_to_cart . Dodatkowo możesz dodać niestandardową klasę CSS, zastępując my_class_here .

Gdy dołączasz dodatkowy kod CSS do swojego motywu, możesz użyć czegoś takiego: .my_class { option:value !important; } .my_class { option:value !important; } . Upewnij się, że my_class swoją klasą CSS.

Na przykład możesz użyć takiego kodu CSS:

 .woocommerce-LoopLink do produktu + {
    /* Twój niestandardowy CSS tutaj */
}

Motyw Divi jest dostarczany z niestandardowym edytorem CSS i możesz tam wkleić cały kod CSS. Z drugiej strony możesz skorzystać z dodatkowej sekcji CSS za pośrednictwem swojego dostosowywania WordPress. Zalecamy korzystanie z narzędzia Customizer, ponieważ pozwala on zobaczyć, co robisz w czasie rzeczywistym.

Wniosek

W ten sposób możesz łatwo dodać przycisk Dodaj do koszyka na stronach sklepu Divi. W ten sposób możesz usprawnić proces zakupu, zapewnić klientom lepsze wrażenia i zwiększyć konwersje. Dodatkowo pomoże Ci zmniejszyć porzucanie koszyka w Twoim sklepie.

Inną ciekawą opcją zwiększenia konwersji w Twoim sklepie jest umieszczenie w nim bezpośrednich linków do kasy. W ten sposób skracasz proces zakupu i zmniejszasz szanse, że użytkownicy zrezygnują. Aby uzyskać więcej informacji na ten temat, zapoznaj się z naszym przewodnikiem, jak tworzyć bezpośrednie linki do kasy WooCommerce.

Dodatkowo, jeśli chcesz dostosować swój sklep, zalecamy zapoznanie się z następującymi samouczkami:

• Jak dostosować stronę sklepu WooCommerce?
• Dodaj do koszyka działa programowo w WooCommerce
• Jak zaimplementować przycisk Dodaj do koszyka AJAX w WooCommerce?
• Jak dostosować stronę kasy WooCommerce?

Na koniec, aby w pełni wykorzystać motyw Divi, możesz zapoznać się z naszymi przewodnikami:

• Jak ukryć i usunąć stopkę w Divi?
• Formularz kontaktowy Divi nie działa? Oto jak to naprawić!

Jeśli uważasz, że ten artykuł był pomocny, rozważ udostępnienie tego posta znajomym w mediach społecznościowych. Pomoże to innym dostosować strony sklepu Divi.

Aby uzyskać więcej informacji o tym, jak poprawić konwersje, sprawdź najlepsze wtyczki szybkiego zakupu WooCommerce.