Skip to main content

[Thủ Thuật WP] Tạo nút Mua Hàng Nhanh với Contact Form 7 trong WordPress

Đôi khi trong vài website WooCommerce bạn cần một button "Mua Hàng Nhanh" , khi click vào sẽ mở ngay popup form liên hệ như SĐT, Họ tên, Email...., sau đó submit và gửi nó đến email quản trị viên.

Vậy nên hướng dẫn dưới đây sẽ kết hợp Contact Form 7, WooCommerce để tạo button "Mua Hàng Nhanh" và gửi yêu cầu đó đến quản trị viên.

Bước 1 - Tạo Contact Form 7

1.1. Vào plugin Contact Form 7, tạo một Form lấy tên MuaHangNhanh.

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

<div class="form-modal">
  [text* hoten class:frm-class    placeholder "Vui lòng nhập Họ tên" ] </p>
  [email* email class:frm-class placeholder "Vui lòng nhập Email"]  </p>
  [tel* sdt class:frm-class placeholder "Vui lòng nhập SĐT"] </p>
  [text tensp class:frm-class id:frmtensp readonly] </p>
  [text giasp class:frm-class id:frmgiasp readonly] </p>
  [textarea noidung class:frm-class class:frm-textarea placeholder 
  "Hãy cho chúng tôi biết yêu cầu của bạn, chúng tôi sẽ tư vấn giúp bạn"] </p> 
  <p>Ngay sau khi nhận được thông tin. 
  Chúng tôi sẽ trả lời cho quý khách trong thời gian sớm nhất</p>
  <div class="plant-detail">
  [submit class:btn  class:detail-btn  "HOÀN TẤT ĐƠN HÀNG"]
  </div>
</div>

1.3. Bạn có thể thêm nhiều trường để lấy thêm thông tin ở đây, sau đó bạn save lại. Đã tạo thành công form mua hàng nhanh.

Bước 2 - Tạo popup Mua Hàng Nhanh

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

<?php
add_filter('woocommerce_product_tabs', 'product_enquiry_tab');
function product_enquiry_tab($tabs)
{
    $tabs['test_tab'] = array(
        'title'     => __('Mua Hàng Nhanh', 'woocommerce'),
        'priority'  => 50,
        'callback'  => 'product_enquiry_tab_form'
    );
    return $tabs;
}
function product_enquiry_tab_form()
{
    global $product;
?>
    <script>
        $(document).ready(function() {
            $(".dat-mua").click(function() {
                $("#modal-order").modal();
            });
        });
    </script>

    <div class="modal fade modal-order in" id="modal-order" aria-hidden="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body clearfix">
                    <button type="button" class="close" data-dismiss="modal" 
                    aria-hidden="true"><i class="fa fa-times"></i></button>
                    <div class="row">
                        <div class="col-xs-12 col-sm-6 col-md-6">
                            <div class="info-modal">
                     <?php the_post_thumbnail('full', array('class' => 'img-responsive center-block')); ?>
                    <p class="title-product1">Tên SP : 
                    <span class="title-product"> <?php the_title(); ?></span></p>
                    <div class="price-product">
                        <?php $giasp = $product->price; ?>
                        <p class="title-product1">Giá: <span class="clblu agiaa1" 
                        style="font-weight: bold;color: #089fb7;font-size: 26px;">
                        <?php echo $giasp; ?> VNĐ</span></p>
                        <div class="ratings">
                        </div>
                        <div class="hidden-xs">
                            <p><span><i class="fa fa-gift"></i> 
                                </span>Miễn phí giao hàng</p>
                            <p><span><i class="fa fa-motorcycle"></i> 
                                </span>Giao hàng toàn quốc.</p>
                            <p><span><i class="fa fa-recycle"></i> 
                                </span>Đổi trả trong 3 ngày, thủ tục đơn giản.</p>
                        </div>
                        <i class="visible-md visible-lg fa fa-arrow-circle-right"></i>
                    </div>
                    </div>
                </div>



                        <div class="col-xs-12 col-sm-6 col-md-6">

                            <?php echo do_shortcode('[contact-form-7 id="827" title="MuaHangNhanh"]') ?>

                        </div>
                    </div>
                </div>
                <script>
                    jQuery(document).ready(function($) {
                        var string = jQuery('span.title-product').text();
                        jQuery('#frmtensp').val(string.trim(string));
                        var string = jQuery('span.agiaa1').text();
                        jQuery('#frmgiasp').val(<?php echo $product->price ?> + ' VNĐ');
                    });
                </script>
            </div>
        </div>
    </div>

    <style>
        .title-product {
            text-transform: uppercase;
            color: #f7941d;
            font-size: 19px;
        }

        .datmua {
            font-size: 25px;

        }

        .detail-btn {
            background-color: #f7941d !important;
            color: #fff;
        }

        .plant-detail input {
            width: 100%;
        }

        .modal-order .info-modal i.fa.fa-arrow-circle-right {
            position: absolute;
            font-size: 44px;
            color: #F97422;
            background: #FFFFFF;
            border-radius: 50%;
            height: 38px;
            width: 37px;
            text-align: center;
            line-height: 37px;
            right: -25px;
            z-index: 5555;
            top: 50%;
            transform: translateY(-50%);
        }

        .form-modal input,
        .form-modal select,
        .form-modal textarea {
            width: 100%;
            padding: 13px 10px;
            font: 13px Arial;
            border: 1px solid #ebebeb;
            background: #fff;
        }

        .title-product1 {
            font-size: 19px;
        }

        .title-product {
            text-transform: uppercase;
            color: #f7941d;
            font-size: 19px;
        }

        .modal-body {
            position: relative;
            padding: 15px;
        }

        .modal-order .modal-content {
            border-radius: 0px;
            border: 7px solid #E6E6E6;
        }

        .modal-order .form-modal {
            padding: 20px;
            background: #f5f5f5;
        }
    </style>
<?php
}
?>

Lưu ý: Thay short code "[contact-form-7 id="827" title="MuaHangNhanh"]" bằng short code của bạn

2.2. Tiếp tục thêm button " Mua Hàng Nhanh"

<?php
add_action('woocommerce_after_add_to_cart_button', 'dev_quickbuy_after_addtocart_button');
function dev_quickbuy_after_addtocart_button()
{
?>
    <div class="col-xs-12 col-sm-12 col-md-6 text-center " style="background-color:#f7941d;">
        <a data-toggle="modal" href="#modal-order" class="datmua dat-mua">
            <i class="fa fa-shopping-basket"></i>Mua Hàng Nhanh</a>
    </div 
<?php
}
?>

Lưu ý: Các thẻ đóng <?php ?> cần phải đóng mở đúng cú pháp có thể báo lỗi.