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

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.

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:

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]

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ế?

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.

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

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”:

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]

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