Chào cả nhà, hôm nay nam hướng dẫn thêm nút số lượng và thêm giỏ hàng trong woocommerce nhé
Bạn coppy code này rồi thêm vào file function.php nhé
//Tạo cấu trúc html gồm chọn số lượng và nút add to cart
function isures_custom_quantity_field_archive()
{
global $product;
if ($product->is_type('simple')) {
echo '<div class="isures-custom--qty_wrap">';
echo '<div class="isures-qtv--wrap">';
woocommerce_quantity_input(array('min_value' => 1, 'max_value' => $product->backorders_allowed() ? '' : $product->get_stock_quantity()));
echo '</div>';
woocommerce_template_loop_add_to_cart();
echo '</div>';
}
}
add_action('woocommerce_after_shop_loop_item_title', 'isures_custom_quantity_field_archive', 15, 9);
//Làm đẹp code tạo field số lượng và nút add to cart với vài dòng css
add_action('wp_footer', 'isures_quantity_reg_style');
function isures_quantity_reg_style()
{
?>
<style>
.isures-custom--qty_wrap {
/* display: flex;
align-items: center;
justify-content: space-between; */
}
.isures-custom--qty_wrap .ajax_add_to_cart {
font-size: 12px;
margin: 0;
padding: 10px 15px;
min-height: auto;
line-height: 1.5;
}
</style>
<?php
}
//Js xử lý field số lượng khi thay đổi.
function isures_custom_add_to_cart_quantity_handler()
{
wc_enqueue_js('
jQuery( "body" ).on( "click", ".quantity input", function() {
return false;
});
jQuery( "body" ).on( "change input", ".quantity .qty", function() {
var add_to_cart_button = jQuery( this ).parents( ".product" ).find( ".add_to_cart_button" );
add_to_cart_button.attr( "data-quantity", jQuery( this ).val() );
add_to_cart_button.attr( "href", "?add-to-cart=" + add_to_cart_button.attr( "data-product_id" ) + "&quantity=" + jQuery( this ).val() );
});
');
}
add_action('init', 'isures_custom_add_to_cart_quantity_handler');
Chúc các bạn thành công và đây là kết quả