Thêm một biểu tượng vào nút Thêm vào giỏ hàng – WooCommerce

4 tháng trước, Woocommerce, 144 Lượt xem

Hello xin chào các bạn hôm nay lại là mình đây, tiếp tục code WooCommerce nhé cả nhà, hôm nay mình sẽ hướng dẫn các bạn cách thêm 1 icon vào button trong WooCommerce nhé!

Thương mại điện tử là tất cả về trải nghiệm người dùng và giúp mọi người dễ dàng thêm vào giỏ hàng và thanh toán một cách suôn sẻ. Ví dụ: giảm số lượng trường thanh toán là một ý tưởng tuyệt vời – cũng như truyền đạt mục tiêu số 1 của bạn bằng đồ thị: “vui lòng thêm vào giỏ hàng ngay bây giờ!”.

Vì vậy, làm cách nào để bạn thêm một biểu tượng (hoặc một biểu tượng HTML) vào các nút thêm vào giỏ hàng trong WooCommerce? Điều này có thể được thực hiện theo hai cách – thông qua CSS nếu bạn muốn hiển thị các Biểu tượng Fontawesome hoặc qua PHP nếu bạn thích sử dụng một biểu tượng unicode HTML đơn giản.

Thêm một biểu tượng HTML vào các nút Thêm vào giỏ hàng – WooCommerce

Bạn có thể tìm thấy danh sách các ký hiệu HTML tại đây: https://www.w3schools.com/html/html_symbols.asp . Về cơ bản, bằng cách sử dụng một số thực thể HTML

Đoạn mã chèn vào file function.php

add_filter( 'woocommerce_product_single_add_to_cart_text', 'bbloomer_add_symbol_add_cart_button_single' );
 
function bbloomer_add_symbol_add_cart_button_single( $button ) {
$button_new = '» ' . $button;
return $button_new;
}
Kết quả sau khi chèn

Thêm một biểu tượng vào nút Thêm vào giỏ hàng – WooCommerce

Nếu bạn muốn có nhiều biểu tượng hơn, chủ đề Storefront đã sử dụng thư viện biểu tượng từ FontAwesome để in các biểu tượng đặc biệt trên màn hình. Nếu chủ đề của bạn không hỗ trợ FontAwesome, bạn có thể chỉ cần thêm tập lệnh vào tiêu đề để tải phông chữ đặc biệt.

Trong ví dụ này, tôi muốn thêm biểu tượng “Giỏ hàng +” do Fontawesome cung cấp, đi kèm với mã “\ f217”.

Chèn mã vào file style.css của bạn

button.single_add_to_cart_button:before {
    display: inline-block;
    font-family: FontAwesome;
    float: left;
    content: "\f217";
    font-weight: 300;
    margin-right: 5px;
}
Kết quả sau khi chèn

Thêm icon vào tất cả các vị trí của shop

a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart:before {
    display: inline-block;
    font-family: FontAwesome;
    /* float: left; */
    content: "\f217";
    font-weight: 300;
    margin-right: 5px;
}

a.added_to_cart.wc-forward:before {
    display: inline-block;
    font-family: FontAwesome;
    /* float: left; */
    content: "\f217";
    font-weight: 300;
    margin-right: 5px;
}
Kết quả

Bài viết mới cập nhập

  • Cách tải lên tệp WebP trên WordPress

    Cách tải lên tệp WebP trên WordPress

    13 giờ trước, 762 Lượt xem

    Hi chào các bạn! hôm này làm dự án khách hàng đụng cái không upload được hình đuôi .WebP, hôm nay mình sẽ hướng dẫn…

  • Tạo user trên Directadmin

    Tạo user trên Directadmin

    2 ngày trước, 54 Lượt xem

    Trong bài viết hôm nay, netweb sẽ hướng dẫn các bạn tạo user hosting trên DirectAdmin. Tạo user trên Directadmin Để tạo user trên Directadmin…

  • Cách thay đổi cổng SSH trên Linux Ubuntu 20.04

    Cách thay đổi cổng SSH trên Linux Ubuntu 20.04

    4 ngày trước, 660 Lượt xem

    Cổng mặc định cho SSH trên hệ thống Linux là 22. Có một vài lý do khiến bạn có thể muốn thay đổi cổng này thành một số khác. Nếu nhiều máy…

Bình luận trên facebook netweb.vn

Đam mê thiết kế web, kinh nghiệm 9 năm trong nghề thiết kế website, đang thiết kế web dạo tại netweb.vn, Callme: 08.9898.2526 (Mr Hải)