Przejdź do głównej treści

Jak dodać tekst do produktu WooCommerce w Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 701.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

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

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:

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

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ć:

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

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.

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.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

.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

Ten artykuł zawiera komentarze 5

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
10 akcji
udział6
ćwierkanie
Enregistrer4