Người Viết : ViKiMi Editor

Thực hiện tuỳ chỉnh “Add To Cart” Button của WooCommerce, học thiết kế Shop Online
Bạn thắc mắc làm sao có thể tuỳ chỉnh hiệu quả thông tin thêm vào giỏ hàng trên Website mua bán Online sử dụng nền tảng thương mại điện tử WooCommerce. Và làm thế nào để tạo ra tuỳ chỉnh tốt nhất, chứ không phải các cách tuỳ chỉnh nhàm chán. Thật đơn giản để làm điều này, chỉ cần không quá nhiều thao tác là bạn đã có một hiệu quả ưng ý.
Tuỳ chỉnh thông tin thêm vào giỏ hàng của Sản Phẩm / Product add to cart mang lại cho bạn rất nhiều sự tiện lợi. Những tiện lợi này cũng giúp bạn nâng cao hiệu quả của công việc bán hàng, thậm chí là bán hàng một số lượng lớn.
Những lợi ích có thể hiển thị như sau :
+ Button “Add To Cart” giao diện tốt hơn
+ Khách hàng có thể nắm các thông báo của Sản Phẩm nhanh chóng
+ Khách hàng tiếp cận chiến dịch hoặc dịch vụ miễn phí trước khi đưa ra quyết định mua hàng
+ Tạo ra các thông tin quan trọng khiến khách hàng mua SP
+ Thông báo Free Shipping etc…
Tuỳ chỉnh là cách dễ dàng + thuận tiện khi bạn muốn có hiển thị tối ưu cho : thiết kế thêm vào giỏ hàng của sản phẩm / Product add to cart.
Nội dung dưới đây sẽ giúp bạn thực hiện tuỳ chỉnh thông tin thêm vào giỏ hàng của Sản Phẩm / Product add to cart :
Chúng ta có trang hiển thị sản phẩm được thiết kế tại File :
wp-content\ plugins\ woocommerce\ templates\ content-single-product.php
+ Tại đây chúng ta cần chú ý đoạn code sau :
<div class="summary entry-summary"> <?php /** * Hook: woocommerce_single_product_summary. * * @hooked woocommerce_template_single_title - 5 * @hooked woocommerce_template_single_rating - 10 * @hooked woocommerce_template_single_price - 10 * @hooked woocommerce_template_single_excerpt - 20 * @hooked woocommerce_template_single_add_to_cart - 30 * @hooked woocommerce_template_single_meta - 40 * @hooked woocommerce_template_single_sharing - 50 * @hooked WC_Structured_Data::generate_product_data() - 60 */ do_action( 'woocommerce_single_product_summary' ); ?> </div>
Không khó để nhận ra Hook sử dụng :
– woocommerce_single_product_summary
& Chức năng được thực hiện là :
– woocommerce_template_single_add_to_cart & Mức ưu tiên là 30
Vậy chúng ta có thể có những Cách nào để tuỳ chỉnh thông tin thêm vào giỏ hàng của Sản Phẩm / Product Add To Cart tại trang Sản Phẩm. Chúng ta có thể thực hiện tuỳ chỉnh này bằng cách sử dụng những Filter thích hợp để có thể đạt được mục đích. Chúng ta có thể tuỳ chỉnh tại 2 vị trí :
+ Tuỳ chỉnh thông tin thêm giỏ hàng Tại Trang Sản Phẩm (Single Product Page)
+ Tuỳ chỉnh thông tin thêm giỏ hàng Tại Trang Cửa Hàng (Shop Page)
CÁCH 1 : Thực hiện tuỳ chỉnh sử dụng Các Filter thích hợp. Chúng ta được cung cấp 2 Filter để tuỳ chỉnh tại 2 vị trí nói ở trên.
Để làm được tuỳ chỉnh này bạn cần thực hiện công việc sau đây.
Tại Function.php thực hiện đoạn thêm đoạn mã sau :
/* Thay đổi Text hiển thị của Button "Add To Cart" Tại Trang Sản Phẩm (Single Product Page) */ add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_single_add_to_cart_text' ); function custom_single_add_to_cart_text() { return __( 'Add To My Shopping Cart', 'woocommerce' ); } /* Thay đổi Text hiển thị của Button "Add To Cart" Tại Trang Cửa Hàng (Shop Page) */ add_filter( 'woocommerce_product_add_to_cart_text', 'custom_product_add_to_cart_text' ); function custom_product_add_to_cart_text() { return __( 'Add To My Shopping Bag', 'woocommerce' ); }
Đồng thời, chúng ta sẽ sử dụng thêm CSS để có thể có một Product Add To Cart với giao diện tốt nhất.
Thêm CSS vào Header bằng Code sau đây tại Function.php:
<?php add_action( 'wp_head', function () { ?> <style type="text/css"> /* Nôi dung CSS sẽ thêm vào đây */ </style> <?php } ); ?>
Nội dung CSS cần thiết để tạo giao diện tốt hơn :
( Nếu chưa dùng Font Awesome bạn có thể thêm vào Header đoạn mã Sau – hoặc cài đặt Bootstrap :
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
)
/* Tại Trang Sản Phẩm */ button.single_add_to_cart_button:before { display: inline-block; font-family: FontAwesome; float: left; content: "\f07a"; font-weight: 300; margin-right: 1em; } .single-product .product .single_add_to_cart_button.button { background-color: #008000; color: white; font-size: 14px; font-weight: bold; border-radius: 0; } .single-product .product .single_add_to_cart_button.button:hover{ background-color: #066106; } .woocommerce div.product form.cart .quantity .qty { height: fit-content; border-radius: 0; width: 4em; text-align: center; padding: 0.32em 0.4em; } /* Tại Trang Cửa hàng */ .woocommerce .product .add_to_cart_button.button { background-color: #008000; color: white; } .woocommerce .product .add_to_cart_button.button:before { display: inline-block; font-family: FontAwesome; float: left; content: "\f07a"; font-weight: 300; margin-right: 1em; }
Hình Ảnh Kết Quả :

PHẦN BỔ SUNG :
Khi tạo giao diện mà bạn muốn thêm những thông tin lưu ý giúp khách hàng quyết định có mua sản phẩm hay không? Và những thông tin này nằm phía trước hoặc phía sau của Button “Add To Cart”. Chúng ta có thể tạo thêm thiết kế sau đây để đạt mục đích.
+ Thêm Text hiển thị phía trước Button “Add To Cart”
Chúng ta có thể giúp khách hàng nhận biết những chú ý thông báo, bảo đảm, giao hàng miễn phí, chính sách hoàn trả hàng…
add_action( 'woocommerce_before_add_to_cart_button', 'add_text_above_add_to_cart');
function add_text_above_add_to_cart() {
echo '<div style="clear:both;">Hỗ trợ Free Shipping</div>';
}
+ Thêm Text hiển thị phía sau Button “Add To Cart”
add_action( 'woocommerce_after_add_to_cart_button', 'add_text_under_add_to_cart' );
function add_text_under_add_to_cart() {
echo '<div style="clear:both;">(* Liên hệ để mua lượng lớn )</div>';
}
+ Thêm thông báo khi một sản phẩm được thêm vào giỏ hàng chúng ta sử dụng đoạn code sau :
Sử dụng code 1 ( Hoặc Code 2)
(Code 1)
add_filter( ‘wc_add_to_cart_message’, ‘customize_wc_add_to_cart_message’, 10, 2 );
function customize_wc_add_to_cart_message( $message, $product_id ) {
$message = sprintf(esc_html__(‘%s đã được thêm vào giỏ hàng của bạn. Cảm Ơn!’), get_the_title( $product_id ) );
return $message;
}
(Code 2)
add_filter( ‘wc_add_to_cart_message_html’, ‘customize_add_to_cart_message’ );
function customize_add_to_cart_message() {
$message = ‘Bạn đã thêm sản phẩm vào giỏ hàng. Cảm Ơn!’ ;
return $message;
}
Cách Customize thông tin thêm vào giỏ hàng của WooCommerce thật dễ dàng thực hiện. Với cách Customize như trên chúng ta đã có một cách hiển thị hiệu quả hơn. Một Button “Add to Cart” phù hợp thiết kế hiện đại cho Website trên nền tảng thương mại điện tử WooCommerce.
+ Product Add To Cart có thể thực hiện với nhiều tuỳ chỉnh nhằm đưa ra cách lựa chọn sản phẩm phù hợp cho Khách hàng
+ Tạo ra các thông tin quan trọng như Free Shipping hoặc Hoàn trả Sản phẩm, ưu đãi mua lượng lớn etc…
Nếu bạn muốn thiết kế một Website thương mại điện tử với WooCommerce thì việc bạn phải tạo các tuỳ chỉnh bằng cách sử dụng Hook là điều gần như bắt buộc. Đồng thời bạn ghi đè các Template của WooCommerce cũng là một phương án tốt có thể thực hiện được.
Với việc tuỳ chỉnh trang hiển thị sản phẩm ( content-single-product.php ) thì bạn luôn cần xem tại File này có thể chỉnh sửa bằng cách sử dụng các Hook nào hoặc có thể ghi đè các Template nào. Chỉ cần tuân thủ những gì WooCommerce cung cấp cho bạn.