Aby zmienić kolor przycisków WooCommerce, musimy zmienić lub zamienić domyślny plik style.css przycisków. Aby to zrobić, będziemy musieli dodać plik niestandardowy kod CSS do naszego motyw WordPress dziecka.
Można to zrobić na dwa sposoby:
- Dodaj niestandardowy CSS do pliku motywu potomnego style.css
- Użyj wtyczek, aby wstrzyknąć niestandardowy kod CSS na swoje strony internetowe.
Krok 1: Zainstaluj wtyczkę Simple Custom CSS w programie WordPress i włącz ją
Użyjemy a WordPress Plugin wstrzyknąć kod CSS do stron A Sklep internetowy WooCommerce, Możesz pobrać wtyczkę: Proste niestandardowe CSS
Możesz przeczytać nasz samouczek na instalacja i aktywacja wtyczki WordPress.
Po aktywacji wtyczki do menu zostanie dodane nowe podmenu apparence :
Dostęp do tej sekcji powoduje przejście do interfejsu z polem tekstowym, w którym można wprowadzić niestandardowy kod CSS.
Umieść następujący CSS w polu tekstowym, a następnie kliknij „ Zaktualizuj niestandardowy CSS”.
.woocommerce #content input.button.alt: hover, .woocommerce #respond wejście # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button. alt: hover, .woocommerce-stronicowy #content input.button.alt: hover, .woocommerce-input #respond # submit.alt: hover, .woocommerce-stronicowy a.button.alt: hover, przycisk .woocommerce-PAGE. button.alt: hover, .woocommerce-stronicowy input.button.alt: hover {background: red znacząca; background-color: red ważne; ! Kolor: biały ważne; text-shadow: przejrzyste ważne; box-shadow: none; border-color: #ca0606 ważne; } .woocommerce #content Input.button: hover, .woocommerce #respond wejściowe # przedłożyć: hover, .woocommerce a.button: hover, .woocommerce button.button: hover, .woocommerce input.button: hover, .woocommerce-stronicowy # szczęśliwy input.button: hover, .woocommerce-input #respond # przedłożyć: hover, .woocommerce stron a.button: hover, .woocommerce stron button.button: hover, .woocommerce stron input.button: hover {background : czerwony ważne; background-color: red ważne; ! Kolor: biały ważne; text-shadow: przejrzyste ważne; box-shadow: none; border-color: #ca0606 ważne; } .woocommerce #content Input.button, .woocommerce #respond wejściowe # przedstawienia, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-stronicowy #content input.button, .woocommerce-stronicowy # # złożyć wejście reaguje, .woocommerce-stronicowy a.button, .woocommerce-stronicowy button.button, .woocommerce-stronicowy input.button {background: red znacząca; ! Kolor: biały ważne; text-shadow: przejrzyste ważne; border-color: #ca0606 ważne; } .woocommerce #content Input.button.alt: hover, .woocommerce #respond wejście # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: hover, .woocommerce-stronicowy #content input.button.alt: hover, .woocommerce-input #respond # submit.alt: hover, .woocommerce-stronicowy a.button.alt: hover, przycisk .woocommerce-stronicową .button.alt: hover, .woocommerce-stronicowy input.button.alt: hover {background: red znacząca; box-shadow: none; text-shadow: przejrzyste ważne; ! Kolor: biały ważne; border-color: #ca0606 ważne; }
Możesz teraz uzyskać dostęp do swojego sklepu internetowego, zauważysz, że przyciski faktycznie zmieniły kolory.
Aby dostosować kolor przycisków, aby w końcu uzyskać pożądany wygląd,
Zastąp właściwość ” backgroud: czerwony! ważny Przez Kolor do wyboru. Zaktualizuj kody i ponownie uzyskaj dostęp do swojego sklepu internetowego. W rzeczywistości, korzystając z dostarczonej przez nas stylizacji, będziesz mógł całkowicie zmienić strukturę przycisków.
Przy odrobinie badań będziesz w stanie stworzyć unikalne przyciski w stylu pasującym do Twojego WordPress (zwłaszcza jeśli ta ostatnia nie jest kompatybilna z WooCommerce).
W poniższym przykładzie możesz użyć następującego kodu CSS.
.woocommerce #content input.button, .woocommerce #respond wejściowe # przedstawienia, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-stronicowy #content input.button, .woocommerce stron #respond # przedstawić wkład, .woocommerce-stronicowy a.button, .woocommerce-stronicowy button.button, .woocommerce-stronicowy input.button {background-color: #6fba26; padding: 10px; Pozycja: względna; rodzina czcionek: "Open Sans", sans-serif; czcionki, rozmiar: 12px; text-decoration: none; Kolor #fff; tła obrazu: liniowym gradientem (dolny, RGB (100,170,30) 0% RGB (129,212,51) 100%); skrzynkowej cień: wstawka 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F; promień graniczny: 5px; } .woocommerce #content input.button.alt: hover, .woocommerce #respond wejście # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: hover, .woocommerce-stronicowy #content input.button.alt: hover, .woocommerce-input #respond # submit.alt: hover, .woocommerce-stronicowy a.button.alt: hover, przycisk .woocommerce-stronicową .button.alt: umieszczenie, .woocommerce-stronę input.button.alt: umieszczenie {górny: 7px; tła obrazu: liniowym gradientem (dolny, RGB (100,170,30) 100% RGB (129,212,51) 0%); skrzynkowej cień: wstawka 0px 1px 0px #0D496F, wstawka 0px -1px 0px #0D496F; kolor: #156785; tekstu cień: 0px 1px 1px rgba (255,255,255,0.3); tło: rgb (44,160,202); }
Dla tych, którzy chcą zoptymalizować działanie swojego sklepu internetowego, zarówno pod względem konwersji, jak i sprzedaży produktów,
Oferujemy również wtyczki premium WordPress 3 przeznaczone do tego zadania.
1. WooCommerce Odzyskaj Opuszczony Koszyk
klienci często napełniają kosze i zostawiają je: dzięki WooCommerce Odzyskiwanie Opuszczony Koszyk będziesz mógł się z nimi skontaktować, przypomnieć im, co kupili i zaprosić do wykonania swoich działań.
Ustaw przedział czasu między porzuceniem koszyka a wysłaniem spersonalizowanej wiadomości e-mail z przypomnieniem do klienta zawierającej bezpośredni link do strony zakupów, aby mógł zobaczyć, na czym był punkt kupić.
2. WooCommerce Ukryj cenę i wtyczkę przycisku Dodaj do koszyka
Wtyczka WooCommerce Hide Prices umożliwia handlowcom tworzenie wielu reguł ukrywania cen lub ukrywania przycisku „dodaj do koszyka” przed niezalogowanymi klientami lub użytkownikami, którzy mają określone prawa dostępu do Twojej witryny e-commerce.
Możesz ukryć cenę i przycisk „dodaj do koszyka” na niektórych produktach lub w określonych kategoriach. Możesz je zastąpić niestandardowym tekstem lub przyciskiem, który przeniesie je do formularz kontaktowy, Możesz utworzyć tyle reguł, które automatycznie ukryją cenę i „ Dodaj do panier ”w zależności od tego, czego chcesz.
3. Przełącznik walut WooCommerce
Ta wtyczka umożliwia przełączanie cen produktów z jednej waluty na inną w czasie rzeczywistym.
Jest to szczególnie ważne w e-Commerce, ponieważ jest skierowane do całego świata. Ta wtyczka zapewnia, że bez względu na to, gdzie znajdują się Twoi klienci, zawsze będą mogli składać zamówienia w Twoim sklepie internetowym.
Polecane zasoby
Odkryj inne zalecane zasoby, które Ci pomogą zoptymalizuj wydajność swojego sklepu internetowego.
- 50 WooCommerce wtyczki, aby poprawić swój sklep internetowy
- Wtyczki 9 WordPress do stworzenia programu partnerskiego
- Wtyczki 9 WooCommerce zwiększające atrybuty zmiennych produktów
- Wtyczki 5 WordPress do wizualnej edycji CSS na swoim blogu
Wnioski
Tutaj jest ! To wszystko w tym samouczku poświęconym dostosowywaniu przycisków Dodaj do koszyka z WooCommerce. Nie wahaj się udostępnić go znajomym na swoim sieci społeczne korzystne.
Będziesz jednak mógł również skonsultować się z nami Zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress.
Ale w międzyczasie opowiedz nam o swoim commentaires i sugestie w dedykowanej sekcji.
...
Witam,
Czy ta sama wtyczka może mi pomóc zmienić kolor gwiazdek „opinii klientów” na stronach produktów woocommerce? z góry dziękuję
Cześć Beata,
Nigdy nie próbowałem i bardzo wątpię, że jest to możliwe.
Witaj, i jak zwiększyć rozmiar przycisku Dodaj do koszyka? dziękuję
Witam,
Musisz użyć do tego kodu CSS. W przeciwnym razie polecam wtyczkę Yellow Pencil, którą można pobrać na Codecanyon.
Cóż, fantastycznie jest przetłumaczyć fragment kodu z angielskiego na włoski. CSS jest pełen błędów! Ale czy możemy to zrobić ?!
przepraszam
Dobry wieczór mam pytanie. Jak zmienić kolor ceny w podkategoriach w WooCommerce ???
Dziękuję za odpowiedź.
Nico
Witaj Nico,
Wiele motywów Premium oferują tę opcję, w przeciwnym razie można użyć CSS, aby go dostosować.
Cordialement