1BANNER 123
5/5 - (9 bình chọn)

Mình nhận được khá là nhiều câu hỏi về việc làm cách nào để hiển thị được lựa chọn số lượng sản phẩm ra ngoài trang chủ, shop page hoặc các sản phẩm liên quan.

Hôm nay mình sẽ chia sẻ đoạn code để có thể thực hiện được việc này.

Cách để override loop template và hiển thị nút quantity ở shop page.

Chức năng override sẽ giúp bạn ghi đè lên bất kì một file nào có trong template của theme. Và những chức năng ghi đè này sẽ không bị mất khi theme của bạn được update lên bảng mới nhất. Về việc override mình sẽ viết một bài chi tiết hơn khi có thời gian nhé. Trong giới hạn bài viết này mình chỉ có thể chia sẻ cho bạn đoạn code để thêm button quantity ở shop page, trang chủ thôi.

Bạn có thể dán đoạn code này ngay trong file funciton.php của childtheme nhé.

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        $html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
        $html .= woocommerce_quantity_input( array(), $product, false );
        $html .= '<button type="submit" class="button alt">' . esc_html( $product-&gt;add_to_cart_text() ) . '</button>';
        $html .= '</form>';
    }
    return $html;
}

Với đoạn code này sẽ hiển thị ra ngoài trang chủ và shop page như sau

Thêm button quantity vào sản phẩm ở shop page.

VD trên là mình đã css sơ sơ để button được đẹp hơn, bạn có thể css theo ý mình nếu thích.

Hi vọng với bài viết này sẽ giúp bạn giải quyết được các vấn đề mà mình đang gặp phải. Có bất kì câu hỏi nào các bạn hãy gửi về cho mình nhé, mình sẽ giải quyết chúng một cách nhanh nhất có thể. Dĩ nhiên là trong tầm hiểu biết của mình.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *