%20tại%20Trang%20Sản%20Phẩm)
Người Viết : ViKiMi Editor
Hướng dẫn tạo một Trang Giỏ Hàng (Cart Page) có giao diện thân thiện và hữu hiệu với WooCommerce.
WooCommerce cung cấp một Cart Page (Trang Giỏ Hàng) tương đối đầy đủ. Khi bạn cài đặt WooCommerce, tự động Trang Giỏ Hàng đã được tạo ra, Trang Giỏ Hàng cũng như các Page bình thường của WordPress. Nội dung của Trang Giỏ Hàng thật đơn giản, đó là một ShortCode để gọi nội dung Giỏ Hàng của hệ thống thương mại điện tử WooCommerce.
Chúng ta có thể thấy nội dung của Cart Page (Trang Giỏ Hàng) như sau:
Hình Ảnh :
Như vậy, chúng ta đã thấy rất rõ nội dung của Trang Giỏ Hàng được tạo ra và ShortCode được sử dụng.
Nếu bạn muốn thay đổi thêm những hiển thị tại Trang Giỏ Hàng này, thì bạn cũng có thể sử dụng các ShortCode mà WooCommerce cung cấp.
Nhưng với chúng ta, chúng ta sẽ quan tâm nhiều hơn tới File lập trình để tạo ra hiển thị khi gọi ShortCode như trên. Chúng ta có File lập Trình được đặt tại vị trí như sau :
Wp-content\ plugins \woocommerce \templates \cart :
+ cart.php
+ cart-totals.php
+ cross-sells.php
+ proceed-to-checkout-button.php
+ mini-cart.php
+ etc…
Chúng ta thấy rằng đây là những File mà WooCommerce cung cấp, chúng ta có thể thực hiện ghi đè những file này để tạo tuỳ chỉnh mong muốn.
A ) Trong phần này, sẽ chỉ sử dụng CSS và các Filter để có thể đạt một giao diện hiển thị Cart Page tốt nhất. Một giao diện mà chúng ta có thể cung cấp nhanh chóng đến khách hàng, đồng thời có thể phát triển Shop Online tốt nhất + thu hút khách hàng mua sắm.
Chúng ta sẽ sử dụng CSS (Hãy thêm vào bằng Code Snippets hoặc sử dụng Function.php của Child Theme – ở đây sẽ sử dụng cách thêm Code vào file 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 tuỳ chỉnh hiển thị như sau :
+ Ở đây có dùng Font Awesome, nếu bạn chưa có thì hãy tham khảo cách sử dụng (Font Awesome thường được sử dụng cùng Bootstrap).
.woocommerce a.remove { display: block; font-size: 1.5em; height: 1.1em; width: 1em; text-align: center; line-height: 1; border-radius: 100%; color: #b7a9a9 !important; text-decoration: none; font-weight: 700; border: 1px solid #b7a9a9; } .woocommerce a.remove:hover { color: red!important; background-color: white !important; border: 1px solid #b7a9a9; } #add_payment_method table.cart img, .woocommerce-cart table.cart img, .woocommerce-checkout table.cart img { width: 100%; padding: 2%; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2); } .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { float: right; width: 100%; } .woocommerce-cart .wc-proceed-to-checkout, .woocommerce-checkout .wc-proceed-to-checkout { padding: 1em 0; width: 48%; float: right; } #add_payment_method .wc-proceed-to-checkout a.checkout-button, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .woocommerce-checkout .wc-proceed-to-checkout a.checkout-button { display: block; text-align: center; margin-bottom: 1em; font-size: 1.25em; padding: 1em; background-color: forestgreen; } #add_payment_method .wc-proceed-to-checkout a.checkout-button, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .woocommerce-checkout .wc-proceed-to-checkout a.checkout-button:hover { background-color: forestgreen !important; } #add_payment_method .wc-proceed-to-checkout a.checkout-button, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:before { display: inline-block; font-family: FontAwesome; float: left; content: "\f06b"; font-weight: 900; color:yellow; } .woocommerce-page table.cart td.actions .input-text#coupon_code{ width: 55% !important; height: 100% !important; } .woocommerce table.shop_table td.product-name a{ border-bottom : 1px solid transparent !important; }
B ) Chúng ta thực hiện tuỳ chỉnh những nhãn hiển thị bằng tiếng Anh qua tiếng Việt bằng cách sử dụng các Filter sau đây.
Thêm những mã Code sau vào Funtion.php.
/*
* Tuỳ chỉnh vị trí hiển thị của Cross Sells
*/
remove_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display' );
add_action( 'woocommerce_after_cart', 'woocommerce_cross_sell_display', 5 );
/*
* Tuỳ chỉnh nội dung Label tại Cart Page
*/
add_filter( 'gettext', 'change_cart_totals_text', 20, 3 );
function change_cart_totals_text( $translated, $text, $domain ) {
if( is_cart() && $translated == 'Cart totals' ){
$translated = __('Thanh Toán', 'woocommerce');
}
return $translated;
}
add_filter( 'gettext', 'change_Apply_coupon_text', 20, 3 );
function change_Apply_coupon_text( $translated, $text, $domain ) {
if( is_cart() && $translated == 'Apply coupon' ){
$translated = __('Phiếu Giảm Giá', 'woocommerce');
}
return $translated;
}
add_filter( 'gettext', 'change_Update_cart_text', 20, 3 );
function change_Update_cart_text( $translated, $text, $domain ) {
if( is_cart() && $translated == 'Update cart' ){
$translated = __('Cập Nhật Giỏ Hàng', 'woocommerce');
}
return $translated;
}
add_filter( 'gettext', 'change_Proceed_to_checkout_text', 20, 3 );
function change_Proceed_to_checkout_text( $translated, $text, $domain ) {
if( is_cart() && $translated == 'Proceed to checkout' ){
$translated = __('Tiếp Tục Thanh Toán', 'woocommerce');
}
return $translated;
}
Hình Ảnh Kết Quả :
Như vậy, chúng ta đã thực hiện tuỳ chỉnh thành công Cart Page một cách đơn giản nhất. Một Cart Page được tuỳ chỉnh sẽ cho Shop Online có một cách hiển thị tối ưu. Nhờ vậy, khách hàng tiềm năng có thể chọn thanh toán mau chóng nhờ nhận biết đã đúng yêu cầu. Nội dung hiển thị chính là một nguyên nhân chính mà bạn có thể mang lại sự hài lòng đến khách hàng.
Nếu bạn muốn tuỳ chỉnh Cart Page bằng cách sử dụng một Plugin miễn phí thì điều đó không khó, nhưng khi bạn dùng Plugin thì hãy lưu ý tới tốc độ của Website.
