Kết hợp Contact 7 với nút đặt hàng WooCommerce

Chào mừng các bạn đến với Cam Ranh Media. Chuyện là gần đây có một vài bạn đặt câu hỏi như sau: “Cách làm thế nào để khi click vào nút MUA NGAY hiển ra popup form thông tin”. Cụ thể ra sao và cách làm như thế nào. Mời bạn tham khảo qua bài viết Kết hợp Contact Form 7 với nút đặt hàng WooCommerce.

Quan tâm nhiều: Hosting WordPress load nhanh nhất hiện nay

Nội dung câu hỏi của một bạn trên FB

Hướng dẫn Kết hợp Contact Form 7 với nút đặt hàng WooCommerce

Bước 1:

+ Tạo một Form 7 đặt tên sao cho bạn dễ nhớ. Ở đây, mình sẽ lấy tên Form WooCommerce.

+ Soạn thảo nội dung trong form như code dưới đây

<div class="form-woocommerce">

<p style="color: green;font-weight: bold;font-size: 20px;">ĐĂNG KÝ MUA HÀNG NHANH</p>

[text your-subject class:product_name]


[text* text-512 placeholder "Họ và tên"]

[tel* tel-165 placeholder "Số điện thoại"]

[text* text-513 placeholder "Email"]

[submit "Đăng Ký"]

</div>

Giải nghĩa: Những phần kia chắc bạn đã biết nên mình chỉ nói mục dưới thôi

+ [text your-subject class:product_name] : Tự get tên sản phẩm khi bạn đang mua SP bất kỳ.

 

Bước 2:

Mở file functions.php của theme đang dùng lên và thêm đoạn code dưới đây

+ Code dưới này là thêm vào tab nhé!

add_filter( 'woocommerce_product_tabs', 'product_enquiry_tab' );
function product_enquiry_tab( $tabs ) {

    $tabs['test_tab'] = array(
        'title'     => __( 'Enquire about Product', 'woocommerce' ),
        'priority'  => 50,
        'callback'  => 'product_enquiry_tab_form'
    );

    return $tabs;

}
function product_enquiry_tab_form() {
    global $product;
    //If you want to have product ID also
    //$product_id = $product->id;
    $subject    =   "Enquire about ".$product->post->post_title;

    echo "<h3>".$subject."</h3>";
    echo do_shortcode('[contact-form-7 404 "Not Found"]'); //add your contact form shortcode here ..

    ?>

    <script>
    (function($){
        $(".product_name").val("<?php echo $subject; ?>");
    })(jQuery);
    </script>   
    <?php   
}
    ?>

Lưu ý: Thay dòng [contact-form-7 404 "Not Found"] sang form của bạn.

+ Code dưới này là thêm nút MUA NGAY nè nhưng chưa có tích hợp đâu!

add_action('woocommerce_after_add_to_cart_button','hdev_quickbuy_after_addtocart_button');
 function hdev_quickbuy_after_addtocart_button(){
     global $product;
     global $post;
     ?>
     <div class="custorm_quickbuy"><a href="?quick_buy=1&add-to-cart=<?php echo $post->ID ;?>" class="qn_btn">Mua ngay</a></div>
 
   <?php endif;?>
}

+ Code dưới này là tạo hiệu ứng popup không cần Plugin. Và tích hợp MUA NGAY luôn nè!

add_action('woocommerce_after_add_to_cart_button','hdev_quickbuy_after_addtocart_button');      function hdev_quickbuy_after_addtocart_button(){ 
global $product;
global $post;
?>
<div class="custorm_quickbuy"><a href="?quick_buy=1&add-to-cart=<?php echo $post->ID ;?>" class="qn_btn">Mua ngay</a></div>


<div id="popupcr"> <div class="popup">[contact-form-7 404 "Not Found"] <p style="text-align: right;"><a class="close" href="#close" title="Close" style="background: black;color: white;padding: 10px;border-radius: 30px;">ĐÓNG</a></p> </div> <a class='popup-close' href='#close' title="Close"></a> </div> <p style="text-align: center;"> <a class="qn_btn" href="#popupcr">MUA NGAY</a></p>

<?php endif;?>
}

Mời bạn xem thêm bài viết tạo popup từ Contact Form 7 WordPress đơn giản. Để lấy đoạn CSS hiển thị popup siêu nhẹ và đơn giản cho website bạn nè.

Note: Bạn nào muốn chỉnh code thẳng vào trang sản phẩm thì tìm file product.php trong WooCommerce của theme nhé!

Lời kết

Cũng khá là đơn giản thôi các bạn à. Nên đọc kỹ trước khi sử dụng nhé, kẻo copy nhầm thì toang đấy. Chúc các bạn thành công.

Dịch vụ tiêu biểu
Xem chi tiết
THÔNG TIN THÊM

Quảng cáo

Nhận Mã Giảm Giá Hosting

Tư Vấn Dịch Vụ

CÓ THỂ BẠN QUAN TÂM

Cách điều trị mụn tận gốc từ bên trong không tái phát

...

Phương pháp công nghệ trị mụn tốt nhất hiện nay

...

Spa mỹ viện điều trị mụn uy tín giá rẻ nhất hiện nay

...

Top 5 cách điều trị mụn hiệu quả tại nhà

...

Đánh giá Hosting TinoHost chất lượng năm 2021?

...

Bạn cần tìm người thiết kế website ở Khánh Hòa

...

Review TINOHOST có thực sự tốt như lời đồn?

...

Review sơn Dulux với Jotun loại nào tốt hơn

...

Có nên phun môi Collagen không?

...
Chào bạn! Bạn cần tư vấn hãy gửi tin nhắn nhé!