Thủ thuật dưới đây Zubi Cloud hướng dẫn người dùng thiết kế WordPress chuyên nghiệp, Cách thêm sản phẩm Upsell bên dưới nút “Thêm vào Giỏ” trong WooCommerce.

Tôi lý giải, cách code thêm sản phẩm Upsell bên dưới nút “Thêm vào Giỏ” trong WooCommerce như sau:

ở đây chúng tôi xóa bỏ phần Upsell mặc định của WooCommerce (thông thường phần Upsell mặc định nó sẽ nằm trên phần Sản phẩm liên quan)

Sau khi xóa bỏ phần Upsell mặc định, đội ngũ Zubi Cloud help đã tiến hành thêm phần Upsells mới vào phía dưới nút “Thêm vào Giỏ” hoặc “Add to cart”.

Ngoài ra, chúng tôi cũng đã giúp quý khách CSS lại cho đẹp hơn. và chúng ta hãy xem thành quả phía dưới.

Các bước hướng dẫn thêm sản phẩm Upsell bên dưới nút “Thêm vào Giỏ” trong WooCommerce như sau:

Chèn đoạn code sau vào file Functions.php trong Theme WordPress bạn đang sử dụng

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_upsell_display', 39 );

add_filter( 'woocommerce_upsell_display_args', 'bbloomer_change_number_related_products', 9999 );
function bbloomer_change_number_related_products( $args ) {
$args['posts_per_page'] = 2;
$args['columns'] = 1; 
return $args;
}

/**
* Thêm thẻ bao quanh ảnh sản phẩm
**/
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
function woocommerce_template_loop_product_thumbnail() {
echo "<div class='zubi-product-img-box'>";
echo woocommerce_get_product_thumbnail();
echo "</div>";
}
}

Tiếp theo hãy chèn đoạn CSS vào Style của bạn.

section.up-sells.upsells.products .zubi-product-img-box {
float: left;
max-width: 70px;
height: 70px;
overflow: hidden;
width: 100%;
border-radius: 3px;
margin: 0px 15px 0 0;
}
section.up-sells.upsells.products h2.woocommerce-loop-product__title {
font-weight: 600;
color: #2f2477;
font-size: 14px !important;
margin: 0px 0 3px 0 !important;
padding: 0 !important;
clear: inherit !important;
text-transform: none !important;
border: none !important;
}
section.up-sells.upsells.products ul li {
text-align: left !important;
margin: 0 0 10px 0;
padding: 0 0 10px 0;
border-bottom: 1px solid #eee;
}
section.up-sells.upsells.products ul li:last-child {
border-bottom: none;
}
section.up-sells.upsells.products h2 {
font-size: 15px;
font-weight: 600;
color: #2f2477;
margin: 0 0 10px 0;
text-transform: uppercase;
border-top: 1px solid #ddd;
padding: 10px 0 0 0;
}