No Code Building
  • LIÊN HỆ
  • TÀI CHÍNH
  • GIẢI TRÍ
  • CUỘC SỐNG
  • CÔNG NGHỆ
  • WORDPRESS
No Result
View All Result
No Code Building
  • LIÊN HỆ
  • TÀI CHÍNH
  • GIẢI TRÍ
  • CUỘC SỐNG
  • CÔNG NGHỆ
  • WORDPRESS
No Result
View All Result
No Code Building
No Result
View All Result
Home WordPress

Tạo form lấy dữ liệu Checkout field bằng thông số URL (Pre-Populate Checkout Form Fields Using URL Parameters)

in WordPress
0
Hiển thị Giá khuyến mãi trước Giá bán thông thường trong Woocommerce (Display Sale price before Regular price)
211
SHARES
1.2k
VIEWS
Share on FacebookShare on Twitter

Bạn muốn tạo form chứa các trường dữ liệu của trang Thanh toán Checkout Page? Trong bài viết này, mình sẽ hướng dẫn bạn thực hiện điều đó bằng Elementor Pro với widget Form.

Để thực hiện được, bạn cần thao tác đầy đủ 3 bước:

1. Chèn code liên kết dữ liệu giữa form và Checkout fields

Đoạn code minh họa áp dụng cho các trường first_name, last_name và email. Bạn có thể tham khảo tên gọi các trường dữ liệu của Checkout fields tại bài viết này.

// Autofill checkout fields from URL
 
add_filter( 'woocommerce_checkout_fields' , 'prefill_billing_fields' );
 
function prefill_billing_fields ( $address_fields ) {
 
 
   // Get the data from the URL
 
   if ( isset( $_GET['fname'] ) || isset( $_GET['lname'] ) || isset( $_GET['email'] ) ) 
   {
 
   // wp_die();
 
       $fname = isset( $_GET['fname'] ) ? esc_attr( $_GET['fname'] ) : '';
       $lname = isset( $_GET['lname'] ) ? esc_attr( $_GET['lname'] ) : '';
       $em   = isset( $_GET['email'] ) ? esc_attr( $_GET['email'] ) : '';
 
       // First Name
 
      if( isset($_GET['fname']) && ! empty($_GET['fname']) ){
         if( isset( $address_fields['billing']['billing_first_name'] ) ){
             $address_fields['billing']['billing_first_name']['default'] = $fname;
         }
      }
 
      // Last Name
 
      if( isset($_GET['lname']) && ! empty($_GET['lname']) ){
          if( isset( $address_fields['billing']['billing_last_name'] ) ){
             $address_fields['billing']['billing_last_name']['default'] = $lname;
          }
      }
 
      // Email
 
      if( isset($_GET['email']) && ! empty($_GET['email']) ){
          if(isset( $address_fields['billing']['billing_email'] )){
             $address_fields['billing']['billing_email']['default'] = $em;
          }
      }
   }
    
   return $address_fields;
}

2. Xác định URL Redirect liên kết

Bạn cần xác định URL Redirect dữ liệu từ form để tự động điền vào Checkout fields. Cấu trúc của URL Redirect sẽ như sau:

https://www.yoursite.com/checkout-page/?email=[field id="email"]&fname= [field id="firstname"]&lname=[field id="lastname"]

URL này gồm 2 phần:

  • Phần đầu là đoạn URL của trang Checkout (ví dụ như https://nocodebuilding.com/gio-hang/ chứ bạn đừng copy y đúc nha)
  • Phần sau là ID của các trường dữ liệu liên kết, bạn lưu ý cần phải trùng khớp giữa 3 thành phần: tên biến ở bước 1 – tên biến và field ID trong URL bước 2 – field ID trong form ở bước 3.

3. Cấu hình field ID và Redirect Link trong Form widget – Elementor Pro

Trong phần tạo Form bằng Elementor Pro, bạn chỉnh sửa field ID trong tab Advanced (Nâng cao) của widget Form. Lưu ý là field ID của form phải trùng khớp với field ID trong URL Redirect.

Ở phần Actions After Submit của Form widget, bạn chọn Redirect và điền URL Redirect ở bước 2 vào phần Redirect To như hình.

Vậy là đã xong. Lúc này các thông tin mà khách hàng nhập từ form sẽ tự động điền vào các trường dữ liệu ở Checkout Page. Bạn có thể kiểm tra khi xem ở chế độ Inspect sẽ thấy giá trị autocomplete của dữ liệu.

Thân chào và hẹn gặp lại các bạn trong các bài viết tiếp theo về Woocommerce và WordPress.

Previous Post

Thêm mới, xóa, chỉnh sửa, tùy biến các trường dữ liệu trong trang Thanh toán WordPress (How to customize WooCommerce Checkout Fields)

Next Post

Change PROCEED TO CHECKOUT text in Woocommerce Cart page

Related Posts

Trọn bộ Crocoblock và Jetplugins – Addons tốt nhất của Elementor
WordPress

Trọn bộ Crocoblock và Jetplugins – Addons tốt nhất của Elementor

by TRUNG NO CODE
3 Tháng Tám, 2021
Làm sao để mua lại TÊN MIỀN QUÁ HẠN đã bị người khác mua mất?
Công nghệ

Làm sao để mua lại TÊN MIỀN QUÁ HẠN đã bị người khác mua mất?

by TRUNG NO CODE
22 Tháng Bảy, 2021
Đây là lý do mình xóa AMP trên website của mình.
Công nghệ

Đây là lý do mình xóa AMP trên website của mình.

by TRUNG NO CODE
15 Tháng Bảy, 2021
Hiển thị Giá khuyến mãi trước Giá bán thông thường trong Woocommerce (Display Sale price before Regular price)
WordPress

Thêm chữ sau Tổng tiền giỏ hàng và Tổng tiền đơn hàng (Add text after Total Cart in Cart page and Total Order in Checkout page in Woocommerce)

by TRUNG NO CODE
6 Tháng Bảy, 2021
Hiển thị Giá khuyến mãi trước Giá bán thông thường trong Woocommerce (Display Sale price before Regular price)
WordPress

Change PROCEED TO CHECKOUT text in Woocommerce Cart page

by TRUNG NO CODE
6 Tháng Bảy, 2021
Next Post
Hiển thị Giá khuyến mãi trước Giá bán thông thường trong Woocommerce (Display Sale price before Regular price)

Change PROCEED TO CHECKOUT text in Woocommerce Cart page

Chuyên mục

  • Công nghệ
  • Cuộc sống
  • Giải trí
  • Tài chính
  • WordPress

Thẻ

bàn bida hollywood 2021 chỉnh font mặc định trong corel code auto choose variable product code để khách gửi email bằng tài khoản gmail hướng dẫn cách xem kênh youtube nào nhiều sub nhất hướng dẫn lắp kim đồng hồ treo tường in nón bảo hiểm giá rẻ in nón bảo hiểm giá rẻ tphcm in nón bảo hiểm giá sỉ khuyến mãi kênh youtube nhiều sub nhất thế giới kênh youtube nhiều sub nhất việt nam mua elementor pro namesilo nocodebuilding nón bảo hiểm quà tặng qts1 quà tặng 90 năm thành lập đoàn quà tặng kỷ niệm 90 năm đoàn thanh niên quà tặng số 1 raya và rồng thần cuối cùng full sản xuất nón bảo hiểm chất lượng sản xuất đồng hồ treo tường theo yêu cầu thiết kế website thiết kế website không cần code thiết kế website wordpress top 100 phim hoạt hình hay nhất mọi thời đại tra cứu thông tin bầu cử quận 12 tự động chọn biến thể vultr woocommerce xưởng sản xuất nón bảo hiểm xưởng sản xuất nón bảo hiểm giá rẻ đặt in nón bảo hiểm số lượng lớn đặt làm đồng hồ treo tường theo yêu cầu đặt nón bảo hiểm quà tặng đặt nón bảo hiểm theo yêu cầu đồng hồ công cộng đồng hồ công cộng uy tín đồng hồ treo tường 1m đồng hồ treo tường cỡ lớn đồng hồ treo tường giá rẻ đồng hồ treo tường hội trường đồng hồ treo tường in logo giá rẻ đồng hồ treo tường trước cổng trường

Categories

  • Công nghệ
  • Cuộc sống
  • Giải trí
  • Tài chính
  • WordPress

Recent News

Bitcoin 15/02/2023 chờ đợi Bull trap $23k – $24k

Bitcoin 15/02/2023 chờ đợi Bull trap $23k – $24k

15 Tháng Hai, 2023
Tài liệu trading duy nhất mà mình đang áp dụng (tiếng Anh)

Tài liệu trading duy nhất mà mình đang áp dụng (tiếng Anh)

11 Tháng Hai, 2023

© 2021 No Code Building - Giải pháp Marketing hiệu quả

No Result
View All Result
  • LIÊN HỆ
  • TÀI CHÍNH
  • GIẢI TRÍ
  • CUỘC SỐNG
  • CÔNG NGHỆ
  • WORDPRESS

© 2021 No Code Building - Giải pháp Marketing hiệu quả