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

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

bởi Thạch Phạm
3 bình luận 8,7K views

Tham gia nhóm hỗ trợ WordPress

Tham gia nhóm Hỗ trợ Server - Hosting & WordPress để cùng nhau hỏi đáp và hỗ trợ các vấn đề về WordPress, tối ưu máy chủ/server.

Tham gia ngay
Bài này thuộc phần 19 của 32 phần trong serie wHọc Woocommerce

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

Khuyến mãi Black Friday

woocommerce-extra-options-09

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

woocommerce-extra-options-01

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

woocommerce-extra-options-02

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 đó.

woocommerce-extra-options-03

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.

woocommerce-extra-options-04

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.

Thêm Extra Options cho sản phẩm

Thêm Extra Options cho sản phẩm

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.

woocommerce-extra-options-06

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.

woocommerce-extra-options-07

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

woocommerce-extra-options-08

Ở đâ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.

woocommerce-extra-options-09

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.

woocommerce-extra-options-10

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

woocommerce-extra-options-11

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.

1/5 - (2 bình chọn)
3 bình luận

Có thể bạn quan tâm

Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.