Tạo nút đặt hàng đổ đơn hàng với contact form 7

Giỏ hàng trong woocommerce có 4 bước phù hợp với shop hàng nước ngoài nhưng ở việt nam nó thể hiện sự bất cập đối với 1 vài cửa hàng nhỏ .Với yêu cầu chỉ 1 bước để phù hợp với shop nhỏ thì việc thiết kế form hàng 1 bước cực kì quan trọng

Để có thể làm form đặt hàng 1 bước chúng ta cần các code như sau :

  • Plugin woocommerce
  • Plugin Contact Form 7
  • Plugin  WP-Mail-SMTP

Bước 1 các bạn tạo 1 form contact form 7 đơn giản như của mình

<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>

Ok vậy là xong bước 1 .Ở đây bạn có thể cho thêm nhiều giá trị hơn nữa

Bước 2 : Cấu hình email gửi đi

Bạn vào settings->email  và cấu hình email gửi đi để mỗi khi có khách đặt hàng sẽ có email báo về cho chúng ta

Bước 3 : Code modal để tạo pop up đặt hàng cho người dùng

Dưới đây là đoạn code trong file simple.php ở mục add-to-cart trong woocommerce

<?php 
global $product;
// thêm nút mua hàng
//var_dump($product);

?>

 <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> Đặt mua</a></div>
	<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="Untitled"]') ?>
		
                    </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(string.trim(string));
					
				  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>

Vậy là đã xong giờ khách vào đặt hàng sẽ hiện ra pop up đặt hàng sau khi khách điền đẩy đủ thì sẽ báo qua email cho chúng ta đơn hàng của khách .Sản phẩm demo sẽ được tạo sớm để các bạn xem qua .xin chào và hẹn gặp lại các bạn

 

 

Be the first to comment

Leave a Reply

Your email address will not be published.


*