Przejdź do głównej treści

Jak dostosować przycisk „Dodaj do koszyka” WooCommerce

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

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

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ą

Zamierzamy użyć wtyczki WordPress do wstrzyknięcia kodu CSS na strony pliku 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.

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

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 motywu 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

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]

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” przy niektórych produktach lub w określonych kategoriach. Możesz je zastąpić spersonalizowanym tekstem lub przyciskiem, który przeniesie ich do formularza kontaktowego. Możesz utworzyć dowolną liczbę 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. 

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]

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.

... 

Ten artykuł zawiera komentarze 8

  1. 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ę

  2. 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ć ?!

    1. Witaj Nico,

      Wiele motywów Premium oferują tę opcję, w przeciwnym razie można użyć CSS, aby go dostosować.

      Cordialement

Zostaw komentarz

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

Powrót do góry