Giao diện web Technology 2 là giao diện được thiết kế phục vụ các ngành hàng bán đa dạng sản phẩm, đa dạng thương hiệu,…

Với nhiều tính năng nổi bật của 1 website bán hàng chuyên nghiệp, tăng trust trong lòng khách hàng là ưu điểm giúp bạn bán được nhiều hàng hơn.

Thiết kế website wordpress chỉ với 1 plugin woocommerce

Mô tả bố cục giao diện website

Đây là fullpage home.

Homepage Giao diện Tecnology — Homepage **Giao diện web Tecnology 2**

Tính năng bộ lọc sản phẩm ajax.

Đầu tiên không thể bỏ qua một tính năng không thể thiếu khi bán đa dạng sản phẩm, đa dạng thương hiệu và sản phẩm có nhiều thuộc tính.

Trước thì mình vẫn không quá chú trọng vào trang danh mục sản phẩm. Cho đến một lần mình cần tìm mua điện thoại iphone, thì thấy bộ lọc này phát huy sức mạnh khủng khiếp.

Nó giúp mình tìm được đúng nhu cầu đang cần mua một cách nhanh chóng và trả về kết quả như mong muốn.

Đó là ở quan điểm người dùng. Bây giờ mình mô tả, mổ sẻ tính năng này sử dụng ở backend có gì nổi bật nhé.!

Đầu tiên là bật tắt bộ lọc cho từng danh mục sản phẩm.

Danh mục nào muốn hiển thị bộ lọc thì đơn giản bạn chỉ cần bật tắt nó ở phần quản trị website.

Những từ khoá có trong bộ lọc như thương hiệu(hình ảnh) , “Ram, Mức giá , CPU, Ổ cứng , Màn Hình….” thì gọi nó là thuộc tính nhé!

Bây giờ làm sao để setup bộ lọc đúng theo ý.! Thật đơn giản khi mình đã code phần lựa chọn loại hiện thị

Setup loại hiển thị cho thuộc tính của bộ lọc.

Setup loại hiển thị cho thuộc tính trong bộ lọc ajax

Mỗi lựa chọn ở đây sẽ quyết định vị trí và cách hiển thị được sắp xếp trước đó.

Đơn cử về options image, khi setup định dạng là image, trong từng chủng loại của thuộc tính sẽ có mục image để bạn lựa chọn hình ảnh đại diện (ví dụ rõ ràng ở đây là thương hiệu).

Tuỳ chỉnh hình ảnh cho chủng loại thuộc tính

Tiện thể đang nói ở phần thuộc tính tôi sẽ show cho bạn xem thêm 1 tính năng.

Show thuộc tính ra trang archive & tuỳ chỉnh icon từng thuộc tính, bật tắt hiện label.

Ban đầu tôi tính không code phần này, nhưng thực sự nó rất hữu ích, vì đôi khi đi mua hàng nhưng yếu tố kiểu này giúp tôi dễ dàng tìm đúng sản phẩm mình muốn.

Tính năng phân trang ajax tại trang danh mục có bộ lọc

Ở trang danh mục sử dụng bộ lọc sản phẩm nâng cao, chúng tôi đã bổ sung phần phân trang ajax, tải sản phẩm không cần tải lại trang.

Điều này giúp trải nghiệm người dùng tốt hơn.

Biến thể sản phẩm dạng radio.

Với sản phẩm có biến thể thì việc hiển thị theo kiểu này sẽ dễ dàng hơn cho khách hàng lựa chọn, tăng trải nghiệm người dùng.

Nhìn hình trên bạn có thể thấy phần quà tặng khuyến mãi bên dưới, cho phép chọn quà tặng là 1 sản phẩm bất kỳ trong store. Ở phía người dùng, họ sẽ được chọn 1 trong các phần quà mà bạn setup trước đó.

Review & Rating

Khi thiết kế web đồ công nghệ Technology 2, tôi đã custom lại phần review mặc định của woocommerce. Và kết quả được như bên dưới, bạn có thể xem chi tiết tại demo.