No Code Building
  • LIÊN HỆ
  • KIẾN THỨC WEBSITE
  • GIẢI TRÍ
  • TIỀN ĐIỆN TỬ
  • KINH DOANH
    • Quà tặng doanh nghiệp
    • Đồng hồ công cộng
    • Đồng hồ treo tường
    • Dịch vụ kinh doanh
    • Nón bảo hiểm
No Result
View All Result
No Code Building
  • LIÊN HỆ
  • KIẾN THỨC WEBSITE
  • GIẢI TRÍ
  • TIỀN ĐIỆN TỬ
  • KINH DOANH
    • Quà tặng doanh nghiệp
    • Đồng hồ công cộng
    • Đồng hồ treo tường
    • Dịch vụ kinh doanh
    • Nón bảo hiểm
No Result
View All Result
No Code Building
No Result
View All Result
Home WordPress Hướng dẫn

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 Hướng dẫn, PHP, Woocommerce, 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)
191
SHARES
1.1k
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

Xem trọn bộ phim Hán Sở tranh hùng  2013
Giải trí

Xem trọn bộ phim Hán Sở tranh hùng 2013

by TRUNG NO CODE
13 Tháng Một, 2022
Trọn bộ Crocoblock và Jetplugins – Addons tốt nhất của Elementor
Hướng dẫn

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)
Hướng dẫn

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

Currently Playing

[Không quảng cáo] Tiếng đàn piano nhẹ nhàng, êm dịu, dễ ngủ vào buổi tối

[Không quảng cáo] Tiếng đàn piano nhẹ nhàng, êm dịu, dễ ngủ vào buổi tối

00:43:24

Recommended

Xem phim LIFE OF PI – Hiểu rõ hơn về ý nghĩa cuộc sống

Xem phim LIFE OF PI – Hiểu rõ hơn về ý nghĩa cuộc sống

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

Thêm chữ trước Giá bán và Giá khuyến mãi của sản phẩm Woocommerce (Insert text before Regular price and Sale price)

20 Tháng Năm, 2021

Chuyên mục

  • Âm nhạc
  • Bàn bida
  • Biểu trưng
  • Công nghệ
  • Cuộc sống
  • Design
  • Đồng hồ công cộng
  • Đồng hồ treo tường
  • Elementor
  • Giải trí
  • Hot girl
  • HTML & CSS
  • Hướng dẫn
  • Kinh doanh
  • Kinh tế
  • Lập trình
  • Mẫu thiết kế
  • Nón bảo hiểm
  • Phim ảnh
  • PHP
  • Quà tặng doanh nghiệp
  • Review công nghệ
  • SEO tốt
  • Thể thao
  • Thời sự
  • Thủ thuật
  • Tiền điện tử
  • Tin công nghệ
  • Woocommerce
  • WordPress
  • Xã hội
  • Youtube

Don't miss it

Xem trọn bộ phim Hán Sở tranh hùng  2013
Giải trí

Xem trọn bộ phim Hán Sở tranh hùng 2013

13 Tháng Một, 2022
Tuyển tập nhạc No Copyright Calm Music
Âm nhạc

Tuyển tập nhạc No Copyright Calm Music

15 Tháng Mười Hai, 2021
Mua vải bố canvas TP.HCM ở đâu?
Kinh doanh

Mua vải bố canvas TP.HCM ở đâu?

9 Tháng Mười Hai, 2021
Rick Astley Hodlers – Thói quen mua Bitcoin của các Hodlers yêu hết mình
Tiền điện tử

Rick Astley Hodlers – Thói quen mua Bitcoin của các Hodlers yêu hết mình

27 Tháng Chín, 2021
Mô hình Stock to Flow S2F của PlanB
Tiền điện tử

Mô hình Stock to Flow S2F của PlanB

27 Tháng Chín, 2021
Xem phim The Big Short 2015 – Phim hay về thị trường tài chính
Giải trí

Xem phim The Big Short 2015 – Phim hay về thị trường tài chính

9 Tháng Mười Một, 2021

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
No Code Building

Giải pháp Marketing hiệu quả

Categories

  • Âm nhạc
  • Bàn bida
  • Biểu trưng
  • Công nghệ
  • Cuộc sống
  • Design
  • Đồng hồ công cộng
  • Đồng hồ treo tường
  • Elementor
  • Giải trí
  • Hot girl
  • HTML & CSS
  • Hướng dẫn
  • Kinh doanh
  • Kinh tế
  • Lập trình
  • Mẫu thiết kế
  • Nón bảo hiểm
  • Phim ảnh
  • PHP
  • Quà tặng doanh nghiệp
  • Review công nghệ
  • SEO tốt
  • Thể thao
  • Thời sự
  • Thủ thuật
  • Tiền điện tử
  • Tin công nghệ
  • Woocommerce
  • WordPress
  • Xã hội
  • Youtube

Recent News

Xem trọn bộ phim Hán Sở tranh hùng  2013

Xem trọn bộ phim Hán Sở tranh hùng 2013

13 Tháng Một, 2022
Tuyển tập nhạc No Copyright Calm Music

Tuyển tập nhạc No Copyright Calm Music

15 Tháng Mười Hai, 2021

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

No Result
View All Result
  • LIÊN HỆ
  • KIẾN THỨC WEBSITE
  • GIẢI TRÍ
  • TIỀN ĐIỆN TỬ
  • KINH DOANH
    • Quà tặng doanh nghiệp
    • Đồng hồ công cộng
    • Đồng hồ treo tường
    • Dịch vụ kinh doanh
    • Nón bảo hiểm

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

Gọi điện thoại
0989 333 069