Cửa hàng WooC Commerce của bạn có thể kiếm tiền khi khách hàng nhấn nút thanh toán của trang web. Điều này có nghĩa là, có rất nhiều trọng lượng được đặt trên một nút duy nhất. Do đó, bạn nên làm gì đó để tối ưu hóa các nút trong WooC Commerce bằng cách chọn màu phù hợp. Lý do là việc thay đổi màu nút của bạn có thể trở thành một điều chỉnh nhanh chóng và dễ dàng hứa hẹn sẽ tác động đáng kể đến tỷ lệ chuyển đổi
Bạn nên thay đổi màu nút WooC Commerce của mình. Nếu bạn biết về điều đó, chỉ cần tiếp tục. Nếu bạn chưa biết cách thực hiện thì bài viết này dành cho bạn. Bây giờ, hãy bắt đầu khám phá cách thay đổi màu nút WooC Commerce
Tại sao chúng ta cần thay đổi màu nút trong WooC Commerce?
Tăng tỷ lệ chuyển đổi. Màu sắc sẽ truyền bá cảm xúc khác nhau của người tiêu dùng. Thay đổi màu của nút sẽ mang lại nhiều nhấp chuột có giá trị hơn trong quá trình thanh toán
Thu hút sự chú ý của người tiêu dùng. Màu sắc tương phản có thể giúp khách hàng nhanh chóng bị thu hút bởi sản phẩm của bạn vì những màu này nổi bật hơn các màu xung quanh khác
Làm cách nào để thay đổi màu nút WooC Commerce?
Có một số cách khác nhau để làm điều này. Trên thực tế, màu nút trong WooC Commerce nằm dưới sự kiểm soát của chủ đề trang web của bạn. WooC Commerce đi kèm với một số kiểu cho các nút theo mặc định. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn hai phương pháp. Vì vậy, bạn có thể chọn thay đổi màu của các nút WooC Commerce bằng cách sử dụng CSS hoặc plugin
1. Sử dụng CSS
Sử dụng CSS dường như là một cách phổ biến để làm điều đó. Vì vậy, hãy làm theo chúng tôi một cách nghiêm ngặt với một số bước đơn giản như dưới đây
Bước 1. Nhận bộ chọn CSS của nút
Đầu tiên và quan trọng nhất, cần phải có bộ chọn CSS của nút. Để thực hiện, hãy mở trang web WooC Commerce của bạn trong Chrome, sau đó tiếp tục chọn nút trước khi chọn “Kiểm tra”
Sau đó, bạn có thể nhận thấy rằng một cửa sổ mới sẽ xuất hiện. Và cửa sổ đó hiển thị như sau
Bây giờ, đã đến lúc tập trung vào phần học của bạn. Khi bạn đang ở trên một trang sản phẩm WooC Commerce duy nhất, một nút sẽ có ba lớp. Chúng là “alt”, “button” và “single_add_to_cart_button”. Trong trường hợp một nút nằm trên một trang khác, bạn có thể nhận thấy các lớp khác nhau
Ai đã giỏi CSS sẽ không gặp khó khăn gì khi viết CSS selector của button. Nhưng, nếu bạn chưa biết, đây là những gì bạn sẽ viết bộ chọn CSS này
button.single_add_to_cart_button.button.alt
Bước 2. Viết và áp dụng các quy tắc CSS
Khi bạn đã hiểu bộ chọn CSS là gì, đã đến lúc sử dụng nó bằng cách áp dụng các quy tắc CSS để thay đổi màu của các nút WooC Commerce. Bây giờ, bạn cần chọn một màu cho nút của mình. Gợi ý là bạn có thể tìm kiếm bộ chọn màu trên Google
Chuyển sang một bước khác liên quan đến việc kéo các thanh trượt để chọn màu mong muốn của bạn. Chẳng hạn, bạn đang chọn màu hồng làm màu nền cho nút của mình. Tiếp theo, bạn sẽ cần sao chép mã bắt đầu bằng # ở dưới HEX. Đây là mã màu cần thiết cho quy tắc CSS của bạn
Một bước khác cần làm là thâm nhập vào tùy biến chủ đề. Để làm điều đó, bạn sẽ cần điều hướng đến phần “Giao diện” để chọn “Tùy chỉnh” trước khi chọn “CSS bổ sung”. Tại đây, bạn sẽ chèn đoạn mã dưới đây vào ô mã của mình
button.single_add_to_cart_button.button.alt {
background-color: #d92bb3;
}
Và hộp trông như thế này
Bạn sẽ xuất bản mã của mình một lần nữa. Sau đó, bạn có thể nhận thấy kết quả mong đợi
Bên cạnh việc thay đổi màu nút, bạn cũng có thể thay đổi màu văn bản của nút đó. Theo chúng tôi, tạo chữ trắng với nền hồng đậm trông sẽ rất tuyệt. Tuy nhiên, trong trường hợp bạn thích các màu khác, hãy chuyển đến bộ chọn màu để chọn màu bạn muốn cho văn bản nút của mình. Sau đó, điều hướng đến “Tùy chỉnh” và chọn “CSS bổ sung” để nhập “màu. #f2fc2b;”. Cụ thể hơn, #f2fc2b sẽ là màu sáng và màu vàng. Tiếp theo, mã trong hộp CSS của bạn sẽ giống như dưới đây
Một lần nữa, xuất bản mã đó và bạn có thể thấy kết quả mong đợi
Bước 3. Kiểm tra xem CSS có hoạt động không
Phương pháp này dường như hoạt động trên hầu hết các chủ đề. Tuy nhiên, vẫn tồn tại một số trường hợp có thể không hoạt động. Lý do là một số chủ đề hoặc plugin có thể đi kèm với các quy tắc CSS mạnh hơn được áp dụng cho nút của bạn. Và tình huống này được gọi là tính đặc hiệu của quy tắc
Trong trường hợp bạn đối phó với vấn đề không mong muốn này, điều bạn cần làm là tiếp tục với các quy tắc chặt chẽ hơn và độ đặc hiệu cao hơn. Để thực hiện việc này, hãy đặt trước bộ chọn nút của bạn bằng bộ chọn của nút gốc
2. sử dụng plugin
Sử dụng CSS có thể hơi khó hiểu với một số người không giỏi viết các quy tắc CSS. Ngoài CSS, bạn cũng có thể sử dụng một plugin để thay đổi màu nút WooC Commerce của mình. Và phương pháp này có vẻ đơn giản hơn nhiều. Ở đây, plugin CSS SiteOrigin sẽ được sử dụng để thay đổi màu nút
Bước 1. Cài đặt và kích hoạt plugin CSS SiteOrigin
Điều hướng đến bảng điều khiển của bạn trong WordPress, chuyển đến phần “Plugin” và chọn “Add New”. Sau đó, bạn sẽ thực hiện cài đặt plugin SiteOriginal CSS. Sau khi cài đặt xong, bạn phải kích hoạt nó để tiếp tục
Bước 2. Tùy chỉnh màu nút
Bây giờ, hãy chuyển đến phần “Giao diện”, chọn “CSS tùy chỉnh”. Sau đó, bạn sẽ chọn biểu tượng con mắt để khởi chạy trình chỉnh sửa trực quan của mình
Tại đây, bạn sẽ cần sửa đổi URL mặc định của trình chỉnh sửa trực quan. Việc thay đổi URL này là dành cho một trong các trang sản phẩm. Nhấn enter để thực hiện
Khi bạn ở đây, hãy chọn nút “Thêm vào giỏ hàng” và đảm bảo rằng bộ chọn có thể thay đổi tương ứng
Một bước khác là tùy chỉnh màu nút của bạn. Nếu bạn thích tùy chỉnh đường viền và kích thước, bạn cũng có thể thay đổi phần này. Nhìn vào màn hình bên dưới
Có một lưu ý quan trọng cần ghi nhớ là khi bạn thay đổi các thuộc tính và nó sẽ không ảnh hưởng đến phần tử. Đảm bảo rằng bạn sẽ chọn một lớp khác từ bảng điều khiển của mình. Hãy thử lại để chọn biểu tượng dấu kiểm của bạn ngay khi bạn hoàn tất
Ở bước cuối cùng này, hãy chọn nút “Lưu CSS” trước khi điều hướng đến một trong các trang sản phẩm và đảm bảo rằng màu của nút sẽ thay đổi
Phần kết luận
Nói tóm lại, việc thay đổi màu của nút WooC Commerce của bạn rất đơn giản. Bằng cách đó, bạn có thể tăng hiệu suất của WooStore, từ đó thu hút sự chú ý của khách hàng. Vì vậy, đừng ngần ngại thực hiện các bước nêu trên để làm nổi bật cửa hàng cũng như sản phẩm của bạn. Hy vọng bạn có thể thấy nó hữu ích và lan truyền những lời đó đến những người khác quan tâm