Người Viết : ViKiMi Editor
Tạo giao diện phù hợp và mang lại thoải mái cho Khách hàng tiềm năng của Shop Online
Thực hiện thay đổi vị trí hiển thị của sản phẩm Up-sells tại trang sản phẩm có vẻ không hấp dẫn lắm. Tuy nhiên, điều này lại cho phép chúng ta hiển thị bố cục mới tốt hơn. Những mẫu hiển thị mới lạ đem lại trực quan hợp lý cho khách hàng truy cập. Đây chính là điều nhấn mạnh khiến thiết kế Website buôn bán hợp lý & hài lòng khách hàng hơn.
Để thay đổi vị trí hiển thị của sản phẩm Up-Sells (Những sản phẩm bán thêm, và là những sản phẩm chất lượng tốt nhất) chúng ta có những lợi ích sau đây :
+ Hiển thị bố cục Website buôn bán chuẩn hơn
+ Tạo bố cục Website tránh sự nhàm chán và tránh cảm giác khó chịu
+ Tạo thoải mái cho khách hàng
+ Giới thiệu sản phẩm tốt nhất ngay lập tức tới khách hàng etc…
Chúng ta cần thực hiện các bước sau đây:
BƯỚC 1 : Xoá hiển thị mặc định ban đầu của Woommerce
Ban đầu mặc định sẽ là đoạn mã hiển thị :
File content-single-product.php >>
/**
* Hook: woocommerce_after_single_product_summary.
*
* @hooked woocommerce_output_product_data_tabs – 10
* @hooked woocommerce_upsell_display – 15
* @hooked woocommerce_output_related_products – 20
*/
do_action( ‘woocommerce_after_single_product_summary’ );
Chúng thực hiện xoá hiển thị mặc định bằng cách thêm Code sau vào Function.php
remove_action(‘woocommerce_after_single_product_summary’,’woocommerce_upsell_display’,15);
BƯỚC 2 : Thực hiện thiết lập vị trí hiển thị mới cho sản phẩm Up-Sells trên trang sản phẩm
+ Di chuyển sản phẩm Up-Sells lên phía trước Single Product.
add_action( ‘woocommerce_before_single_product’, ‘woocommerce_upsell_display’, 5 );
+ Xoá Button Add To Cart khỏi danh sách sản phẩm Up-Sells
Sử dụng CSS – Có lẽ đây là cách tốt & nhanh hơn :
.woocommerce .up-sells .product .add_to_cart_button.button{
display : none !important;
}
** Hoặc có thể tham khảo mã Code sau **
remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_upsell_display’, 15 );
add_action( ‘woocommerce_after_single_product_summary’, ‘custom_woocommerce_output_upsells’, 5 );
function custom_woocommerce_output_upsells() {
woocommerce_upsell_display( 4,4 );
// Display max 4 products, 4 per row
}}
+ Như vậy + , chúng ta có thể tạo một hiển thị mới bằng cách di chuyển Up-Sell Products tới một vị trí hiển thị tốt hơn và phù hợp. Đồng thời cũng có thể Xoá button “Add-to-cart” khỏi danh sách các sản phẩm Up-Sells. Một giao diện hiển thị mới phù hợp hơn đã được tạo ra, tạo cảm giác thoải mái cho khách hàng thăm Shop Online.
