Bỏ qua đến nội dung chính

Cách tùy chỉnh nút "Thêm vào giỏ hàng" của WooC Commerce

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Để thay đổi màu của các nút WooC Commerce, chúng ta cần thay đổi hoặc thay thế tệp nút style.css mặc định. Để làm điều này, chúng ta 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 để đến đó:

  • 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 plugin WordPress để tiêm 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 con 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 một giao diện với 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.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Để tùy chỉnh màu của các nút cuối cùng để có giao diện bạn muốn,

Thay thế tài sản » 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à quay lại cửa hàng trực tuyến của bạn. Trên thực tế, sử dụng kiểu chúng tôi vừa cung cấp, bạn hoàn toàn có thể thay đổi cấu trúc của các nút.

Với một í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 chủ đề WordPress của bạn (đặc biệt là 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,

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

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 nhở họ về những gì họ đã mua và mời họ hoàn thành hành động của họ.

Đặt khoảng thời gian giữa khi giỏ hàng bị bỏ rơi và khi email nhắc nhở được cá nhân hóa được gửi đến khách hàng của bạn bằng liên kết trực tiếp đến trang mua sắm để họ có thể thấy những gì họ đã ở trên điểm mua.

Tải về | Bản demo | Web hosting

2. WooCommerce Ẩn Giá & Thêm vào Giỏ Nút Plugin

Plugin Ẩn giá WooC Commerce 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" cho khách hàng hoặc người dùng không kết nối 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 các 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 bạn đến biểu mẫu liên hệ. Bạn có thể tạo bao nhiêu quy tắc sẽ tự động ẩn giá và nút " 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ó nhắm đến toàn thế giới. Plugin này đảm bảo rằng bất kể tình hình địa lý của khách hàng của bạn, họ sẽ luôn có thể đặt hàng trên 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.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

Kết luận

Voila! Đó là hướng dẫn dành riêng cho việc tùy chỉnh nút này Thêm vào giỏ hàng từ WooC Commerce. Hãy 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.

Nhưng trong lúc này, hãy cho chúng tôi biết về bạn ý kiến và đề xuất trong phần dành riêng.

...

Bài viết này chứa comments 8

  1. Bonjour,
    Plugin này có thể 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 thương mại điện tử không? cảm ơn trước

  2. Vâng, thật tuyệt vời khi dịch một đoạn mã từ tiếng Anh sang tiếng Ý. CSS đầy lỗi! Nhưng chúng ta có thể làm được không?

Để lại một bình luận

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
3 cổ phiếu
cổ phiếu3
tweet
Enregistrer