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 600.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 to naprawić.

Inne samouczki na temat 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:

Ł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]

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:

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]

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.

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

Twój adres e-mail nie zostanie 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