Icon giỏ hàng HTML

Chào đọc giả của Theme Sạch. Chúc các bạn một ngày làm việc vui vẻ. Trong bài viết này, chúng ta sẽ triển khai một ý tưởng khá thú vị. Tính năng này sẽ giúp trải nghiệm của khách hàng được tốt hơn khi giỏ hàng sẽ được cố định luôn luôn hiển thị trên giao diện wordpress.

Tạo Icon Giỏ Hàng Cố Định

Thêm Code Vào Functions.php

Đầu tiên chúng ta sẽ tạo icon giỏ hàng cố định. các bạn mở file Functions.php của theme wordpress bạn đang sử dụng lên và copy đoạn code bên dưới vào và lưu lại. File này thường nằm ở đường dẫn sau: wp-content/themes/tên thư mục theme bạn đang dùng/functions.php. Nếu bạn vẫn thắc mắc file Functions.php là gì và làm cách nào để chỉnh sửa nó thì bạn xem qua bài viết này đã nhé: File Functions Là Gì? Cách Sử Dụng File Function

function cart_themesach(){
ob_start();?>

ob_end_clean();
return $list_post;
}
add_shortcode(‘cart_themesach’,’cart_themesach’);

Thêm Code Vào Style.css

Tiếp theo chúng ta cần dùng CSS để trang trí icon giỏ hàng cố định cho đẹp. Bạn hãy mở file Style.css trong tệp theme mà bạn đang sử dụng. Tệp này nằm ở đường dẫn sau: wp-content/themes/tên thư mục theme bạn đang dùng/style.css. Bạn copy đoạn css bên dưới pass vào và nhấn lưu lại nhé. Bạn có thể tùy ý triển khai css theo cách bạn muốn.

.cart_themesach{
position: fixed;
bottom: 70px;
left: 40px;
z-index: 999;
}
.cart_themesach>a{
font-size: 20px;
background: #fff;
padding: 15px;
border-radius: 5px;
}
.cart_themesach .icon-shopping-cart:after{
background-color: #e94b35;
top: -24px;
right: -24px;
padding-left: 8px;
padding-right: 8px;
line-height: 23px;
height: 24px;
min-width: 24px;
font-size: 15px;
}
.cart_themesach .icon-shopping-cart{
color: #23282d;
}

Chèn Shortcode Vào Website

Cuối cùng bạn muốn thêm icon giỏ hàng cố định vào đâu chỉ cần chèn shortcode sau [cart_themesach] vào bất kỳ vị trí nào bạn muốn nó hiển thị. Bạn nên chèn vào global footer để nó luôn luôn hiển thị trên website nhé.

Dĩ nhiên sẽ có plugin wordpress hỗ trợ tính năng này. Nhưng thay vì cài đặt nhiều plugin làm nặng website thì chúng ta dùng cách này sẽ thuận tiện hơn rất nhiều. Nếu có thắc mắc hay góp ý gì, bạn hãy để lại bên dưới để cùng thảo luận nhé.

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;
}

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

Download

Download the SVG to use or edit.

Download SVG

Icon font

Using the web font? Copy, paste, and go.

Code point

• Unicode: U+F242
• CSS: \F242
• JS: \uF242
• HTML: 

Copy HTML

Paste the SVG right into your project's code.