Tag Archives: add to cart woocommerce

Di chuyển nút add to cart đến sát phần giá sản phẩm trong Woocommerce

Di chuyen nut add to cart Woocommerce

Trong trang single product page, Woocommerce mặc định sẽ trình bày “tên sản phẩm – product tittle” => “giá sản phẩm” => “mô tả ngắn” => “add to cart – thêm vào giỏ hàng”. Cách bố trí này có vẻ không dễ dùng & tiện bằng cách đưa nút “add to cart” lên sát với giá sản phẩm.

Để xử lý vấn đề này, có 1 cách rất đơn giản là chúng ta thay đổi trật tự ưu tiên thực thi nút “add to cart” như sau: Remove action rồi re-add lại với priority phù hợp như sau:

 /** woocommerce: change position of add-to-cart on single product **/
    remove_action( 'woocommerce_single_product_summary', 
               'woocommerce_template_single_add_to_cart', 30 );
    add_action( 'woocommerce_single_product_summary', 
            'woocommerce_template_single_add_to_cart', 9 ); 

Kết quả có được như sau: 

Di chuyen nut add to cart Woocommerce

Xem thêm: Trật tự xử lý các actions trong page sản phẩm:

 /**
         * woocommerce_single_product_summary hook
         *
         * @hooked woocommerce_template_single_title - 5
         * @hooked <strong>woocommerce_template_single_price - 10 => đưa add to cart vào sát phần này
         * @hooked woocommerce_template_single_excerpt - 20
         * @hooked woocommerce_template_single_add_to_cart - 30
         * @hooked woocommerce_template_single_meta - 40
         * @hooked woocommerce_template_single_sharing - 50
         */ 

Ref: https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

https://wordpress.stackexchange.com/questions/114734/how-to-customize-position-of-add-to-cart-of-woocommerce-on-product-page