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 :

Menu Niestandardowa wtyczka CSS WordPress

Dostęp do tej sekcji powoduje przejście do interfejsu z polem tekstowym, w którym można wprowadzić niestandardowy kod CSS.

Prosty interfejs niestandardowy CSS WordPress

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).

dodaj do koszyka przycisk WordPress

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ń.

Odzyskaj porzucony koszyk dla woocommerce

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

Pobierz | Demo | hosting

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.

Woocommerce ukryj cenę dodaj wtyczkę przycisku do koszyka ukryj według ról użytkownika

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.

Pobierz | Demo | hosting

3. Przełącznik walut WooCommerce

Ta wtyczka umożliwia przełączanie cen produktów z jednej waluty na inną w czasie rzeczywistym.Przełącznik walutowy Woocommerce

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.

Pobierz | Demo | hosting

Polecane zasoby

Odkryj inne zalecane zasoby, które Ci pomogą zoptymalizuj wydajność swojego sklepu internetowego. 

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.

...