Web888.vn
  • Khám phá
  • Kiến thức công nghệ
    • Học lập trình
      • Lập trình C/C++
      • Lập trình HTML
      • Lập trình Javascript
        • ReactJS framework
        • AngularJS framework
      • Cơ sở dữ liệu
        • Micrsoft SQL Server
      • Lập trình PHP
    • WORDPRESS
      • WordPress cơ bản
      • WordPress nâng cao
      • Chia sẻ WordPress
    • Machine Learning
    • Marketing
      • Google Adwords
      • Facebook Ads
      • Kiến thức khác
    • Tin học văn phòng
      • Microsoft Word
      • Microsoft Excel
  • Kinh doanh online – MMO
    • Tiếp thị liên kết
    • Drop shipping
    • Google Adsense
    • Kiếm tiền youtube
    • Tiền điện tử
    • Thương mại điện tử
  • Chia sẻ IT
    • Chia sẻ phần mềm
    • Review công nghệ
    • Công cụ – tiện ích
      • Kiểm tra bàn phím online
      • Kiểm tra webcam online
  • Kỹ năng sống
Đăng nhập
  • Đăng nhập / Đăng ký

Please enter key search to display results.

Home
  • Wordpress nâng cao
Hướng dẫn thêm, cập nhật, xóa trường (fields) vào checkout woocommerce

Hướng dẫn thêm, cập nhật, xóa trường (fields) vào checkout woocommerce

  • 13-05-2022
  • Toanngo92
  • 0 Comments

Hôm nay mình có một dự án cần bổ sung trường vào checkout woocommerce, nếu sửa trực tiếp core thì không nói, mỗi lần update mất code là hết hơi nên tiện mình viết lại luôn để các bạn về sau tiết kiệm thời gian nghiên cứu.

Docs: https://woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/

Giải thích nôm na là bên trong trang checkout của woocommerce thông thường, sẽ có 2 cột chứa danh sách các trường input, cột dầu tiên là billing, cột thứ 2 là shipping address. Toàn bộ chúng được lưu trữ trong một biến mảng, chúng ta có thể thêm, cập nhật, xóa các trường để bổ sung các input cho form woocommerce bằng cách sử dụng hàm:



add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');
function custom_override_checkout_fields($fields)
{
/* todo, biến fields là biến mảng có cấu trúc, bên trong là các phần tử billing,shipping,account,order và các phần tử này lại là các mảng con, mô tả cấu trúc của các fields nhập liệu khi người dùng checkout */
}

nếu dump biến $fields được hứng thông qua filter sẽ được cấu trúc như sau:

array(4) {
  ["billing"]=>
  array(11) {
    ["billing_first_name"]=>
    array(5) {
      ["label"]=>
      string(4) "Tên"
      ["required"]=>
      bool(true)
      ["class"]=>
      array(1) {
        [0]=>
        string(14) "form-row-first"
      }
      ["autocomplete"]=>
      string(10) "given-name"
      ["priority"]=>
      int(10)
    }
    ["billing_last_name"]=>
    array(5) {
      ["label"]=>
      string(4) "Họ"
      ["required"]=>
      bool(true)
      ["class"]=>
      array(1) {
        [0]=>
        string(13) "form-row-last"
      }
      ["autocomplete"]=>
      string(11) "family-name"
      ["priority"]=>
      int(20)
    }
    ["billing_company"]=>
    array(5) {
      ["label"]=>
      string(13) "Tên công ty"
      ["class"]=>
      array(1) {
        [0]=>
        string(13) "form-row-wide"
      }
      ["autocomplete"]=>
      string(12) "organization"
      ["priority"]=>
      int(30)
      ["required"]=>
      bool(false)
    }
    ["billing_country"]=>
    array(6) {
      ["type"]=>
      string(7) "country"
      ["label"]=>
      string(16) "Country / Region"
      ["required"]=>
      bool(true)
      ["class"]=>
      array(3) {
        [0]=>
        string(13) "form-row-wide"
        [1]=>
        string(13) "address-field"
        [2]=>
        string(23) "update_totals_on_change"
      }
      ["autocomplete"]=>
      string(7) "country"
      ["priority"]=>
      int(40)
    }
    ["billing_address_1"]=>
    array(6) {
      ["label"]=>
      string(12) "Địa chỉ"
      ["placeholder"]=>
      string(12) "Địa chỉ"
      ["required"]=>
      bool(true)
      ["class"]=>
      array(2) {
        [0]=>
        string(13) "form-row-wide"
        [1]=>
        string(13) "address-field"
      }
      ["autocomplete"]=>
      string(13) "address-line1"
      ["priority"]=>
      int(50)
    }
    ["billing_address_2"]=>
    array(5) {
      ["placeholder"]=>
      string(39) "Apartment, suite, unit, etc. (optional)"
      ["class"]=>
      array(2) {
        [0]=>
        string(13) "form-row-wide"
        [1]=>
        string(13) "address-field"
      }
      ["autocomplete"]=>
      string(13) "address-line2"
      ["priority"]=>
      int(60)
      ["required"]=>
      bool(false)
    }
    ["billing_postcode"]=>
    array(6) {
      ["label"]=>
      string(16) "Mã bưu điện"
      ["required"]=>
      bool(false)
      ["class"]=>
      array(2) {
        [0]=>
        string(13) "form-row-wide"
        [1]=>
        string(13) "address-field"
      }
      ["validate"]=>
      array(1) {
        [0]=>
        string(8) "postcode"
      }
      ["autocomplete"]=>
      string(11) "postal-code"
      ["priority"]=>
      int(65)
    }
    ["billing_city"]=>
    array(5) {
      ["label"]=>
      string(21) "Tỉnh / Thành phố"
      ["required"]=>
      bool(true)
      ["class"]=>
      array(2) {
        [0]=>
        string(13) "form-row-wide"
        [1]=>
        string(13) "address-field"
      }
      ["autocomplete"]=>
      string(14) "address-level2"
      ["priority"]=>
      int(70)
    }
    ["billing_state"]=>
    array(9) {
      ["type"]=>
      string(5) "state"
      ["label"]=>
      string(12) "Bang / Hạt"
      ["required"]=>
      bool(false)
      ["class"]=>
      array(2) {
        [0]=>
        string(13) "form-row-wide"
        [1]=>
        string(13) "address-field"
      }
      ["validate"]=>
      array(1) {
        [0]=>
        string(5) "state"
      }
      ["autocomplete"]=>
      string(14) "address-level1"
      ["priority"]=>
      int(80)
      ["country_field"]=>
      string(15) "billing_country"
      ["country"]=>
      string(2) "VN"
    }
    ["billing_phone"]=>
    array(7) {
      ["label"]=>
      string(20) "Số điện thoại"
      ["required"]=>
      bool(true)
      ["type"]=>
      string(3) "tel"
      ["class"]=>
      array(1) {
        [0]=>
        string(13) "form-row-wide"
      }
      ["validate"]=>
      array(1) {
        [0]=>
        string(5) "phone"
      }
      ["autocomplete"]=>
      string(3) "tel"
      ["priority"]=>
      int(100)
    }
    ["billing_email"]=>
    array(7) {
      ["label"]=>
      string(18) "Địa chỉ email"
      ["required"]=>
      bool(true)
      ["type"]=>
      string(5) "email"
      ["class"]=>
      array(1) {
        [0]=>
        string(13) "form-row-wide"
      }
      ["validate"]=>
      array(1) {
        [0]=>
        string(5) "email"
      }
      ["autocomplete"]=>
      string(14) "email username"
      ["priority"]=>
      int(110)
    }
  }
  ["shipping"]=>
  array(9) {
    ["shipping_first_name"]=>
    array(5) {
      ["label"]=>
      string(4) "Tên"
      ["required"]=>
      bool(true)
      ["class"]=>
      array(1) {
        [0]=>
        string(14) "form-row-first"
      }
      ["autocomplete"]=>
      string(10) "given-name"
      ["priority"]=>
      int(10)
    }
    ["shipping_last_name"]=>
    array(5) {
      ["label"]=>
      string(4) "Họ"
      ["required"]=>
      bool(true)
      ["class"]=>
      array(1) {
        [0]=>
        string(13) "form-row-last"
      }
      ["autocomplete"]=>
      string(11) "family-name"
      ["priority"]=>
      int(20)
    }
    ["shipping_company"]=>
    array(5) {
      ["label"]=>
      string(13) "Tên công ty"
      ["class"]=>
      array(1) {
        [0]=>
        string(13) "form-row-wide"
      }
      ["autocomplete"]=>
      string(12) "organization"
      ["priority"]=>
      int(30)
      ["required"]=>
      bool(false)
    }
    ["shipping_country"]=>
    array(6) {
      ["type"]=>
      string(7) "country"
      ["label"]=>
      string(16) "Country / Region"
      ["required"]=>
      bool(true)
      ["class"]=>
      array(3) {
        [0]=>
        string(13) "form-row-wide"
        [1]=>
        string(13) "address-field"
        [2]=>
        string(23) "update_totals_on_change"
      }
      ["autocomplete"]=>
      string(7) "country"
      ["priority"]=>
      int(40)
    }
    ["shipping_address_1"]=>
    array(6) {
      ["label"]=>
      string(12) "Địa chỉ"
      ["placeholder"]=>
      string(12) "Địa chỉ"
      ["required"]=>
      bool(true)
      ["class"]=>
      array(2) {
        [0]=>
        string(13) "form-row-wide"
        [1]=>
        string(13) "address-field"
      }
      ["autocomplete"]=>
      string(13) "address-line1"
      ["priority"]=>
      int(50)
    }
    ["shipping_address_2"]=>
    array(5) {
      ["placeholder"]=>
      string(39) "Apartment, suite, unit, etc. (optional)"
      ["class"]=>
      array(2) {
        [0]=>
        string(13) "form-row-wide"
        [1]=>
        string(13) "address-field"
      }
      ["autocomplete"]=>
      string(13) "address-line2"
      ["priority"]=>
      int(60)
      ["required"]=>
      bool(false)
    }
    ["shipping_postcode"]=>
    array(6) {
      ["label"]=>
      string(16) "Mã bưu điện"
      ["required"]=>
      bool(false)
      ["class"]=>
      array(2) {
        [0]=>
        string(13) "form-row-wide"
        [1]=>
        string(13) "address-field"
      }
      ["validate"]=>
      array(1) {
        [0]=>
        string(8) "postcode"
      }
      ["autocomplete"]=>
      string(11) "postal-code"
      ["priority"]=>
      int(65)
    }
    ["shipping_city"]=>
    array(5) {
      ["label"]=>
      string(21) "Tỉnh / Thành phố"
      ["required"]=>
      bool(true)
      ["class"]=>
      array(2) {
        [0]=>
        string(13) "form-row-wide"
        [1]=>
        string(13) "address-field"
      }
      ["autocomplete"]=>
      string(14) "address-level2"
      ["priority"]=>
      int(70)
    }
    ["shipping_state"]=>
    array(9) {
      ["type"]=>
      string(5) "state"
      ["label"]=>
      string(12) "Bang / Hạt"
      ["required"]=>
      bool(false)
      ["class"]=>
      array(2) {
        [0]=>
        string(13) "form-row-wide"
        [1]=>
        string(13) "address-field"
      }
      ["validate"]=>
      array(1) {
        [0]=>
        string(5) "state"
      }
      ["autocomplete"]=>
      string(14) "address-level1"
      ["priority"]=>
      int(80)
      ["country_field"]=>
      string(16) "shipping_country"
      ["country"]=>
      string(2) "VN"
    }
  }
  ["account"]=>
  array(0) {
  }
  ["order"]=>
  array(1) {
    ["order_comments"]=>
    array(4) {
      ["type"]=>
      string(8) "textarea"
      ["class"]=>
      array(1) {
        [0]=>
        string(5) "notes"
      }
      ["label"]=>
      string(20) "Ghi chú đơn hàng"
      ["placeholder"]=>
      string(107) "Ghi chú về đơn hàng, ví dụ: thời gian hay chỉ dẫn địa điểm giao hàng chi tiết hơn."
    }
  }
}

Woocommerce dựng sẵn và cập nhật lại biến fields bằng cách bổ sung phần tử hoặc cập nhật lại phần tử có sẵn . Ví dụ code mẫu như sau để bổ sung một trường có label birthday và type bằng date để người dùng có thể chọn ngày tháng năm:

// Hook in
add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields($fields)
{
    // add birthday fields
    $fields['billing']['birthday'] = array(
        'label'     => __('Birthday', 'woocommerce'), // nội dung text thẻ label cho input
        'type'      => 'date', // type của input
        'required'  => false, // trường required hay không
        'class'     => array('form-row-wide'), // class html trong input
        'clear'     => true
    );
    return $fields;
}

Sau khi bổ sung trường, khi update chúng ta sẽ cần lưu dữ liệu vào custom field trong CSDL cho order

/**
 * Update the order meta with field value
 */
add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta' );

function my_custom_checkout_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['birthday'] ) ) {
        update_post_meta( $order_id, 'birthday', sanitize_text_field( $_POST['birthday'] ) );
    }
}

Sau khi đã có dữ liệu trong CSDL, dùng code sau để hiển thị ra backend order

/**
 * Display field value on the order edit page
 */
add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );

function my_custom_checkout_field_display_admin_order_meta($order){
    echo '<p><strong>'.__('Sinh nhật').':</strong> ' . get_post_meta( $order->id, 'birthday', true ) . '</p>';
}

Ngoài ra, nếu muốn hiển thị dữ liệu ở quickview order trong backend, tham khảo code sau:

/**
 * Add to quickview order
 */

add_filter( 'woocommerce_admin_order_preview_get_order_details', 'admin_order_preview_add_custom_billing_data', 10, 2 );
function admin_order_preview_add_custom_billing_data( $data, $order ) {
    $custom_billing_data = []; // initializing

    // Custom field 1: Replace '_custom_meta_key1' by the correct custom field metakey
    if( $custom_value1 = $order->get_meta('birthday') ) {
        $custom_billing_data[] = $custom_value1;
    }

    ## ……… And so on (for each additional custom field).

    // Check that our custom fields array is not empty
    if( count($custom_billing_data) > 0 ) {
        // Converting the array in a formatted string
        $formatted_custom_billing_data = implode( '<br>', $custom_billing_data );

        if( $data['formatted_billing_address'] === __( 'N/A', 'woocommerce' ) ) {
            $data['formatted_billing_address'] = $formatted_custom_billing_data;
        } else {
            $data['formatted_billing_address'] .= '<br>' .'<strong>Sinh nhật</strong>'. $formatted_custom_billing_data;
        }
    }

    return $data;
}

Code trên tham khảo tại: https://stackoverflow.com/questions/57846511/show-custom-fields-in-woocommerce-quick-order-preview

Chúc bạn thành công !

Bài viết liên quan:

Hướng dẫn cài đặt WP-CLI sử dụng trong xampp hoặc wampp môi trường windows
Hướng dẫn thay đổi thư mục theme wordpress không bị mất cấu hình theme
Tích hợp facebook chat vào website wordpress đơn giản
Tổng hợp các tham số post query để lấy bài viết từ CSDL wordpress
Tạo Gmail STMP và cài đặt cho website WordPress, Laravel, php…
Cài đặt chuyển đổi sự kiện contact form 7 cho google adwords & google analytics bằng tag manager
Tạo iframe youtube responsive đơn giản cho website wordpress
Khắc phục lỗi “thiếu thư mục tạm thời” trong WordPress

THÊM BÌNH LUẬN Cancel reply

Dịch vụ thiết kế Wesbite

NỘI DUNG MỚI CẬP NHẬT

Mảng trong C (array), mảng một chiều, mảng đa chiều

Hướng dẫn cài đặt Microsoft SQL Server và kết nối CSDL từng bước cho người mới

Vòng lặp trong C – các cấu trúc vòng lặp for, while, do while

Điều kiện trong C – các cấu trúc điều kiện if/else, switch case

Các lệnh rẽ nhánh vô điều kiện trong C – return, goto, break, continue, hàm exit

Giới thiệu

web888.vn là chuyên trang chia sẻ và cập nhật tin tức công nghệ, chia sẻ kiến thức, kỹ năng. Chúng tôi rất cảm ơn và mong muốn nhận được nhiều phản hồi để có thể phục vụ quý bạn đọc tốt hơn !

Liên hệ quảng cáo: [email protected]

Kết nối với web888

© web888.vn - Tech888 Co .Ltd since 2019

Đăng nhập

Trở thành một phần của cộng đồng của chúng tôi!
Registration complete. Please check your email.
Đăng kýBạn quên mật khẩu?

Create an account

Welcome! Register for an account
The user name or email address is not correct.

Your personal data will be used to support your experience throughout this website, to manage access to your account, and for other purposes described in our privacy policy.

Registration confirmation will be emailed to you.
Log in Lost your password?

Reset password

Recover your password
Password reset email has been sent.
The email could not be sent. Possible reason: your host may have disabled the mail function.
A password will be e-mailed to you.
Log in Register
×