[Woocommerce] Tạo tùy chọn sản phẩm chuyên nghiệp với Extra Product Options

SERIESCơ bảnWordPress

Học Woocommerce

Bài 12 / 32· 38%

1. [WooCommerce] Tích hợp Ngân Lượng và Bảo Kim
2. [Woocommerce] Tìm hiểu các trang trong Woocommerce
3. [Woocommerce] Thêm một sản phẩm đơn giản
4. [Woocommerce] Tính phí giao hàng toàn tập
5. [Woocommerce] Các thiết lập thanh toán
6. [Woocommerce] Thiết lập thanh toán qua PayPal
7. [Woocommerce] Các thiết lập Tài khoản
8. [Woocommerce] Đưa liên kết lên menu
9. [Woocommerce] Thiết lập Email thông báo
10. [Woocommerce] Quản lý đơn hàng
11. [Woocommerce] Tạo sản phẩm có thuộc tính
12. → [Woocommerce] Tạo tùy chọn sản phẩm chuyên nghiệp với Extra Product Options
13. [Woocommerce] Thêm sản phẩm liên kết ngoại
14. [Woocommerce] Thêm nhóm sản phẩm
15. [Woocommerce] Thiết lập shop làm trang chủ
16. [Woocommerce] Các thiết lập cài đặt cơ bản
17. [Woocommerce] Thay đổi kích thước ảnh sản phẩm
18. [Woocommerce] Cài đặt và thiết lập cơ bản
19. [Woocommerce] Giới thiệu plugin WooCommerce
20. [Woocommerce] Thiết lập thuế
21. [Woocommerce] Thêm tỉnh thành Việt Nam và tối ưu lại thông tin khách hàng
22. [Woocommerce] Cách sử dụng theme Storefront
23. [Woocommerce] Danh sách các widget của Woocommerce
24. [WooCommerce] Phân khu vực hiển thị sidebar với WooSidebars
25. [Woocommerce] Tối ưu đường dẫn tĩnh
26. [Woocommerce] Tăng sức mạnh với YITH Essential Kit for Woocommerce
27. [Woocommerce] Cách sử dụng YITH WooCommerce Color and Label Variations
28. [Woocommerce] Thêm hiệu ứng zoom ảnh sản phẩm
29. [WooCommerce] Thiết lập các plugin cache
30. [WooCommerce] Thiết lập Yoast SEO cho WooCommerce
31. [Woocommerce] Cấu trúc template của Woocommerce
32. [Woocommerce] Cách dùng Action Hook và Filter Hook

Ở bài trước bạn đã biết cách tạo ra một số thuộc tính cho sản phẩm, và sau đó tạo sản phẩm kiểu có biến thể để khách hàng chọn lựa các biến thể mà họ thích khi đặt hàng. Nhưng giới hạn của Woocommerce dĩ nhiên không chỉ nằm ở đó, dựa vào mã nguồn của nó mà các lập trình viên có thể phát triển thêm nhiều tính năng hay hơn nữa. Nhưng với điều kiện, bạn phải biết lập trình.

Nhưng nếu bạn không biết lập trình thì chúng ta vẫn có thể sử dụng một số plugin hỗ trợ có sẵn để thêm nhiều tính năng hay khác cho Woocommerce. Mà cụ thể trong bài này chúng ta sẽ làm lại phần thuộc tính sản phẩm, biến thể sản phẩm thêm chuyên nghiệp với plugin Woocommerce Extra Product Options có giá $19 tại Codecanyon.

Woocommerce Extra Product Options là gì?

Nói theo cách dễ hiểu thì nó sẽ giúp bạn tạo ra các tùy chọn với nhiều kiểu khác nhau như nhập dữ liệu, chọn màu sắc, checkbox, radio, upload field,….và bạn có thể thêm đơn giá cho từng options để khách hàng chọn, khi họ chọn thì nó sẽ tính thêm tiền vào đơn hàng.

Trong ví dụ bên dưới, mình sẽ hướng dẫn các bạn chọn ra các options kiểu thế này:

Cài đặt Woocommerce Extra Product Options

Sau khi mua xong, bạn vào phần Download của Codecanyon và tải gói cài đặt của plugin này về.

Sau đó giải nén ra, bạn sẽ thấy nó có các tập tin và thư mục như sau:

Trong đó:

• Documentation: Thư mục chứa tài liệu hướng dẫn sử dụng plugin này, nên đọc khi rảnh để hiểu cách sử dụng rõ hơn.
• Extensions: Các phần mở rộng thêm vào của plugin này, cài nó như một plugin bình thường.

Tập tin và thư mục còn lại là chứa gói cài đặt plugin, chúng ta sẽ sử dụng tập tin .zip để cài vào website mình như cài một plugin bình thường nhé.

Vào Gói mở rộng -> Cài mới -> Tải plugin lên và chọn tập tin .zip đó.

Và kích hoạt lên.

Tổng quan trang cấu hình của Extra Product Options

Plugin này cung cấp một trang thiết lập các cấu hình rất chi tiết và nhiều tùy chọn. Các thiết lập này không phải là nơi để chúng ta thêm thuộc tính cho sản phẩm nhưng chúng ta sẽ thiết lập lại cách hiển thị, màu sắc hiển thị,…..hoặc để mặc định.

Các thiết lập này nó trong phần Woocommerce -> Cài đặt -> Extra Product Options.

Các thiết lập này các bạn không nhất thiết phải tùy chọn để sử dụng mà mặc định họ đã tùy chọn sẵn một cách tối ưu nhất rồi, nhưng bạn có thể tự tìm hiểu và đổi lại nếu muốn.

Thêm extra options vào sản phẩm

Để thêm extra options vào sản phẩm, bạn chọn phần TM Extra Product Options ở khung dữ liệu sản phẩm là được.

Tại đây bạn sẽ thêm options với kiểu builder, tức là bạn có thể thêm các khu vực (section), sau đó trong mỗi khu vực bạn có thể chia một cột hoặc nhiều cột và mỗi khu vực bạn sẽ thêm các phần tử (element) bằng cách click vào dấu cộng.

Khi tạo element, bạn sẽ có thể chọn được 11 kiểu trường dữ liệu (field) cho các phần tử như thế này.

Sau khi thêm element, bạn ấn vào biểu tượng bút chì của element đó mà thêm dữ liệu cho nó.

Ở đây có một số thiết lập quan trọng nhưng đa phần đều na ná nhau, mình nghĩ bạn có thể tự hiểu được hoặc bạn có thể xem video phía trên để hiểu hơn.

Kết quả sau khi thêm một số options vào sản phẩm.

Và có thể bạn sẽ thấy một số chữ tiếng Anh, đừng lo, bạn cứ dùng Loco Translate mà dịch lại trong plugin này nhé.

Và khi thanh toán, các extra options sẽ hiển thị vào giỏ hàng luôn.

Và trong trang quản lý order sẽ hiển thị chi tiết các options như thế này.

Nhiêu đây mình nghĩ là cũng đủ để bạn hình dung các chức năng này ra sao phải không nào? Và mình nghĩ thay vì tốn nhiều thời gian công sức tìm giải pháp code thì việc bỏ ra $19 để mua plugin này hoàn toàn đáng đồng tiền bát gạo, sử dụng ổn định không bị lỗi.