Giao diện WooCommerce với khối cho mọi màn hình cửa hàng
Thiết kế trang sản phẩm, lưới cửa hàng, giỏ hàng và thanh toán bằng các khối trong trình chỉnh sửa mà WordPress cung cấp, rồi bắt đầu từ một bản demo đã là cửa hàng hoạt động. WooCommerce giữ đơn hàng, còn Canvas mang đến thiết kế.
Cập nhật
24 khối cho bốn màn hình giúp bán hàng
Mọi phần của cửa hàng WooCommerce mà người mua nhìn thấy đều là một khối có bảng thiết lập, nên bạn có thể di chuyển, đổi kiểu hoặc bỏ đi mà không cần chạm vào tệp mẫu nào.
Trang sản phẩm 11 khối
Xây dựng bố cục sản phẩm đơn lẻ từng khối một, hoặc bắt đầu từ một trong các mẫu có sẵn rồi di chuyển các thành phần.
Product Images Có trong mọi gói
Hiển thị ảnh đại diện sản phẩm WooCommerce và các ảnh thu nhỏ thư viện tùy chọn.
Product Gallery Linker Có trong mọi gói
Dải ảnh thu nhỏ chuyển băng chuyền thư viện ảnh sản phẩm đến ảnh bạn nhấp vào.
Product Price Bao gồm trong mọi gói
Hiển thị giá sản phẩm WooCommerce, bao gồm giá khuyến mãi và định dạng tiền tệ.
Product Rating Có trong mọi gói
Hiển thị đánh giá sao và tùy chọn số lượt đánh giá cho sản phẩm WooCommerce hiện tại.
Product Meta Đi kèm với mọi gói
Hiển thị thẻ thông tin sản phẩm: SKU, danh mục và thẻ.
Product Short Description Có trong mọi gói
Hiển thị mô tả ngắn của sản phẩm với cấu trúc đoạn văn được giữ nguyên.
Variation Swatches Đã bao gồm trong mọi gói
Chấm màu hoặc nút dạng viên thuốc để chọn biến thể của sản phẩm có nhiều tùy chọn.
Add to Cart Có trong mọi gói
Hiển thị biểu mẫu thêm vào giỏ hàng WooCommerce cho sản phẩm hiện tại, với ô nhập số lượng tùy chọn.
Product Tabs Bao gồm trong mọi gói
Hiển thị các tab dữ liệu sản phẩm WooCommerce: Mô tả, Thông tin bổ sung và Đánh giá.
Product Share Đi kèm với mọi gói
Hiển thị thẻ “Chia sẻ:” với các liên kết chia sẻ mạng xã hội cho sản phẩm WooCommerce hiện tại.
Sản phẩm liên quan Đi kèm với mọi gói
Hiển thị lưới sản phẩm WooCommerce liên quan đến sản phẩm hiện tại. Chỉ hiển thị trên các mẫu trang sản phẩm đơn.
Cửa hàng và danh mục của nó 5 khối
Lưới, băng chuyền, thẻ danh mục và bộ lọc giá, mỗi loại có thể lấy dữ liệu từ danh mục, thẻ, kết quả tìm kiếm hoặc danh sách chọn tay.
Sản phẩm Có trong mọi gói
Hiển thị sản phẩm WooCommerce theo dạng lưới hoặc danh sách. Lọc theo nguồn, danh mục, thẻ và thứ tự sắp xếp.
Product Categories Bao gồm trong mọi gói
Hiển thị danh mục sản phẩm WooCommerce dưới dạng lưới thẻ đáp ứng, với ảnh thu nhỏ, tên và số lượng sản phẩm.
Product Carousel Có trong mọi gói
Hiển thị sản phẩm WooCommerce trong một owl-carousel có thể cuộn. Hỗ trợ tự động chạy, mũi tên điều hướng, dấu chấm và điểm ngắt responsive.
Store Price Filter Có trong mọi gói
Thanh trượt khoảng giá hai núm giúp lọc lưới sản phẩm ngay tại chỗ.
Conference Tickets Có trong mọi gói
Hộp giá cho một danh mục sản phẩm vé, mỗi hộp có ô chọn số lượng và liên kết thêm vào giỏ hàng trực tiếp.
Giỏ hàng 3 khối
Trang giỏ hàng bạn thiết kế, cùng phần bán thêm (upsell) mà người mua thực sự nhìn thấy.
Cart Table Đi kèm với mọi gói
Hiển thị bảng giỏ hàng WooCommerce với các mục hàng, số lượng và tổng tiền.
Tổng giỏ hàng Bao gồm trong mọi gói
Hiển thị bảng tổng giỏ hàng WooCommerce, bao gồm tạm tính, vận chuyển và nút thanh toán.
Cross-Sells Có trong mọi gói
Hiển thị các sản phẩm bán kèm từ giỏ hàng WooCommerce hiện tại. Chỉ hiển thị khi giỏ hàng đang hoạt động và có chứa sản phẩm bán kèm.
Thanh toán 3 khối
Biểu mẫu thanh toán, phần xem lại đơn hàng và các thông báo cho khách hàng biết vừa xảy ra điều gì.
Checkout Billing Đã bao gồm trong mọi gói
Hiển thị biểu mẫu địa chỉ thanh toán của WooCommerce.
Checkout Order Review Đi kèm với mọi gói
Hiển thị phần tóm tắt đơn hàng khi thanh toán WooCommerce với các mục hàng và tổng tiền.
WooCommerce Notices Có trong mọi gói
Hiển thị thông báo WooCommerce: lỗi, thông báo thành công hoặc thông tin.
Ở nơi khác trong cửa hàng 2 khối
Các khối cửa hàng nằm ngoài bốn màn hình trên.
Danh sách yêu thích Có trong mọi gói
Các sản phẩm khách hàng đã lưu, kèm giá, tình trạng tồn kho và nút thêm vào giỏ hàng. Đặt nội dung này trên trang được chọn trong Tùy chọn giao diện, mục Wishlist.
Wishlist Button Có trong mọi gói
Lưu sản phẩm hiện tại vào danh sách yêu thích của khách hàng. Dùng trong mẫu sản phẩm và thẻ sản phẩm.
Cửa hàng quần áo
Danh mục thời trang với các trang bộ sưu tập, sản phẩm biến thể và giỏ hàng trên header hiển thị số lượng.
Giao diện thương mại điện tử
Nội thất
Bán hàng và cho thuê trong cùng một danh mục, với lưới sản phẩm và trang sản phẩm đơn đều được bố cục bằng các khối.
Giao diện thiết kế nội thất
Rượu vang
Một cửa hàng rượu vang, trong đó thiết kế làm nổi bật ảnh sản phẩm và các trang cửa hàng nằm phía sau.
Giao diện nhà hàngBa trong số 21 bản demo cửa hàng. Mọi phần mà người mua nhìn thấy trên các trang này đều là một khối có bảng cài đặt phía sau.
Người mua làm gì, không cần tải lại trang
Ba hành vi cửa hàng thường mỗi cái cần một plugin riêng đều là một phần của tích hợp này.
Ô màu thuộc tính
Gán màu cho một thuật ngữ thuộc tính sản phẩm trong trang quản trị, khi đó sản phẩm có biến thể sẽ hiển thị các chấm màu hoặc nút bo tròn thay cho danh sách thả xuống, giúp khách hàng chọn biến thể bằng mắt.
Thêm vào giỏ hàng bằng AJAX
Thêm sản phẩm từ lưới, băng chuyền hoặc lớp phủ thẻ sẽ cập nhật giỏ hàng ngay tại chỗ. Khách hàng vẫn ở trang đang xem và giỏ hàng mini trên header tiếp tục hiển thị số lượng.
Kiểu thẻ sản phẩm
Đặt mọi ảnh sản phẩm theo cùng một hình dạng để các thẻ thẳng hàng, chọn xem ảnh phụ trong thư viện hiện khi rê chuột hay chạy dưới dạng trình chiếu, và chọn nội dung lớp phủ khi rê chuột: mua, xem nhanh hoặc cả hai.
18 mẫu cửa hàng trong Trình chỉnh sửa trang
Mỗi màn hình cửa hàng là một mẫu khối mà bạn có thể mở, chỉnh sửa và đặt lại trong Trình chỉnh sửa trang, giống như cách bạn chỉnh sửa bất kỳ mẫu khối nào khác.
Bố cục sản phẩm đơn lẻ
Bố trí trang sản phẩm theo kiểu mặc định, phần tóm tắt dính theo thư viện ảnh, dạng danh sách, thiết kế nổi bật màu sắc, kiểu cửa hàng, một trong hai bố cục thư viện ảnh liên kết tùy chỉnh, hoặc với biến thể sidebar bên trái, bên phải hoặc hai sidebar.
Bố cục trang cửa hàng
Bố trí toàn bộ cửa hàng theo chiều rộng đầy đủ, với thanh bên trái, với thanh bên phải hoặc với thanh bên ở cả hai bên, để bộ lọc và danh mục nằm đúng vị trí mà danh mục sản phẩm của bạn cần.
Lưu trữ, giỏ hàng và thanh toán
Trang lưu trữ cửa hàng, trang lưu trữ danh mục sản phẩm, giỏ hàng và thanh toán đều đi kèm dưới dạng mẫu, cùng với các ghi đè mẫu WooCommerce mà giao diện cung cấp.
Các mẫu cửa hàng được liệt kê trong nhóm woocommerce ở bảng Mẫu của Trình chỉnh sửa trang, cùng với các mẫu Canvas, và được đặt lại từ cùng màn hình đó.
Gán bố cục cho từng sản phẩm từ trình chỉnh sửa, hoặc đặt mặc định cho toàn bộ cửa hàng trong Tùy chọn giao diện. Mẫu bạn tùy chỉnh trong Trình chỉnh sửa trang vẫn giữ nguyên qua các lần cập nhật, và Canvas sẽ cho bạn biết mẫu nào đã thay đổi sau khi cập nhật.
39 tùy chọn cửa hàng, 5 tab
Cài đặt mặc định trên toàn cửa hàng cho danh mục, trang sản phẩm, giỏ hàng và thanh toán, cùng với giỏ hàng mini trên header, kèm chế độ chỉ hiển thị danh mục dành cho cửa hàng nhận yêu cầu báo giá. Số sản phẩm mỗi trang, phân trang, hình dạng ảnh sản phẩm, ảnh thư viện bổ sung và lớp phủ thẻ đều được cài đặt tại đây, nhưng một khối tự đặt một trong các tùy chọn này vẫn được ưu tiên trên trang mà khối đó được chèn.
- Danh mục: số sản phẩm mỗi hàng ở từng kích thước màn hình, hình dạng ảnh, hành vi khi di chuột, nhãn giảm giá
- Trang sản phẩm: nội dung hiển thị trên màn hình sản phẩm đơn và thanh thêm vào giỏ hàng cố định
- Giỏ hàng và thanh toán: thanh tiến trình miễn phí vận chuyển, và trang thanh toán không có gì gây xao nhãng
- Giỏ hàng mini: giỏ hàng trên header hoạt động thế nào khi khách thêm sản phẩm
- Chế độ danh mục: ẩn giá và nút mua, hiển thị nút yêu cầu báo giá
Tùy chọn cửa hàng giúp bạn bán hàng Chế độ danh mục Danh sách yêu thích
Năm công tắc WooCommerce
WooCommerce tải các tệp script và CSS trên mọi trang của trang web, kể cả những trang không bán gì. Năm công tắc này sẽ gỡ bỏ điều đó, và mỗi công tắc đều có thể hoàn tác.
- Gỡ bỏ JavaScript của WooCommerce trên các trang không hiển thị nội dung cửa hàng
- Tắt theo dõi nguồn gốc đơn hàng nếu bạn không đọc các báo cáo đó
- Ngừng script cart fragments truy vấn liên tục ở mỗi lần tải trang
- Không tải thư viện đo độ mạnh mật khẩu ngoài trang tài khoản và thanh toán
- Không tải thư viện Select2 đi kèm ngoài trang thanh toán và tài khoản
21 bản demo là cửa hàng WooCommerce hoạt động thực tế
Sản phẩm, danh mục, thuộc tính, giỏ hàng và thanh toán, đã được nhập sẵn và sẵn sàng cho một đơn hàng thử. Xem trực tiếp từng mục trước khi bạn quyết định.
Bản demo Bag Store, xem trước trực tiếp (mở trong tab mới)
Cửa hàng & Thương mại điện tử · 9 trang · Nội dung cài đặt: các khối và loại nội dung của bản demo Bag Store
Bản demo CanvasRoam, xem trước trực tiếp (mở trong tab mới)
Portfolio & Cá nhân · 10 trang · Nội dung cài đặt: các khối và loại nội dung của bản demo CanvasRoam
Bản demo Christmas Store, xem trước trực tiếp (mở trong tab mới)
Cửa hàng & Thương mại điện tử · 6 trang
Bản demo Clothing Store, xem trước trực tiếp (mở trong tab mới)
Cửa hàng & Thương mại điện tử · 19 trang · Nội dung cài đặt: các khối và loại nội dung của bản demo Clothing Store
Bản demo Conference, xem trước trực tiếp (mở trong tab mới)
Sự kiện & Đám cưới · 25 trang · Nội dung cài đặt: các khối và loại nội dung của bản demo Conference
Bản demo Drone, xem trước trực tiếp (mở trong tab mới)
Cửa hàng & Thương mại điện tử · 12 trang
Bản demo eBook, xem trước trực tiếp (mở trong tab mới)
Cửa hàng & Thương mại điện tử · 9 trang
Bản demo Fashion Shop, xem trước trực tiếp (mở trong tab mới)
Cửa hàng & Thương mại điện tử · 25 trang
Bản demo Fashion Store, xem trước trực tiếp (mở trong tab mới)
Cửa hàng & Thương mại điện tử · 16 trang
Bản demo FORM 2026, xem trước trực tiếp (mở trong tab mới)
Sự kiện & Đám cưới · 14 trang · Nội dung cài đặt: các khối và loại nội dung của bản demo FORM 2026
Bản demo Furniture, xem trước trực tiếp (mở trong tab mới)
Cửa hàng & Thương mại điện tử · 12 trang
Bản demo Game of Canvas, xem trước trực tiếp (mở trong tab mới)
Giải trí & Cộng đồng · 12 trang · Những gì được cài đặt: các khối và loại nội dung của bản demo Game of Canvas
Bản demo Illustrator, xem trước trực tiếp (mở trong tab mới)
Portfolio & Cá nhân · 7 trang · Nội dung cài đặt: các khối và loại nội dung của bản demo Illustrator
Bản demo Jewelry Boutique, xem trước trực tiếp (mở trong tab mới)
Cửa hàng & Thương mại điện tử · 17 trang
Bản demo Pottery Shop, xem trước trực tiếp (mở trong tab mới)
Cửa hàng & Thương mại điện tử · 12 trang
Bản demo Speaker Store, xem trước trực tiếp (mở trong tab mới)
Cửa hàng & Thương mại điện tử · 11 trang
Bản demo Supplement Store, xem trước trực tiếp (mở trong tab mới)
Cửa hàng & Thương mại điện tử · 13 trang
Bản demo Wildroot Gear, xem trước trực tiếp (mở trong tab mới)
Cửa hàng & Thương mại điện tử · 14 trang · Nội dung cài đặt: các khối và loại nội dung của bản demo Wildroot Gear
Các trang cửa hàng hiện có của bạn được giữ lại, không bị nhân bản
Nỗi lo thường gặp khi nhập thiết kế cửa hàng là thức dậy và thấy có hai trang thanh toán. Canvas ánh xạ các trang WooCommerce trong bản demo sang những trang mà website của bạn đã có.
Màn hình nhập mà mọi bản demo cửa hàng đều đi qua, cùng tính năng khôi phục để hoàn tác lần nhập đó.
Một cửa hàng, một giỏ hàng, một quy trình thanh toán
Trình nhập dữ liệu tìm các trang WooCommerce hiện có của bạn và trỏ thẳng menu, liên kết của bản demo đến các trang đó.
Có thể hoàn tác
Mọi thứ mà quá trình nhập tạo ra đều được theo dõi, nên chỉ với một màn hình bạn có thể xóa nội dung bản demo và khôi phục các tùy chọn cùng menu đã có trước đó.
Sản phẩm đi kèm
Sản phẩm, danh mục, thuộc tính và màu biến thể của bản demo đi kèm với thiết kế, nên kho hàng hiển thị đúng khi bạn thay bằng dữ liệu của mình.
Hoặc chỉ những trang
Chọn nhập theo trang và bạn sẽ chỉ lấy các trang của bản demo, không kèm Tùy chọn giao diện, menu hoặc trang chủ.
Bán hàng với Canvas
Những điều chủ cửa hàng hỏi đầu tiên. Tài liệu trình bày chi tiết từng khối và tùy chọn.
Tôi có còn cần plugin WooCommerce không?
Có, Canvas bổ sung thêm khối, mẫu và tùy chọn trên nền WooCommerce, và không thay thế bất kỳ phần nào của nó. Đơn hàng, sản phẩm, thuế, vận chuyển và thanh toán vẫn nằm trong WooCommerce, nơi các tiện ích mở rộng khác của bạn mong đợi chúng. Nếu bạn bắt đầu từ bản demo cửa hàng, Trình hướng dẫn cài đặt sẽ tự cài và kích hoạt WooCommerce cho bạn trước khi quá trình nhập chạy.
Nhập bản demo cửa hàng có thay thế trang cửa hàng và trang thanh toán của bạn không?
Không. Trình nhập Canvas sử dụng lại các trang WooCommerce mà trang web của bạn đã có, nên sẽ không xuất hiện thêm trang cửa hàng, giỏ hàng, thanh toán hay tài khoản nào. Sản phẩm và đơn hàng hiện có của bạn được giữ nguyên.
Bạn có thể kết hợp các khối này với khối riêng của WooCommerce không?
Có, các khối cửa hàng của Canvas là khối đăng ký thông thường, nên chúng nằm cùng với khối WooCommerce và khối lõi trong cùng một mẫu và cùng một trang. Bạn có thể thay thế từng khối một mà không cần cam kết với toàn bộ bố cục.
Các ô chọn màu hoạt động như thế nào?
Gán màu cho giá trị thuộc tính sản phẩm trong quản trị WordPress, khối Canvas Variation Swatches sẽ hiển thị thuộc tính đó dưới dạng chấm màu hoặc nút dạng viên thay cho danh sách thả xuống, trên trang sản phẩm và trong các mẫu sử dụng nó.
Các khối cửa hàng có được bao gồm trong gói của tôi không?
Có: tất cả 24 khối cửa hàng của Canvas đều là khối cao cấp, và mọi gói đều bao gồm mọi khối cao cấp. Không có tiện ích bổ sung cho cửa hàng và cũng không có gói thương mại điện tử riêng. Các giao diện khác thường tách riêng phần này: xem nhanh là một tính năng của Astra Pro, còn OceanWP bán plugin eCommerce Pro như một sản phẩm riêng.
Tập trung vào cửa hàng, không phải phần hạ tầng
Mọi gói đều bao gồm tất cả 24 khối cửa hàng, tất cả 18 mẫu cửa hàng và tất cả 21 bản demo cửa hàng. Không có cấp thương mại điện tử nào cần nâng cấp lên.