WooCommerce: Thay đổi biểu tượng “Xóa sản phẩm” trong Giỏ hàng

review_commentCreated with Sketch (http://www.bohemiancoding.com/sketch) 0
Đánh giá cho chúng tôi

Remove this Item (Xóa sản phẩm) trong WooCommerce. Làm sao để xóa bỏ sản phẩm khỏi giỏ hàng khi bạn không muốn mua sản phẩm đó nữa? Đơn giản là chỉ việc “click” vào dấu X được khoang vùng màu đỏ trong hình ví dụ dưới đây.

WooCommerce: Thay đổi biểu tượng “Xóa sản phẩm” trong Giỏ hàng

Vậy làm cách nào để thay đổi biểu tượng “Remove this item” trên trang Giỏ hàng WooCommerce? Dưới đây là giải pháp:

Thay đổi biểu tượng “Remove this Item” trong Giỏ hàng -Default WooCommerce.

Trong WooCommerce mặc định và sử dụng chủ đề không áp dụng phong cách riêng cho Giỏ hàng (ví dụ: chủ đề 2017), biểu tượng “xóa” là X khoanh vùng tròn màu trắng!

Trên thực tế, đó là một chữ “x” đơn giản (theo ký tự “x”) với đường viền 1px và bán kính đường viền 100%, khiến nó trông giống như chữ “x” với một vòng tròn xung quanh:

WooCommerce: Thay đổi biểu tượng “Xóa sản phẩm” trong Giỏ hàng

Vì vậy, bạn có thể sử dụng đoạn CSS sau:

[code] a.remove {
text-indent: -9999px;
border: 0;
}

/* Add a Fontawesome icon instead */
/* Learn More in the Following Paragraphs */

a.remove:before {
font-family: FontAwesome;
content: “\f1f8”;
float: left;
text-indent: 0;
}
[/code]

Nếu bạn không thấy biểu tượng, điều đó có nghĩa là Fontawesome chưa được cài đặt trong trang web của bạn. Để làm được điều này, bạn cần thêm một số mã vào tệp header.php của chủ đề: https://fontawesome.io/get-started

Trước khi đưa ra giải pháp cho bạn, tôi muốn cho bạn xem một loạt ảnh chụp màn hình. Bằng cách này, bạn có thể tìm hiểu cách thay đổi biểu tượng “Menu Giỏ hàng”, biểu tượng “Thêm vào giỏ hàng” (nếu có) và tất cả các biểu tượng khác do chủ đề hoặc plugin của bạn thêm vào!

Cách thay đổi biểu tượng xóa trong Giỏ hàng

1. Hãy kiểm tra biểu tượng “Remove this item” trong WooCommerce qua Google Chrome.

Đầu tiên, ta cần hiểu điều gì đang thực sự tạo ra biểu tượng này. Nó có phải là HTML không? Có thể là một thủ thuật CSS thay thế?

WooCommerce: Thay đổi biểu tượng “Xóa sản phẩm” trong Giỏ hàng

Kiểm tra biểu tượng xóa sản phẩm xem dòng code nào đã tạo ra nó

2. “Remove this item” là một liên kết (“a href”) với một số kiểu CSS; nhưng không có dấu hiệu của biểu tượng / hình ảnh!

“Kiểm tra” cho phép chúng ta nghiên cứu HTML và CSS của phần tử được kiểm tra. Tuy nhiên, dường như không có gì cho chúng ta biết “vòng tròn đỏ chữ X trắng” đến từ đâu.

WooCommerce: Thay đổi biểu tượng “Xóa sản phẩm” trong Giỏ hàng

3. Chờ đã, hãy xem “:: before” bên trong “a href”. Chính là các phần tử giả CSS.

WooCommerce: Thay đổi biểu tượng “Xóa sản phẩm” trong Giỏ hàng

4. Nội dung CSS và font-family – Remove this Item trong WooCommerce

Nói một cách ngắn gọn, biểu tượng đang được tạo bởi thuộc tính Content = “nội dung” CSS:

[code] content: “\f057”;
[/code]

Và, sâu hơn nữa, phần tử tương tự có font-family = “FontAwesome”:

[code] font: normal normal normal 1em/1 FontAwesome;
[/code]

Do đó, 2 dòng này chịu trách nhiệm tạo ra dấu X trắng đó… điều gì sẽ xảy ra nếu chúng ta muốn thay thế biểu tượng đó bằng một “thùng rác”? Hay cái gì khác?[/code]

5. FontAwesome – Remove this Item trong WooCommerce

Vì vậy, ở đâu đó xung quanh WooCommerce HTML, FontAwesome này đang được thực hiện. Điều này có nghĩa là chúng ta có thể sử dụng lại nó và xem nó có cung cấp nhiều biểu tượng hơn không!

Vì vậy, hãy truy cập https://www.flaticon.com/ và tìm các biểu tượng “XÓA”:

WooCommerce: Thay đổi biểu tượng “Xóa sản phẩm” trong Giỏ hàng

Hãy chọn một cái, chẳng hạn như biểu tượng “Trash”(“thùng rác”):

Và mã của nó là “Unicode”: f1f8

6. CSS: ghi đè lên biểu tượng ban đầu… bằng một dòng mã!

Bây giờ bạn đã chọn biểu tượng và biết Unicode của nó, hãy chuyển đến CSS của bạn và thêm một dòng sau:

[code] a.remove:before {
content: “\f1f8”;
}
[/code]
Và đây là thành quả của bạn. Rất đơn giản phải không nào.

7. CSS: Thay đổi màu biểu tượng… bằng một lớp lót khác!

[code] a.remove:before {
color: #222222;
}
[/code] Hi vọng một trong hai cách trên có thể hỗ trợ các bạn trong việc thay đổi biểu tượng xóa sản phẩm trong Theme cụ thể.

Thêm đoạn mã này vào đâu?

Bạn có thể đặt các đoạn mã PHP ở cuối tệp functions.php chủ đề con của mình (trước “?>” Nếu bạn có). Mặt khác, CSS có trong tệp style.css chủ đề con của bạn.

Đoạn mã này (vẫn) hoạt động chứ?

Vui lòng cho tôi biết trong phần bình luận nếu mọi thứ hoạt động như mong đợi. Tôi rất sẵn lòng sửa đổi đoạn mã nếu bạn có góp ý phù hợp (vui lòng cung cấp ảnh chụp màn hình).

Dịch vụ thiết kế website chuyên nghiệp tại Web MTP

Liên hệ ngay với chúng tôi nếu bạn đang gặp khó khăn trong việc thiết kế web nhé!

Website: https://webmtp.com/

Hotline: 0931 912 379

WooCommerce: Chỉnh sửa mục “Have a Coupon?” trong trang giỏ hàng và thanh toán

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Game bài đổi thưởng
Link with us