Để thay đổi màu của các nút WooCommerce, Chúng ta cần thay đổi hoặc thay thế tệp style.css mặc định của các nút. Để làm điều này, chúng tôi sẽ cần thêm một mã CSS tùy chỉnh để chúng tôi chủ đề WordPress của trẻ em.
Có hai cách để làm điều này:
- Thêm CSS tùy chỉnh vào tệp style.css chủ đề con
- Sử dụng một số plugin để tiêm mã CSS tùy chỉnh vào các trang web của bạn.
Bước 1: Cài đặt plugin trên WordPress Simple CSS và kích hoạt nó
Chúng tôi sẽ sử dụng một Plugin WordPress để đưa mã CSS vào các trang của Cửa hàng trực tuyến WooCommerce. Bạn có thể tải xuống plugin: Simple CSS
Bạn có thể đọc hướng dẫn của chúng tôi về cài đặt và kích hoạt plugin WordPress.
Sau khi kích hoạt plugin, một menu phụ mới sẽ được thêm vào menu Apparence :
Truy cập phần này sẽ đưa bạn đến giao diện có hộp văn bản nơi bạn có thể nhập mã CSS tùy chỉnh.
Đặt CSS sau vào hộp văn bản và sau đó nhấp vào " Cập nhật Tuỳ chỉnh CSS".
.woocommerce # content input.button.alt: hover, .woocommerce #respond đầu vào # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button. alt: hover, .woocommerce-page # content input.button.alt: hover, đầu vào .woocommerce trang #respond # submit.alt: hover, .woocommerce trang a.button.alt: hover, nút .woocommerce trang. button.alt: hover, .woocommerce trang input.button.alt: hover {background: đỏ đáng kể; background-color: màu đỏ quan trọng; ! Màu: trắng quan trọng; text-shadow: minh bạch quan trọng; hộp-shadow: none; border-color: #ca0606 quan trọng; } .woocommerce # content input.button: hover, .woocommerce #respond # nộp đầu vào: hover, .woocommerce a.button: hover, .woocommerce button.button: hover, .woocommerce input.button: hover, .woocommerce-page # hạnh phúc input.button: hover, .woocommerce-page input #respond # nộp: hover, .woocommerce trang a.button: hover, .woocommerce trang button.button: hover, .woocommerce trang input.button: hover {background : đỏ quan trọng; background-color: màu đỏ quan trọng; ! Màu: trắng quan trọng; text-shadow: minh bạch quan trọng; hộp-shadow: none; border-color: #ca0606 quan trọng; } .woocommerce # content input.button, .woocommerce #respond đầu vào # gửi, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page # content input.button, .woocommerce-page # sponds đầu vào # gửi, .woocommerce trang a.button, .woocommerce trang button.button, .woocommerce trang input.button {background: đỏ đáng kể; ! Màu: trắng quan trọng; text-shadow: minh bạch quan trọng; border-color: #ca0606 quan trọng; } .woocommerce # content input.button.alt: hover, .woocommerce #respond đầu vào # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: hover, .woocommerce-page # content input.button.alt: hover, đầu vào .woocommerce trang #respond # submit.alt: hover, .woocommerce trang a.button.alt: hover, nút .woocommerce trang .button.alt: hover, .woocommerce trang input.button.alt: hover {background: đỏ đáng kể; hộp-shadow: none; text-shadow: minh bạch quan trọng; ! Màu: trắng quan trọng; border-color: #ca0606 quan trọng; }
Bây giờ bạn có thể truy cập cửa hàng trực tuyến của mình, bạn sẽ nhận thấy rằng các nút đã thực sự thay đổi màu sắc.
Để tùy chỉnh màu sắc của các nút để cuối cùng có giao diện bạn muốn,
Thay thế thuộc tính " backgroud: đỏ quan trọng! Bởi một màu của sự lựa chọn của bạn. Cập nhật mã và truy cập lại cửa hàng trực tuyến của bạn. Trên thực tế, sử dụng cách tạo kiểu mà chúng tôi vừa cung cấp cho bạn, bạn sẽ có thể thay đổi hoàn toàn cấu trúc của các nút.
Với một chút nghiên cứu, bạn sẽ có thể tạo các nút độc đáo với phong cách phù hợp với theme WordPress (đặc biệt nếu sau này không tương thích với WooCommerce).
Đối với ví dụ sau, bạn có thể sử dụng mã CSS sau.
.woocommerce # content input.button, .woocommerce #respond đầu vào # gửi, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page # content input.button, #respond .woocommerce trang # nộp đầu vào, .woocommerce trang a.button, .woocommerce trang button.button, .woocommerce trang input.button {background-color: #6fba26; padding: 10px; position: relative; font-family: 'Open Sans', sans-serif; font-size: 12px; text-decoration: none; color: #fff; background-image: linear gradient (đáy, rgb (100,170,30) 0% rgb (129,212,51) 100%); hộp-shadow: inset 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F; border-radius: 5px; } .woocommerce # content input.button.alt: hover, .woocommerce #respond đầu vào # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: hover, .woocommerce-page # content input.button.alt: hover, đầu vào .woocommerce trang #respond # submit.alt: hover, .woocommerce trang a.button.alt: hover, nút .woocommerce trang .button.alt: hover, .woocommerce trang input.button.alt: hover {top: 7px; background-image: linear gradient (đáy, rgb (100,170,30) 100% rgb (129,212,51) 0%); hộp-shadow: inset 0px 1px 0px #0D496F, inset 0px -1px 0px #0D496F; màu: #156785; text-shadow: 0px 1px 1px rgba (255,255,255,0.3); nền: rgb (44,160,202); }
Đối với những người muốn tối ưu hóa hiệu suất của cửa hàng trực tuyến của họ cho dù về mặt chuyển đổi hoặc bán sản phẩm,
Chúng tôi cũng cung cấp các plugin WordPress cao cấp 3 được thiết kế cho nhiệm vụ này.
1. WooCommerce Phục hồi Giỏ hàng bị bỏ rơi
khách hàng của bạn thường điền vào giỏ của họ và để lại chúng: nhờ WooCommerce Recover Giỏ Abandoned bạn sẽ có thể liên hệ với họ, nhắc họ về những gì họ đã mua và mời họ hoàn thành hành động của mình.
Đặt khoảng thời gian từ khi bỏ giỏ hàng đến khi email nhắc nhở được cá nhân hóa được gửi đến khách hàng của bạn với liên kết trực tiếp đến trang mua hàng để họ xem họ đang ở đâu điểm để mua.
Tải về | Bản demo | Web hosting
2. WooCommerce Ẩn Giá & Plugin Nút Thêm vào Giỏ hàng
Plugin WooCommerce Hide giá cho phép người bán tạo nhiều quy tắc để ẩn giá hoặc ẩn nút “thêm vào giỏ hàng” đối với những khách hàng hoặc người dùng chưa đăng nhập có quyền truy cập nhất định vào trang web thương mại điện tử của bạn.
Bạn có thể ẩn giá và nút "thêm vào giỏ hàng" trên một số sản phẩm hoặc trong danh mục cụ thể. Bạn có thể thay thế chúng bằng văn bản tùy chỉnh hoặc một nút sẽ đưa chúng đến Mẫu liên hệ. Bạn có thể tạo bao nhiêu quy tắc sẽ tự động ẩn giá và " Thêm vào panier ”tùy thuộc vào những gì bạn muốn.
Tải về | Bản demo | Web hosting
3. WooCommerce Chuyển đổi tiền tệ
Plugin này cho phép bạn chuyển giá sản phẩm từ loại tiền này sang loại tiền khác trong thời gian thực.
Điều này đặc biệt quan trọng trong Thương mại điện tử, vì nó hướng đến toàn thế giới. Plugin này đảm bảo rằng bất kể khách hàng của bạn ở đâu, họ sẽ luôn có thể đặt hàng từ cửa hàng trực tuyến của bạn.
Tải về | Bản demo | Web hosting
Tài nguyên đề xuất
Khám phá các tài nguyên được đề xuất khác sẽ giúp bạn tối ưu hóa hiệu suất của cửa hàng trực tuyến của bạn.
- 50 WooCommerce plugin để cải thiện cửa hàng trực tuyến của bạn
- Các plugin 9 WordPress để tạo một chương trình liên kết
- Plugin 9 WooCommerce để nâng cao các thuộc tính của các sản phẩm biến của bạn
- Các plugin 5 WordPress để chỉnh sửa trực quan CSS trên blog của bạn
Kết luận
Đây là ! Đó là tất cả cho hướng dẫn này dành riêng cho tùy chỉnh nút Thêm vào giỏ hàng từ WooC Commerce. Đừng ngần ngại chia sẻ nó với bạn bè của bạn trên mạng xã hội ưa thích.
Tuy nhiên, bạn cũng sẽ có thể tham khảo ý kiến của chúng tôi ressources, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress.
Tuy nhiên, trong thời gian chờ đợi, hãy cho chúng tôi biết về ý kiến và đề xuất trong phần dành riêng.
...
Bonjour,
Có thể cùng plugin này giúp tôi thay đổi màu sắc của các ngôi sao "đánh giá của khách hàng" trên các trang sản phẩm woocommerce không? cảm ơn trước
Xin chào Beata
Tôi chưa bao giờ thử và tôi rất nghi ngờ điều đó có thể xảy ra.
Xin chào, và làm thế nào để tăng kích thước của nút Thêm vào giỏ hàng? cảm ơn bạn
Bonjour,
Bạn phải sử dụng mã CSS cho việc này. Mặt khác, tôi khuyên dùng plugin Yellow Pencil mà bạn có thể tải xuống trên Codecanyon.
Chà, thật tuyệt khi dịch một đoạn mã từ tiếng Anh sang tiếng Ý. CSS đầy lỗi! Nhưng liệu chúng ta có thể làm được không ?!
lấy làm tiếc
Chào buổi tối, tôi có một câu hỏi. Làm cách nào để chúng tôi thay đổi màu sắc của giá trong các danh mục phụ trong WooCommerce ???
Cảm ơn bạn đã cho câu trả lời của bạn.
Nico
Xin chào Nico,
Rất nhiều chủ đề cao cấp cung cấp tùy chọn này, nếu không bạn có thể sử dụng CSS để cá nhân hóa nó.
Thân chào