Để 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 :

Tùy chỉnh CSS Menu WordPress Plugin

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.

Giao diện WordPress plugin đơn giản Tuỳ chỉnh CSS

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

thêm vào giỏ hàng nút WordPress

Đố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.

Khôi phục giỏ hàng bị bỏ rơi cho woocommerce

Đặ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.

Woocommerce ẩn giá thêm vào plugin nút giỏ hàng ẩn theo vai trò của người dùng

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.Trình chuyển đổi tiền tệ Woocommerce

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

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.

...