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 WooCommerce

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

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

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]

Đặ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 các sản phẩm nhất định hoặc trong các danh mục cụ thể. Bạn có thể thay thế chúng bằng văn bản được cá nhân hóa hoặc bằng một nút sẽ đưa họ đế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à " 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. 

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

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

... 

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

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

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

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

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

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