W poprzednim samouczku my przedstawiłeś Divi. Dla tych, którzy nie wiedzą, Divi to WordPress premia zaprojektowana przez zespół eleganckie tematy który oferuje różne usługi związane z WordPress oraz projektowanie wtyczek i motywów.

Divi to responsywny motyw, a ten ostatni jest kompatybilny z kilkoma innymi wtyczkami, między innymi, które mamy WooCommerce . Dziś pokażemy Ci, jak nadać inną animację Twoim produktom WooCommerce .

Czasem styl WooCommerce może być nieco nieodpowiedni, zwłaszcza jeśli Twój styl CSS jest nieco inny. Ten samouczek, który będzie trochę techniczny (trochę CSS i nic więcej), pozwoli Ci to naprawić.

Inne samouczki na temat Divi

Zacznijmy.

Jak dodać zdjęcie do produktu woocommerce

Modyfikowanie ikony tekstu za pomocą myszy

Domyślnie, gdy używasz WooCommerce z Divi i najedziesz kursorem na produkt, zobaczysz małą ikonę `` + '', która jest czcionką (make-ikona) zaproponowane przez Divi i które przedstawia się następująco:

Domyślna ikona woocommerce

Naprawdę łatwo jest to zmienić na inną ikonę w ustawieniach, ale jeśli chcesz dodać tekst, czy to inna rzecz? Pokażę Ci, jak to osiągnąć za pomocą dzisiejszych fragmentów kodu CSS, a także dołączę opcjonalny kod do dodania do Twojej witryny.

Oto, co raz ukończymy:

Efekt końcowy modyfikacji produktu Wordpress

Po co właściwie używać tekstu zamiast ikony?

Mogę wymyślić kilka powodów, które mogą cię do tego skłonić:

Aby zdefiniować, nadaj niepowtarzalny wygląd swojemu sklepowi: Wszystko, co możesz zrobić, aby odróżnić swoją witrynę Divi / WooCommerce od innej, jest zawsze dobrą rzeczą.

Użycie takich słów jak „Wyświetl” lub „Kup” może spowodować większą konwersję: Każdy musi zrobić to, co najlepsze dla swojej witryny, i możesz skorzystać ze zintegrowanych testów A / B na Divi, aby Ci w tym pomóc.

Źródło inspiracji

Niedawno przeglądałem witrynę, która zawierała tekst o najechaniu na produkt. Oczywiście widziałem inne witryny e-commerce, które mają słowa zamiast ikon na produkcie, więc nie był to nowy pomysł. Nigdy nie musiałem tego robić na Motyw Divi, a kiedy to zobaczyłem, postawiłem sobie wyzwanie i zdałem sobie sprawę, że rzeczywiście jest to łatwe do zrealizowania. Przy bardzo małej ilości wymaganego kodu na pewno nie wpłyniesz na wydajność swojego bloga.

Przykładowa witryna

Implementowanie myszy nad tekstem

Krok 1: nakładka koloru

Najpierw zmienimy kolor nakładki po najechaniu kursorem. Jest to niezwykle łatwe w Divi. W module Twojego sklepu Przejdź do „ zaawansowane zaawansowane parametry projektowe I wybierz swój kolor.

Wybór kolorów divi

Krok 2: Dodawanie CSS

Poniższy kod CSS w „ Opcje motywu> Niestandardowy CSS Lub na arkuszu stylów motywu podrzędnego.

.woocommerce .et_overlay: before {left: 0; margines lewy: 0; content: „view”; / *** Twój tekst tutaj *** / font-family: 'Source Without Pro', Arial! / *** Wybierz czcionkę *** / text-transform: wielkie litery; rozmiar czcionki: 24px; kolor: #fff; / *** Ustaw kolor tekstu *** / font-weight: pogrubiony; wyrównanie tekstu: środek; szerokość: 100%; wypełnienie: 5px 0; }

Jeśli chcesz, aby Twoje produkty były raczej okrągłe, możesz dodać ten opcjonalny kod:

.woocommerce ul.products li.product a img, .and_overlay {border-radius: 50%; }

To wszystko!

Teraz możesz odwiedzić swój sklep i zobaczyć, jak uwzględniane są zmiany.

[vc_row center_row = "tak"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] POBIERZ TEMAT DIVI [/ vcex_button] [/ vc_column] »vc_column] =» vc_column] 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expand" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] POBIERZ SZABLONY DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Inne samouczki Divi