# 9 bố cục cửa hàng URL: https://canvaswp.com/vi/templates/shop/ Updated: 2026-11-03 Mẫu Bố cục danh mục WooCommerce: số cột và vị trí thanh bên, trang danh mục, trang bộ lọc, sau đó là giỏ hàng và thanh toán. [Mở bản trình diễn trực tiếp](https://demos.canvaswp.com/classic/) [Duyệt các bản demo](https://canvaswp.com/vi/demos/) Cập nhật 3 tháng 11, 2026 - [4 cột (mở trong tab mới)](https://demos.canvaswp.com/classic/shop/) - [3 cột (mở trong tab mới)](https://demos.canvaswp.com/classic/shop-3/) - [2 cột (mở trong tab mới)](https://demos.canvaswp.com/classic/shop-2-right-sidebar/) - [1 cột (mở trong tab mới)](https://demos.canvaswp.com/classic/shop-1/) - [Bố cục sản phẩm (mở trong tab mới)](https://demos.canvaswp.com/classic/product/pink-printed-dress/) - [Danh mục - Parallax (mở trong tab mới)](https://demos.canvaswp.com/classic/shop-category-parallax/) - [Bộ lọc kết hợp (mở trong tab mới)](https://demos.canvaswp.com/classic/shop-combination-filter/) - [Giỏ hàng (mở trong tab mới)](https://demos.canvaswp.com/classic/cart/) - [Thanh toán (mở trong tab mới)](https://demos.canvaswp.com/xmas/xmas-checkout/) Mỗi liên kết mở ra một trang thật trên trang trình diễn trực tiếp, được dựng bằng chính giao diện và các khối bạn cài đặt. Mỗi trang được xây dựng từ những thành phần nào ## Các trang cửa hàng được xây dựng từ khối và mẫu WooCommerce vận hành cửa hàng: sản phẩm, tồn kho, giỏ hàng và thanh toán. Canvas thiết kế các trang mà khách mua hàng đi qua, và mọi bố cục này đều được tạo từ các thành phần có sẵn trong giao diện và plugin của giao diện. ### Cột danh mục sản phẩm Trang bốn cột chính là trang cửa hàng WooCommerce, được hiển thị bởi mẫu lưu trữ sản phẩm của giao diện. Các trang ba, hai và một cột chứa khối Canvas Products, và cài đặt Columns của khối sẽ quyết định số cột trong mỗi hàng, bên trong một trang sử dụng một trong bốn mẫu cửa hàng: toàn chiều rộng, hoặc có thanh bên bên trái, bên phải hoặc cả hai bên. ### Trang sản phẩm Sản phẩm lấy bố cục từ mẫu bạn chọn khi chỉnh sửa. Ngoài trang tiêu chuẩn, còn có các phiên bản với thanh bên ở một bên hoặc cả hai bên, phần tóm tắt cố định, ô chọn màu và danh sách thông số kỹ thuật, cùng mẫu Linked Gallery cũng có dạng băng chuyền. ### Banner danh mục Một loạt khối Parallax Image cao toàn màn hình, mỗi khối một hình cho mỗi danh mục, và di chuyển theo khi trang cuộn. Khối có lớp phủ và nội dung riêng, nên tiêu đề và nút bấm có thể đưa khách hàng đến khu vực đó của cửa hàng. ### Bộ lọc kết hợp Khối Canvas Products với hai thanh Grid Filter phía trên, một thanh có nhãn Select Category và một thanh có nhãn Sort By, để người mua thu hẹp kho sản phẩm theo một loại và sắp xếp theo tên hoặc giá ngay tại chỗ, không cần tải lại trang. ### Giỏ hàng Giỏ hàng trình diễn sử dụng khối Cart do WooCommerce cung cấp. Canvas bổ sung các khối Cart Table và Cart Totals, dành cho cửa hàng muốn bố trí trang giỏ hàng theo từng khối. ### Thanh toán Giỏ hàng trống thì không có trang thanh toán để hiển thị, nên liên kết này mở trang thanh toán của bản demo Christmas Store, được xây dựng từ các khối Canvas Checkout Billing và Checkout Order Review. Bản demo đó được nhập cùng sản phẩm và trang thanh toán này. Cách chọn ## Bố cục cửa hàng nào phù hợp với kho sản phẩm của bạn Để quy mô danh mục quyết định bố cục. Một số ít sản phẩm với ảnh đẹp sẽ trông tốt nhất trong thẻ rộng, hiển thị hai hoặc ba sản phẩm mỗi hàng, hoặc một cột duy nhất khi mỗi sản phẩm cần một đoạn mô tả riêng. Danh mục lớn cần hiển thị nhiều hơn cùng lúc trên màn hình, và đó là mục đích của trang cửa hàng bốn cột. Dùng bộ lọc kết hợp khi người mua suy nghĩ theo hai cách cùng lúc, theo loại rồi đến giá. Đặt banner danh mục trên trang chủ hoặc lookbook, nơi hình ảnh thu hút người mua trước khi lưới sản phẩm làm được điều đó. Trên trang sản phẩm, hãy chọn mẫu theo yếu tố thúc đẩy khách mua hàng. Thời trang bán nhờ màu sắc, nên phiên bản có ô chọn màu rất đáng giá. Sản phẩm kỹ thuật bán nhờ chi tiết, và đó chính là mục đích của danh sách thông số kỹ thuật. Còn phần tóm tắt cố định giúp giá và nút mua luôn hiển thị khi trang dài. 21 trong số 88 bản demo website được nhập dưới dạng cửa hàng WooCommerce, với sản phẩm, danh mục cùng các trang giỏ hàng và thanh toán đã sẵn sàng. ### Các tính năng cửa hàng 24 khối WooCommerce và 18 mẫu cửa hàng, từ thư viện ảnh sản phẩm đến phần xem lại đơn hàng. - [WooCommerce trong Canvas](https://canvaswp.com/vi/woocommerce/) ### Hướng dẫn từng bước Sản phẩm, trang cửa hàng, trang sản phẩm, giỏ hàng và thanh toán, theo đúng thứ tự bạn sẽ xây dựng chúng. - [Bắt đầu một cửa hàng WooCommerce](https://canvaswp.com/vi/guides/start-a-woocommerce-store-with-wordpress/) ### Các bản demo cửa hàng Thời trang, gốm sứ, nội thất và nhiều hơn nữa, mỗi bản đều có thể xem trước từng trang trước khi bạn nhập. - [So sánh các bản demo thương mại điện tử](https://canvaswp.com/vi/wordpress-themes/ecommerce/) Thêm mẫu ## Phần còn lại của thư viện - [Mẫu trang 13](https://canvaswp.com/vi/templates/page-templates/) - [Shortcode và Phần tử 57](https://canvaswp.com/vi/templates/shortcodes/) - [Bố cục Portfolio 27](https://canvaswp.com/vi/templates/portfolio/) - [Bố cục blog 35](https://canvaswp.com/vi/templates/blog/)