Thêm Form tính giá sản phẩm trong Woocommerce WordPress

Đa số các product trong Woocommerce sẽ set cứng giá hoặc thêm variable để tùy chỉnh giá của sản phẩm. Nhưng trong trường hợp mình có một sản phẩm giá sẽ được tính theo chu vi hoặc diện tích. Với các field cho phép người dùng nhập chiều dài , chiều rộng vào thì sao.

Trong bài viết này sẽ hướng dẫn các bạn Custom Form tính giá cho sản phẩm trong Woocommerce WordPress.

Để demo cho bài viết này, mình có tham khảo giá của Sàn gỗ Savi bên site này, Sàn gỗ Savi 160.000 đ/m2.

Thêm Form tính giá sản phẩm trong Woocommerce WordPress
Thêm Form tính giá sản phẩm trong Woocommerce WordPress

Trong demo này mình dùng theme Storefront của woo luôn nhé.

Bây giờ tiến hành custom thôi nào:

B1: Add Woo Advanced custom field

B1: Add Woo Advanced custom field
B1: Add Woo Advanced custom field

Chỗ này mình muốn add 1 option để có thể enable/disable custom form hiển thị ở front-end.

B2: Save data của custom field vừa tạo ở B1 nhé

B3: Giờ thì show form ra Front-End nào

Ở bước này, mình có kiểm tra điều kiện là nếu là single product và form được cho phép hiển thị thì nó sẽ xuất hiện ở front-end, trước button add to cart.

Ngoài ra trong đoạn code trên, mình có add thêm đoạn js để tính toán và hiển thị giá ở trên form đó luôn. Bạn có thể add đoạn js này vào 1 file riêng và enqueue vào nhé.

B4: Ở bước này thì chúng ta tính toán một chút và add data vào cart nhé.

B5: Set new price cho product -> hiển thị ở page cart và page checkout

B6: Hiển thị custom text ở page cart và page checkout

Custom text ở đây là chiều dài và chiều rộng của sản phẩm được add vào form ở trên.

B7: Add custom text vào phần order để hiển thị trong backend và email các thứ nhé.

B7: Add custom text vào phần order để hiển thị trong backend và email các thứ nhé.
B7: Add custom text vào phần order để hiển thị trong backend và email các thứ nhé.

Các bạn có thể test sản phẩm demo ở đây nhé https://ccgr.tk/product/san-go-savi-sv6034-thuong-hieu-san-go-viet-nam-cao-cap/

Code on Gist https://gist.github.com/trongcong/c3ce527ffe691288e3c28d5117dd17e7

Vậy là xong các bước để thêm form tính giá sản phẩm trong Woocommerce WordPress rồi đấy.

Cách cài đặt MongoDB trên Ubuntu 18.04 BroadcastChannel API: Giao tiếp giữa các tab hoặc cửa sổ trong trình duyệt Hướng dẫn deploy project Nuxt JS lên VPS 😍 Giới thiệu PM2 – Trình quản lý các ứng dụng NodeJS Thêm meta tags cho website Nuxt JS Tạo Blog đơn giản với Nuxt JS và WordPress API Cài đặt Git trên Ubuntu 18.04 Hướng dẫn cài đặt Node.js trên VPS Ubuntu 18.04 Sử dụng JavaScript Fetch API với Async/Await Styling Placeholder Text của thẻ input với CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

How to whitelist website on AdBlocker?

How to whitelist website on AdBlocker?

  1. 1 Click on the AdBlock Plus icon on the top right corner of your browser
  2. 2 Click on "Enabled on this site" from the AdBlock Plus option
  3. 3 Refresh the page and start browsing the site