2335 lượt xem

Truyền tiêu đề sản phẩm vào ContacForm 7

Như chúng ta đã biết để có một website bán hàng thì chắc chắn các bạn đã từng tìm hiểu và từng cài đặt plugin Woocommerce . Nhưng các bạn không muốn sử dụng trang thanh toán của Plugin này.

Vì vậy các bạn có nghĩ cách để sử dụng ContactForm 7 để vừa thu thập dữ liệu khách hàng. Từ đó có thể lên chương trình Marketing cho các kênh Facebook, Google ads hoặc gọi điện thoại qua telesale.

Vậy chúng tôi hướng dẫn các bạn cài đặt để biết khách hàng đang điền form và có ý định mua sản phẩm nào.

Tạo 1 form mua hàng bằng Contact Form 7

Các bạn tạo cho mình 1 Form như mong muốn. Còn mình sẽ tạo 1 Form đơn giản.

tao form trong contact form 7
Tạo form mua hàng

Các bạn chú ý bắt buộc phải có cái id title_product nhé.

Tiếp theo bạn thêm đoạn code dưới này vào file Function nhé.

add_action('woocommerce_after_add_to_cart_button','btn_muahang_cf7');
function btn_muahang_cf7(){
    echo '<a href="#muangaycf7" class="btn-pttuan-custom">Mua ngay CF7</a>';
    echo do_shortcode('[lightbox id="muangaycf7" width="600px" padding="20px"][contact-form-7 id="1838" title="Form mua hàng"][/lightbox]');
}

Các bạn thêm chút CSS vào file style.css nhé.

.btn-pttuan-custom{
   display: block;
    padding: 8px 10px;
    background: red;
    color: #fff;
    text-align: center;
}
form mua hang cf7
Form mua hàng với CF7

Khi kích vào Mua ngay CF7 thì sẽ ra popup như sau.

form mua hang bang cf7
pop up mua hàng

Để nó hiện được Title sản phẩm thì các bạn thêm đoạn code này vào

add_action('wp_footer','js_add_title_pttuan');
function js_add_title_pttuan(){
if(is_product()){;?>
    <script>
        jQuery(document).ready(function($){
            $('.btn-pttuan-custom').click(function (){
                var title = $('h1').text();
                console.log(title);
                $('#title_product').val(title);
            });
        });
    </script>
<?php };
}

Và kết quả

them title vao cf7

Nếu các bạn muốn sử dụng Form này ở trang của hàng hay trang chủ thì các bạn sử dụng đoạn code này

add_action('woocommerce_after_shop_loop_item','btn_muahang_cf7');

Và thêm đoạn code này vào file function.php

add_action('wp_footer','js_add_title_pttuan_shop');
function js_add_title_pttuan_shop(){
if(!is_product()){;?>
    <script>
        jQuery(document).ready(function($){
            $('.btn-pttuan-custom').click(function (){
                var title = $(this).parents('.product-small').find('.woocommerce-LoopProduct-link').text();
                console.log(title);
                $('#title_product').val(title);
            });
        });
    </script>
<?php };
}

Nguồn: https://pttuan410.com/huong-dan-cach-truyen-tieu-de-san-pham-vao-contact-form-7

4.9/5 - (37 bình chọn)