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 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 myszką na produkt, zobaczysz małą ikonę „+”, która jest czcionką (make-ikona) zaproponowane przez Divi i które przedstawia się następująco:

Naprawdę łatwo to zmienić dla innej ikony w ustawieniach, ale jeśli chcesz dodać tekst, to inna sprawa? Pokażę Ci, jak to osiągnąć dzięki dzisiejszym fragmentom CSS, a także dołączę opcjonalny kod, który można dodać do Twojej witryny.

Oto, co raz ukończymy:

Po co w ogóle 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, zawsze jest dobrą rzeczą.

Użycie słowa „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ę z tekstem o najechaniu na produkt. Oczywiście widziałem inne witryny e-commerce, w których na ikonie produktu widnieją słowa, a nie ikony, więc nie była to nowa koncepcja. Nigdy nie musiałem tego robić na temat Divi, a kiedy to zobaczyłem, stanąłem przed wyzwaniem i zdałem sobie sprawę, że naprawdę łatwo to zrealizować. Ponieważ kod jest bardzo mało potrzebny, na pewno nie wpłyniesz na wydajność swojego bloga.

Implementowanie myszy nad tekstem

Krok 1: nakładka koloru

Najpierw zmienimy kolor stacjonarnej nakładki nakładki. Jest to niezwykle łatwe w Divi. W module sklepu Przejdź do zakładki « 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