[Hướng dẫn] Thêm icon vào nút add to cart trong woocommerce

Bạn đang cản thấy nút thêm vào giỏ hàng trên woocommerce trông thật tẻ nhạt và thiếu sức hút. Thay vào đó, bạn muốn thêm những icon sinh động vào để nó trông hấp dẫn hơn nhưng chưa biết cách làm thế nào?

Miootech sẽ hướng dẫn bạn cách thêm icon vào nút add to cart trong woocommerce một cách siêu đơn giản!

Bước 1: Cài đặt plugin Font Awesome

Hãy truy câp Plugin -> Cài mới -> Nhập tên plugin Font Awesome và tiến hành cài đặt -> Kích hoạt nó

Bước 2: Truy cập trang chủ Font Awesome và tìm icon mà bạn thích

Ví dụ ở đây mình sẽ dùng icon arrow-circle-right có mã là f0a9

Bước 3: Chèn đoạn CSS sau vào file style.CSS hoặc Tuỳ biến -> Add CSS

Copy đoạn code sau và chèn vào 1 trong 2 cách ở trên nhé

.add_to_cart_button::before {
font-family: fontAwesome;
content: "\f0a9\00a0";
}

Tận hưởng thành quả nào!

Ngoài cách trên bạn cũng có thể thay đổi icon nút mua hàng bằng cách sử dụng plugin có tên Button Customizer. Tất cả những gì bạn cần làm là thay thế biểu tượng ở trong button và lưu lại.