Trong bài này mình sẽ hướng dẫn các bạn các thêm trường yêu cầu xuất hóa đơn VAT vào Woocommerce. Trường này cho phép điền tên công ty, mã số thuế và địa chỉ để chủ shop có thể viết hóa đơn đỏ cho khách hàng khi đơn hoàn thành.
Để làm được viết trên rất đơn giản. Bạn hãy làm tuần tự các bước sau nhé.
Bước 1: Thêm các trường cần thiết vào form checkout
Hãy thêm code dưới đây vào file functions.php của theme bạn đang sử dụng. Trong code đã có css và jquery rồi. Bạn có thể tự tách ra nhé
/* * Thêm lựa chọn xuất hóa đơn VAT vào checkout * Author: https://levantoan.com * */add_action('woocommerce_after_checkout_billing_form','devvn_xuat_hoa_don_vat');functiondevvn_xuat_hoa_don_vat(){?><style>.devvn_xuat_hoa_don_do { background: #eee; padding: 10px;border-radius: 3px; }.devvn_xuat_vat_wrap { display: none; }label.devvn_xuat_vat_input_label { display: block; cursor: pointer;margin-bottom: 0; }.devvn_xuat_vat_wrapfieldset { margin: 10px0; padding: 10px; background: transparent; border: 1pxsolid#b0aeae; }.devvn_xuat_vat_wrapfieldsetlegend { background: transparent; padding: 05px; margin: 00010px;font-size: 14px; display: inline; width: inherit; border: 0;text-transform: none; color: #000; }.devvn_xuat_vat_wrapfieldsetp {margin-bottom: 10px; }.devvn_xuat_vat_wrapfieldsetp:last-child {margin-bottom: 0; }.vat_active.devvn_xuat_vat_wrap { display: block; }</style><divclass="devvn_xuat_hoa_don_do"><labelclass="devvn_xuat_vat_input_label"><inputclass="devvn_xuat_vat_input"type="checkbox"name="devvn_xuat_vat_input"value="1">XuấthóađơnVAT</label><divclass="devvn_xuat_vat_wrap"><fieldset><legend>Thôngtinxuấthóađơn:</legend><pclass="form-row form-row-first"id="billing_vat_company_field"><labelfor="billing_vat_company"class="">Têncôngty<abbrclass="required"title="bắt buộc">*</abbr></label><inputtype="text"class="input-text "name="billing_vat_company"id="billing_vat_company"placeholder=""value=""></p><pclass="form-row form-row-last"id="billing_vat_mst_field"><labelfor="billing_vat_mst"class="">Mãsốthuế<abbrclass="required"title="bắt buộc">*</abbr></label><inputtype="text"class="input-text "name="billing_vat_mst"id="billing_vat_mst"placeholder=""value=""></p><pclass="form-row form-row-wide "id="billing_vat_companyaddress_field"><labelfor="billing_vat_companyaddress"class="">Địachỉ<abbrclass="required"title="bắt buộc">*</abbr></label><spanclass="woocommerce-input-wrapper"><inputtype="text"class="input-text "name="billing_vat_companyaddress"id="billing_vat_companyaddress"placeholder=""value=""></span></p></fieldset></div></div><scripttype="text/javascript"> (function ($) { $(document).ready(function(){function check_vat(){varparentVAT= $('input.devvn_xuat_vat_input').closest('.devvn_xuat_hoa_don_do');if($('input.devvn_xuat_vat_input').is(":checked")){parentVAT.addClass('vat_active');}else{parentVAT.removeClass('vat_active');}} check_vat(); $('input.devvn_xuat_vat_input').on('change',function(){ check_vat();});}); })(jQuery);</script><?php}Bước 2: Xác nhận dữ liệu khách nhập vào đã đủ hay chưa
Hãy thêm code dưới đây vào file functions.php của theme bạn đang sử dụng. Ngay sau đoạn code phía trên
add_action('woocommerce_checkout_process','vat_checkout_field_process');functionvat_checkout_field_process(){if (isset($_POST['devvn_xuat_vat_input']) &&!empty($_POST['devvn_xuat_vat_input'])) {if (empty($_POST['billing_vat_company'])) {wc_add_notice(__('Hãy nhập tên công ty'),'error'); }if (empty($_POST['billing_vat_mst'])) {wc_add_notice(__('Hãy nhập mã số thuế'),'error'); }if (empty($_POST['billing_vat_companyaddress'])) {wc_add_notice(__('Hãy nhập địa chỉ công ty'),'error'); } }}Bước 3: Lưu các giá trị khách nhập vào đơn hàng
Hãy thêm code dưới đây vào file functions.php của theme bạn đang sử dụng. Ngay sau đoạn code phía trên
add_action('woocommerce_checkout_update_order_meta','vat_checkout_field_update_order_meta');functionvat_checkout_field_update_order_meta($order_id){if (isset($_POST['devvn_xuat_vat_input']) &&!empty($_POST['devvn_xuat_vat_input'])) {update_post_meta($order_id,'devvn_xuat_vat_input',intval($_POST['devvn_xuat_vat_input']));if (isset($_POST['billing_vat_company']) &&!empty($_POST['billing_vat_company'])) {update_post_meta($order_id,'billing_vat_company', sanitize_text_field($_POST['billing_vat_company'])); }if (isset($_POST['billing_vat_mst']) &&!empty($_POST['billing_vat_mst'])) {update_post_meta($order_id,'billing_vat_mst', sanitize_text_field($_POST['billing_vat_mst'])); }if (isset($_POST['billing_vat_companyaddress']) &&!empty($_POST['billing_vat_companyaddress'])) {update_post_meta($order_id,'billing_vat_companyaddress', sanitize_text_field($_POST['billing_vat_companyaddress'])); } }}Bước 4: Hiển thị thông tin VAT trong đơn hàng
Hãy thêm code dưới đây vào file functions.php của theme bạn đang sử dụng. Ngay sau đoạn code phía trên
add_action('woocommerce_admin_order_data_after_shipping_address','devvn_after_shipping_address_vat',99);functiondevvn_after_shipping_address_vat($order){ $devvn_xuat_vat_input =get_post_meta($order->get_id(),'devvn_xuat_vat_input',true); $billing_vat_company =get_post_meta($order->get_id(),'billing_vat_company',true); $billing_vat_mst =get_post_meta($order->get_id(),'billing_vat_mst',true); $billing_vat_companyaddress =get_post_meta($order->get_id(),'billing_vat_companyaddress',true);?><p><strong>Xuấthóađơn:</strong><?phpecho($devvn_xuat_vat_input) ?'Có':'Không';?></p><?phpif($devvn_xuat_vat_input):?><p><strong>Thôngtinxuấthóađơn:</strong><br>Têncôngty:<?phpecho $billing_vat_company;?><br>Mãsốthuế:<?phpecho $billing_vat_mst;?><br>Địachỉ:<?phpecho $billing_vat_companyaddress;?><br></p><?phpendif;}Vậy là đã hoàn tất rồi nhé. Chúc các bạn thành công!
Nguồn: levantoan.com
