Jak dodać tekst do produktu WooCommerce w Divi

W poprzednim samouczku my przedstawiłeś Divi, Dla tych, którzy nie wiedzą, Divi to motyw WordPress premium zaprojektowany 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, który jest kompatybilny z kilkoma innymi wtyczkami, między innymi z WooCommerce. Dziś pokażemy Ci, jak nadać innej animacji produktom WooCommerce.

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

Inne samouczki na temat Divi

• strony internetowe 5 dotyczące stosowania restauracja Divi tematu
• Jak dodać tekst do produktu WooCommerce na Divi
• Jak zmienić kolor menu między stronami Divi
• Funkcje, których nie znasz na temat Divi
• Jak utworzyć suwak na Divi
• Jak edytować rolę użytkownika w Divi

Zacznijmy.

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:

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:

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 produkcie Hover. Oczywiście widziałem to w innych witrynach e-commerce, które mają słowa, a nie ikony na wiszącym produkcie, więc nie była to nowa koncepcja. Nigdy nie musiałem tego robić w temacie Divi, a kiedy to zobaczyłem, postawiłem sobie wyzwanie i zdałem sobie sprawę, że naprawdę łatwo jest to wdrożyć. Mając bardzo mało wymaganego kodu, z pewnością nie wpłyniesz na wydajność swojego bloga.

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.

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.

Inne samouczki Divi

• strony internetowe 5 dotyczące stosowania restauracja Divi tematu
• Jak dodać tekst do produktu Divi WooCommerce
• Jak zmienić kolor menu między stronami Divi
• Jak spersonalizować siatki bloga za pomocą Divi
• Jak korzystać z roli Divi edytor na WordPressie
• Jak utworzyć pełnoekranowy suwak Divi
• Jak zmienić kolor menu między stronami Divi
• Funkcje, których prawdopodobnie nie wiesz o Divi
• Jak korzystać z Divi Builder na WordPress
• Jak korzystać z modułu przewijania wideo Divi
• Jak korzystać z modułu Divi Builder Flip
• Jak dodać moduł referencji w Divi Builder
• Jak korzystać z modułu tekstowego Divi
• Jak utworzyć suwak na Divi
• Jak edytować rolę użytkownika Divi
• Jak korzystać z modułu Divi Social Media
• Jak korzystać z modułu sklepu na temat WordPress Divi
• Jak korzystać z modułu paska bocznego Divi
• Jak korzystać z modułu tabeli cen Divi
• Jak korzystać z modułu tytułowego publikacji Divi
• Jak dodać moduł wideo Divi
• Jak korzystać z modułu nawigacji artykułów
• Jak korzystać z modułu wyszukiwania Divi
• Jak korzystać z modułu portfela Divi
• Jak korzystać z modułu person w Divi Builder
• Jak korzystać z modułu portfela z filtrem Divi
• Jak korzystać z modułu suwaka o pełnej szerokości
• Jak korzystać z modułu obrazu Divi Builder
• Jak korzystać z modułu nawigacji pełnej szerokości Divi Builder
• Jak korzystać z modułu galerii obrazów
• Jak korzystać z pełnego modułu karty Divi Builder
• Jak korzystać z modułu portfela o pełnej szerokości Divi
• Jak korzystać z modułu nagłówka Divi o pełnej szerokości
• Jak korzystać z modułu licznika Divi
• Jak korzystać z suwaka artykułów w Divi Builder
• Jak korzystać z modułu Divi Email Optin