Thêm tùy chọn quận huyện cho WooCommerce

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Thêm tùy chọn quận huyện cho WooCommerce

Bạn muốn thêm trường quận huyện cho trang thanh toán WooCommerce? WooCommerce chỉ bổ trợ trường quốc gia, nếu bạn muốn thêm trường quận huyện & thành thị bạn cần thêm trường tùy chỉnh cho WooCommerce. Trong bài này mình sẽ chỉ dẫn các bạn thêm 2 trường thành thị và quận khi khách hàng thanh toán.

Thêm trường quận huyện cho trang thanh toán WooCommerce

Nhờ có plugin wc-city-select, chúng ta có thể đơn giản tùy biến danh sách địa phương của việt nam. Bằng cách bổ xung bản kê thành phố, huyện bằng phương pháp dùng Filter.

Tuy nhiên bạn cũng đều có thể tự viết mã để bổ xung trường mới thông qua hook woocommerce_checkout_fields . Với cách này bạn sẽ thêm tùy ý các trường hoặc nội dung HTML mong muốn. Trong độ rộng bài này chúng ta chỉ thêm trường selectbox cho quận huyện, để thực hiện được một tính năng hoàn hảo cho WooCommerce bạn phải thừa kế style & script có trong Template WooCommerce.

Đó là nguyên nhân mình không khuyến khích các tự viết từ đầu, bạn cần sử dụng đến một số thư viện javascript như select2,..Với trường này sẽ có nhiều dữ liệu tỉnh thành, thư viện này sẽ thêm trường kiếm tìm cho trường select & bạn dễ dàng tìm dữ liệu từ một danh sách dài.

Ok, chúng ta hãy bắt đầu nhé. Bài tập này mình sử dụng theme WordPress, bạn cũng đều có thể viết plugin WordPress hoặc viết trực diện vào theme. Trước tiên, hãy tải plugin WC City Select. Sau khi tải về máy tính, bạn tạo thư mục mới có tên ‘province-city’ tại ‘wp-content/yourtheme/province-city’ & giải nén plugin vào thư mục này.

Vì trong plugin này còn có sử dụng hàm plugin_dir_url , để plugin cũng có thể hoạt động trong theme chúng ta sẽ sửa lại một chút. Mở file wc-city-select.php, và thêm hàm set_plugin_url vào class WC_City_Select

 class WC_City_Select{ public function set_plugin_url($url) { $this-> plugin_url = $url; } }  

Hàm trên sẽ trỏ đường đưa vào thư mục giao diện, thay vì ‘plugins’ nó thay thế hàm plugin_dir_url.

Bước tiếp đến, bạn tải 2 tệp class-cities.php & class-provinces.php và nhúng các tệp này trong functions.php

 include 'province-city/class-cities.php'; include 'province-city/class-provinces.php';  

Cuối cùng bạn tái tạo lớp và thiết lập đường dẫn trỏ vào plugin wc-city-select, thêm đoạn mã dưới đây vào file functions.php

 add_action('init', 'hoangweb_init'); function hoangweb_init() { $Provinces = new Woo_Provinces(); $city = new Woo_Cities(); $GLOBALS['wc_city_select']-> set_plugin_url(get_stylesheet_directory_uri().'/province-city/wc-city-select/'); }  

Vậy là xong, để thấy được trường quận huyện bạn thử thêm vài mặt hàng vào giỏ hàng và chuyển đến trang thanh toán, bạn sẽ thấy thêm 2 trường mới như thế này.

Lưu ý: Script trên chỉ áp dụng cho quốc gia việt nam, nếu người dùng chọn một quốc gia khác trường quận huyện sẽ không hoạt động.

Nếu cửa hàng của bạn kinh doanh ở Việt nam, bạn cũng có thể có thể tắt những quốc gia không sử dụng hoặc chỉ để “Viet nam”. Bạn có thể sử dụng nhanh hàm sau để kích hoạt một quốc gia, thêm dòng sau vào functions.php

 add_filter('woocommerce_countries_allowed_countries', 'wc_countries_allowed_countries',100); function wc_countries_allowed_countries($countries) { foreach($countries as $c=> $t) if($c!='VN') unset($countries[$c]); return $countries; }  

Mình không giám chắc 2 trường này hiển thị bên dưới trường quốc gia, nếu thứ tự trường bị lộn xộn, bạn có thể xắp xếp lại thứ tự trường nếu muốn. Bằng cách sửa lại thứ tự trong mảng PHP của biến truyền vào Filter woocommerce_checkout_fields

Ví dụ sau mình thêm hàm xắp xếp mảng PHP, trước khi thay đổi thứ tự trường phải trả bạn chèn mã sau vào functions.php

 function sort_array_by_array($data, $keys) { $properOrderedArray = array_merge(array_flip($keys), $data); return $properOrderedArray; }  

Chúng ta sẽ đặt 2 trường mới ngay sau trường quốc gia, vậy thứ tự là 'billing_country','billing_state','billing_city' .

 add_filter( 'woocommerce_billing_fields', 'woo_filter_fields_billing', 10, 1 ); function woo_filter_fields_billing(){ $fields = sort_array_by_array($fields,[ 'billing_country','billing_state','billing_city', ]); return $fields; }  

Tải thí dụ mẫu tại đây.

Lưu ý: đoạn code trên tùy thuộc vào vị trí trường billing_country, bạn có thể liệt kê toàn bộ các trường theo thứ tự để chắc chắn xắp xếp theo đúng ý bạn.

Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng có thể thu được sự trợ giúp trên Twitter và Facebook

Bài viết Thêm tùy chọn quận huyện cho WooCommerce được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang