​ SEO Services
​ WooCommerce Plugin

Woo Thai Address Plugin (Full Context)

ปลั๊กอินสำหรับเพิ่มระบบค้นหาและเติมที่อยู่ภาษาไทยอัตโนมัติ (ตำบล, อำเภอ, จังหวัด, รหัสไปรษณีย์) ในหน้า Checkout เพื่อเพิ่มความสะดวกให้กับลูกค้าในการกรอกที่อยู่จัดส่งและใบเสร็จ

​ รองรับ Classic Checkout
​ รองรับ Block Checkout
checkout-simulation.ui
​
  • บางเขน, เมืองนนทบุรี, นนทบุรี 11000
  • ตลาดบางเขน, หลักสี่, กรุงเทพมหานคร 10210

Woo Thai Address (ระบบค้นหาที่อยู่ภาษาไทยสำหรับ WooCommerce)

ปลั๊กอิน WooCommerce สำหรับเพิ่มระบบค้นหาและเติมที่อยู่ภาษาไทยอัตโนมัติ (ตำบล, อำเภอ, จังหวัด, รหัสไปรษณีย์) ในหน้า Checkout เพื่อเพิ่มความสะดวกให้กับลูกค้าในการกรอกที่อยู่จัดส่งและใบเสร็จ รองรับทั้ง Classic Checkout และ WooCommerce Block Checkout

​

ความต้องการของระบบ (Requirements)

  • ​ WordPress 5.0 ขึ้นไป
  • ​ WooCommerce 5.0 ขึ้นไป
​

การติดตั้ง (Installation)

  1. อัปโหลดโฟลเดอร์ woo-thai-address ไปยัง /wp-content/plugins/
  2. ไปที่เมนู Plugins ในหลังบ้านของ WordPress แล้วกด "Activate" (ใช้งาน) ปลั๊กอิน "Woo Thai Address"
  3. ระบบจะทำงานในหน้า Checkout ทันทีโดยไม่ต้องตั้งค่าเพิ่มเติม
สนับสนุนโดย: ใช้ฐานข้อมูลที่อยู่จาก jquery.Thailand.js

ฟีเจอร์หลัก (Features) - Woo Thai Address

ยกระดับประสบการณ์การสั่งซื้อด้วยระบบค้นหาที่อยู่ที่แม่นยำและรวดเร็ว

​

1. ค้นหาที่อยู่อัตโนมัติ (Autocomplete)

เพิ่มช่องค้นหาที่อยู่ในหน้า Checkout ทั้งส่วน Billing (ใบเสร็จ) และ Shipping (จัดส่ง) ลูกค้าสามารถพิมพ์เพียงแค่ชื่อ ตำบล, อำเภอ, จังหวัด หรือ รหัสไปรษณีย์ ระบบจะแสดงตัวเลือกขึ้นมาให้เลือก

​

2. เติมข้อมูลลงฟิลด์อัตโนมัติ (Auto-fill)

เมื่อลูกค้าเลือกที่อยู่จาก Dropdown ข้อมูลตำบล, อำเภอ, จังหวัด และ รหัสไปรษณีย์ จะถูกนำไปกรอกลงในฟิลด์ที่กำหนดของ WooCommerce ทันที

​

3. รองรับ WooCommerce Block Checkout

มีการเขียน Script พิเศษสำหรับรองรับระบบ Checkout แบบใหม่ของ WooCommerce (React-based Block Checkout) โดยทำการบายพาส React state เพื่อให้ฟิลด์ข้อมูลอัปเดตอย่างถูกต้อง

​

4. รองรับ Classic Checkout

ทำงานร่วมกับฟอร์ม Checkout แบบดั้งเดิม (Shortcode) ได้อย่างสมบูรณ์ และจับ Event updated_checkout เพื่อ re-initialize ค้นหาเวลา AJAX โหลดข้อมูลใหม่

​

5. ปรับแต่ง Label ข้อมูล

ทำการเปลี่ยนป้ายแสดงผล (Label) ของฟิลด์ address_2 ให้เป็นคำว่า "แขวง / ตำบล (Subdistrict)" เพื่อให้สอดคล้องกับรูปแบบที่อยู่ของไทย

Simulation

Auto-fill in Action

ผู้ใช้เลือก: "บางเขน, เมืองนนทบุรี, นนทบุรี 11000"

​
บางเขน ​
เมืองนนทบุรี ​
นนทบุรี ​
11000 ​

คู่มือการใช้งาน (User Manual) - Woo Thai Address

ยินดีต้อนรับสู่คู่มือการใช้งานปลั๊กอิน Woo Thai Address ปลั๊กอินนี้ช่วยเพิ่มความสะดวกสบายให้กับลูกค้าของคุณในการกรอกที่อยู่จัดส่งและใบเสร็จ โดยการเพิ่มช่องค้นหาที่อยู่อัตโนมัติในหน้า Checkout ของ WooCommerce

1 คุณสมบัติเด่นที่ผู้ใช้จะได้รับ

  • ​
    กรอกที่อยู่ได้ไวขึ้น: เพียงแค่เริ่มพิมพ์ชื่อตำบล, อำเภอ, จังหวัด หรือรหัสไปรษณีย์ ระบบจะแสดงตัวเลือกที่ตรงกันขึ้นมาให้เลือกทันที
  • ​
    ลดข้อผิดพลาดในการพิมพ์: รับประกันว่าข้อมูลที่อยู่จะถูกต้องตามฐานข้อมูลไปรษณีย์ไทย
  • ​
    รองรับทั้งใบเสร็จและจัดส่ง: สามารถค้นหาแยกกันได้ทั้งสำหรับที่อยู่ในการออกใบเสร็จ (Billing) และที่อยู่สำหรับจัดส่ง (Shipping)

2 วิธีการใช้งานสำหรับลูกค้า (หน้า Checkout)

เมื่อลูกค้าเข้าสู่หน้าการสั่งซื้อ (Checkout) จะพบกับช่องค้นหาที่อยู่ใหม่ ดังนี้:

01
ค้นหาช่องกรอกข้อมูล

มองหาช่องข้อความที่มีป้ายกำกับว่า "ค้นหาที่อยู่อัตโนมัติ (พิมพ์ ตำบล, อำเภอ, จังหวัด หรือ รหัสไปรษณีย์)"

02
พิมพ์เพื่อค้นหา

เริ่มพิมพ์ข้อมูลที่อยู่บางส่วน ตัวอย่างเช่น:

  • พิมพ์รหัสไปรษณีย์ เช่น 10220
  • พิมพ์ชื่อตำบล เช่น บางเขน
  • พิมพ์ชื่อจังหวัด เช่น เชียงใหม่
03
เลือกจากตัวเลือก

ระบบจะแสดงรายการที่อยู่ที่ตรงกับการค้นหาขึ้นมาใต้ช่องนั้น ให้คลิกเลือกรายการที่ถูกต้อง

04
ตรวจสอบข้อมูล

ระบบจะทำการนำข้อมูลที่เลือกไปกรอกลงในช่อง แขวง/ตำบล, เขต/อำเภอ, จังหวัด, และ รหัสไปรษณีย์ ให้โดยอัตโนมัติ

05
กรอกข้อมูลที่เหลือ

ลูกค้าเพียงแค่กรอก บ้านเลขที่, ซอย, ถนน หรือจุดสังเกตเพิ่มเติมในช่อง "ที่อยู่" (Address 1) เท่านั้น

หมายเหตุ: หากเป็นลูกค้าเดิมที่เคยบันทึกที่อยู่ไว้แล้ว ระบบของ WooCommerce อาจจะดึงข้อมูลเดิมมาแสดง ลูกค้าสามารถใช้ช่องค้นหานี้เพื่อเปลี่ยนที่อยู่ใหม่ได้อย่างรวดเร็ว

3 สำหรับผู้ดูแลระบบ (Admin)

ปลั๊กอินนี้ออกแบบมาให้พร้อมใช้งานทันที ไม่ต้องมีการตั้งค่าใดๆ หลังจากการติดตั้ง:

  • เมื่อกด Activate (เปิดใช้งาน) ปลั๊กอินแล้ว ระบบจะไปปรากฏในหน้า Checkout โดยอัตโนมัติ
  • รองรับทั้งระบบ Checkout แบบเก่า (Classic Shortcode) และแบบใหม่ (WooCommerce Blocks)
  • ระบบข้อมูลอ้างอิงจากฐานข้อมูล Jquery.Thailand.js ซึ่งมีความแม่นยำสูงและครอบคลุมทุกพื้นที่ในประเทศไทย

เอกสารทางเทคนิค (Documentation)

​ โครงสร้างไฟล์

  • ​ woo-thai-address.php - ไฟล์หลักของปลั๊กอิน จัดการเรื่อง Hooks ของ WordPress / WooCommerce และโหลด Scripts
  • ​ assets/js/woo-thai-address.js - ไฟล์ JavaScript ที่จัดการเรื่อง Autocomplete และ Auto-fill ในฝั่ง Frontend

​ WordPress Hooks ที่ถูกใช้งาน

  • wp_enqueue_scripts: ใช้โหลด CSS/JS ของ jquery.Thailand.js และไฟล์ของปลั๊กอิน (โหลดเฉพาะในหน้า Checkout)
  • woocommerce_before_checkout_billing_form: เพิ่มช่องค้นหาที่อยู่ในฟอร์ม Billing
  • woocommerce_before_checkout_shipping_form: เพิ่มช่องค้นหาที่อยู่ในฟอร์ม Shipping
  • woocommerce_default_address_fields: ใช้ฟิลเตอร์แก้ไข label ของ address_2 ให้เป็นตำบล

​ การทำงานฝั่ง Frontend

ระบบทำงานด้วย jQuery โดยครอบคลุมถึง:

  • `setReactInputValue`: ฟังก์ชันสำหรับจำลองการพิมพ์เข้าไปใน Input ของ Block Checkout เพราะ React คอยตรวจสอบ Event และ State ตลอดเวลา ถ้าเปลี่ยน value ตรงๆ React จะไม่รับรู้
  • `initAutocomplete`: ตั้งค่า $.Thailand เพื่อเชื่อมช่องค้นหากับฐานข้อมูล db.json
  • `injectBlockSearchFields`: ตรวจจับและแทรกช่องค้นหาเข้าไปใน UI ของ Block Checkout อัตโนมัติ (ด้วย MutationObserver)
  • `fillAddressFields`: นำข้อมูล (ตำบล, อำเภอ, จังหวัด, รหัสไปรษณีย์) ที่ได้รับจาก Autocomplete ไปใส่ใน input ของ WooCommerce โดยพยายามค้นหา input ให้เจอทั้งกรณี Classic และ Block Checkout

การไหลของข้อมูล (Data Flow)

ลำดับการทำงานและไหลของข้อมูล (Data Flow) ตั้งแต่ลูกค้าพิมพ์ข้อความจนถึงข้อมูลถูกเติมลงฟอร์ม:

1

ผู้ใช้พิมพ์ข้อมูล (User Input)

-> ลูกค้าพิมพ์ ตำบล, อำเภอ, จังหวัด หรือรหัสไปรษณีย์ ลงในช่อง "ค้นหาที่อยู่อัตโนมัติ"

2

ประมวลผลคำค้น (Query Processing)

-> jquery.Thailand.js นำข้อความที่พิมพ์ไปค้นหาในฐานข้อมูล db.json ของประเทศไทย

3

แสดงตัวเลือก (Suggestions View)

-> รายการที่อยู่ที่ตรงกับการค้นหาจะแสดงขึ้นมาเป็น Dropdown (ประเภท twitter-typeahead) ให้ผู้ใช้เลือก

4

ผู้ใช้เลือกที่อยู่ (User Selection)

-> ผู้ใช้คลิกเลือกที่อยู่ที่ต้องการ

5

เหตุการณ์ OnDataFill ทำงาน (Trigger Callback)

-> jquery.Thailand.js ส่งข้อมูลออบเจกต์ (district, amphoe, province, zipcode) กลับมาที่ฟังก์ชัน onDataFill

-> โค้ดเรียกใช้ฟังก์ชัน fillAddressFields(type, data)

6

แจกแจงแพตเทิร์นการอัปเดตฟอร์ม (Form Update Parsing)

-> ระบบจะเช็คว่าเป็นฟอร์มแบบ Classic Checkout หรือ Block Checkout

-> ระบบใช้ CSS Selectors เพื่อพยายามหาฟิลด์เป้าหมายต่างๆ (address_2, city, state, postcode)

7

เขียนข้อมูลลง UI (Write Value & Sync State)

  • กรณี Classic Checkout: เซ็ตค่าลงใน .val() และสั่ง .trigger('change') เพื่อให้ WooCommerce รับทราบการแก้ไข
  • กรณี Block Checkout: ใช้ฟังก์ชันพิเศษ setReactInputValue() ทำการข้าม (bypass) ตัวจัดการ state ของ React ไป set value ใน Native DOM Prototype และทริกเกอร์ Events (focus, input, change, blur) ออกมา เพื่อบังคับให้ฟอร์มของ React บันทึกค่าลง state ตัวเอง
​

เสร็จสิ้น

ข้อมูลที่อยู่ปรากฏบนช่องในกระบวนการจ่ายเงินพร้อมให้ลูกค้ายืนยันการสั่งซื้อ

​ ประวัติการอัปเดต (Changelog)

v1.0.0 เริ่มต้นโครงการ
  • เปิดตัวปลั๊กอิน (Initial Release)
  • เพิ่มช่องค้นหาที่อยู่ในแบบฟอร์ม Billing และ Shipping
  • รองรับการทำงานใน WooCommerce Classic Checkout
  • รองรับดึงข้อมูลที่อยู่และจังหวัดจาก jquery.Thailand.js
  • แปลงฟิลด์ address_2 ใน WooCommerce ให้เป็น "แขวง / ตำบล (Subdistrict)"
  • เพิ่มโค้ดที่รองรับ WooCommerce Block Checkout (React-based) ด้วยการ Bypass React Data Tracker และใช้ MutationObserver ดักจับ DOM เพื่อใส่ช่องค้นหาอัตโนมัติ

พร้อมบรรลุเป้าหมายทางดิจิทัลของคุณหรือยัง?

ให้ทีมผู้เชี่ยวชาญจาก Warrior ช่วยออกแบบและพัฒนากลยุทธ์ SEO ที่ตอบโจทย์การเติบโตของคุณอย่างยั่งยืน

​ สอบถามเพิ่มเติม (LINE@) ​ ทำความรู้จัก Warrior SEO ​

✨ ปรึกษา แนะนำ และประเมินราคาเบื้องต้น ฟรี! ไม่มีค่าใช้จ่าย