# Bắt đầu cửa hàng WooCommerce với WordPress

URL: https://canvaswp.com/vi/guides/start-a-woocommerce-store-with-wordpress/
Updated: 2026-11-03

Hướng dẫn

WooCommerce quản lý cửa hàng: sản phẩm, đơn hàng, thuế và thanh toán. Điều nó không làm là khiến tất cả những thứ đó mang dáng dấp thương hiệu của bạn. Hướng dẫn này xây dựng bốn màn hình mà khách mua hàng thực sự nhìn thấy, bằng các khối trong trình chỉnh sửa mà WordPress đã có sẵn.

Đã xuất bản 5 tháng 9, 2026 Cập nhật 3 tháng 11, 2026 Viết bởi nhóm Canvas tại SemiColonWeb

## Bước 1: Cài đặt WooCommerce

WooCommerce là plugin miễn phí từ thư viện plugin WordPress, và vẫn đảm nhận mọi phần thương mại: dữ liệu sản phẩm, tồn kho, đơn hàng, quy tắc thuế, khu vực vận chuyển và cổng thanh toán. Canvas không bao giờ thay thế lớp đó, vì vậy các tiện ích mở rộng WooCommerce khác của bạn vẫn tiếp tục hoạt động.

### Hai cách cài đặt

- **Để Trình hướng dẫn cài đặt xử lý.** Chọn một bản demo cửa hàng trong lúc cài đặt, bước cài plugin sẽ cài và kích hoạt WooCommerce trước khi nhập dữ liệu, vì một cửa hàng cần plugin cửa hàng.
- **Tự cài đặt** từ mục Plugins, Add New, rồi chạy phần thiết lập ban đầu của WooCommerce. Hãy làm vậy nếu bạn đang thêm cửa hàng vào một website bạn đang vận hành.

Dù chọn cách nào, thực hiện thiết lập WooCommerce một lần và trả lời các câu hỏi về quốc gia, đơn vị tiền tệ và những gì bạn bán. Các câu trả lời này sẽ quyết định thuế và vận chuyển về sau, và việc sửa lại rất rườm rà.

Thiết lập dịch vụ gửi email trước khi bạn nhận đơn hàng thật. Email xác nhận đơn hàng mặc định được gửi từ WordPress qua máy chủ của bạn, và một cửa hàng có hóa đơn rơi vào thư rác sẽ phát sinh các phiếu hỗ trợ mà bạn không thể trả lời.

## Bước 2: Bắt đầu từ bản demo cửa hàng, hoặc từ một danh mục trống

Ở đây bạn có một lựa chọn, và đáng để dành mười phút suy nghĩ.

### Nhập bản demo cửa hàng

21 trong số 88 bản demo là cửa hàng WooCommerce hoạt động đầy đủ. Nhập một bản sẽ cung cấp sản phẩm, danh mục, thuộc tính, màu mẫu (swatch), cửa hàng và trang sản phẩm được thiết kế sẵn, giỏ hàng và thanh toán, tất cả đều đã được thiết lập sẵn và có thể chỉnh sửa. Đây là cách nhanh nhất để thấy các phần ghép với nhau như thế nào, và bạn có thể hoàn tác toàn bộ quá trình nhập nếu quyết định không dùng.

### Xây dựng trên danh mục sản phẩm riêng của bạn

Nếu bạn đã bán hàng và có sản phẩm trong cơ sở dữ liệu, hãy chọn phạm vi chỉ trang để đưa vào website hiện có của bạn. Bạn nhận các trang demo và bản ghi mà chúng sử dụng mà không kèm cài đặt, menu hay trang chủ của bản demo, và danh mục sản phẩm của bạn vẫn giữ nguyên vị trí.

Dù theo cách nào, các trang WooCommerce trên website của bạn đều được sử dụng lại, nên chỉ có một cửa hàng, một giỏ hàng, một trang thanh toán và một trang tài khoản.

[Cách nhập bản demo hoạt động chi tiết](https://canvaswp.com/vi/guides/import-a-wordpress-demo-website/)

[Chín bản demo cửa hàng WooCommerce](https://canvaswp.com/vi/wordpress-themes/ecommerce/)

## Bước 3: Thêm sản phẩm đầu tiên của bạn

Sản phẩm là bản ghi của WooCommerce, được thêm trong mục Sản phẩm ở trang quản trị WordPress, và phần này cố ý đơn giản. Hãy dành thời gian ở đây thay vì bố cục, vì một trang sản phẩm tốt chủ yếu là dữ liệu sản phẩm tốt.

- **Một ảnh sản phẩm rõ nét cho mỗi sản phẩm,** được chụp theo cùng một cách cho mọi mặt hàng. Lưới danh mục trông có chủ đích khi các hình dạng đồng nhất, và trông ghép vội khi không.
- **Mô tả ngắn gọn trả lời câu hỏi thực sự mà người mua quan tâm.** Kích thước, chất liệu, thời gian giao hàng và cách xử lý nếu sản phẩm không vừa.
- **Danh mục theo cách khách hàng mua sắm,** chứ không theo cách kho hàng của bạn được sắp xếp.
- **Thuộc tính cho mọi thứ có biến thể.** Màu sắc, kích thước, lớp hoàn thiện. Hãy gán cho các thuật ngữ màu một giá trị màu thực tế trong quản trị, vì đó là thứ biến danh sách thả xuống thành ô mẫu màu sau này.
- **Tồn kho, trọng lượng và kích thước** nếu bạn giao hàng vật lý. Quy tắc vận chuyển sẽ đọc các thông tin này.

Hãy thêm ba sản phẩm trước khi thiết kế bất cứ thứ gì. Bố cục được đánh giá với một mục giữ chỗ duy nhất là bố cục bạn sẽ phải làm lại.

## Bước 4: Thiết kế trang cửa hàng

Cửa hàng về bản chất là một kho sản phẩm, và nhiệm vụ của nó là đưa khách nhanh chóng đến trang sản phẩm. Canvas cung cấp các khối dành cho việc này, và cách thường dùng là một thiết lập giao diện với ba lựa chọn bố cục.

### Các khối

Lưới sản phẩm lấy dữ liệu từ một danh mục, một thẻ, một kết quả tìm kiếm hoặc một danh sách chọn thủ công. Băng chuyền sản phẩm làm điều tương tự nhưng xếp thành một hàng trên trang chủ. Thẻ danh mục sản phẩm đưa người xem đến một phần của cửa hàng. Bộ lọc giá cho phép người mua thu hẹp một danh mục dài. Mỗi thành phần là một khối có bảng thiết lập, vì vậy số cột, nguồn và thứ tự đều là các điều khiển, không phải mã.

### Mẫu nằm bên dưới

Bản thân cửa hàng là một mẫu khối mà bạn có thể mở trong Trình chỉnh sửa trang. Bố trí toàn chiều rộng, với thanh bên trái, thanh bên phải hoặc cả hai, tùy theo việc bộ lọc và danh mục có xứng đáng với vị trí trong danh mục sản phẩm của bạn hay không. Tổng cộng có 18 mẫu cửa hàng, bao gồm trang cửa hàng, trang sản phẩm, trang lưu trữ, giỏ hàng và thanh toán.

### Thiết lập mặc định toàn cửa hàng

Tùy chọn giao diện có 39 cài đặt cửa hàng trên 5 thẻ: danh mục, trang sản phẩm, giỏ hàng và thanh toán, giỏ hàng mini ở header, và chế độ danh mục. Số sản phẩm mỗi trang, phân trang, hình dạng ảnh sản phẩm, việc có hiện thêm ảnh thư viện khi di chuột và nội dung lớp phủ khi di chuột đều nằm ở đó. Khối nào tự đặt một trong số này vẫn được ưu tiên trên trang chứa nó.

**Tùy chọn giao diện, Cửa hàng.** Giá trị mặc định toàn cửa hàng, được ghi đè bởi bất kỳ khối nào có thiết lập riêng.

## Bước 5: Thiết kế trang sản phẩm

Đây là trang bán hàng, nên nó xứng đáng có bố cục tốt hơn cách sắp xếp mặc định mà mọi cửa hàng trên internet đang dùng.

### Xây dựng từ các thành phần

Mọi phần của trang sản phẩm đều là một khối: thư viện ảnh, giá, xếp hạng sao, siêu dữ liệu, mô tả ngắn, ô chọn biến thể, nút thêm vào giỏ hàng, các tab, hàng chia sẻ và sản phẩm liên quan. Bạn có thể di chuyển, đổi kiểu hoặc bỏ hẳn bất kỳ khối nào, và trang vẫn hoạt động vì mỗi khối tự yêu cầu WooCommerce cung cấp dữ liệu riêng của nó.

### Hoặc bắt đầu từ một bố cục có sẵn

Nếu bạn không muốn bắt đầu từ các phần rời, hãy chọn một trong các bố cục sản phẩm đơn có sẵn và điều chỉnh các thành phần: bố cục mặc định, phần tóm tắt cố định bám theo thư viện ảnh khi cuộn, dạng danh sách, thiết kế lấy màu sắc làm chủ đạo, thiết kế dành cho cửa hàng, hai bố cục thư viện ảnh với liên kết tùy chỉnh, và các biến thể có thanh bên bên trái, bên phải hoặc hai thanh bên. Gán bố cục cho từng sản phẩm từ trình chỉnh sửa, hoặc đặt bố cục mặc định của cửa hàng trong Tùy chọn giao diện.

### Nên đặt gì ở phần đầu trang hiển thị

Ảnh sản phẩm, tên, giá, lựa chọn biến thể và nút thêm vào giỏ hàng. Mọi thứ khác, kể cả phần mô tả mà hầu hết mọi người không bao giờ đọc, có thể nằm bên dưới. Hãy kiểm tra điều đó trên điện thoại trước khi bạn quyết định không đồng ý.

## Bước 6: Giỏ hàng và thanh toán

Hai màn hình này là nơi tiền bị thất thoát, và ở hầu hết các giao diện, đây là hai màn hình bạn không được phép chạm vào. Ở đây, chúng là các khối như mọi thứ khác.

### Giỏ hàng

Khối cart table cho nội dung giỏ hàng, khối cart totals cho các con số, và khối cross-sells cho sản phẩm mà người mua thực sự có thể thêm vào. Giữ ngắn gọn và làm cho nút bấm thật dễ thấy. Lỗi giỏ hàng phổ biến nhất là một loạt nội dung khuyến mãi xen giữa phần tổng và nút thanh toán.

### Trang thanh toán

Một khối thanh toán cho biểu mẫu, một khối xem lại đơn hàng cho những gì đang được mua, và một khối thông báo cho các thông điệp cho người mua biết đã có chuyện gì xảy ra. WooCommerce vẫn xử lý đơn hàng, thanh toán và email; bạn quyết định cách màn hình hiển thị.

### Những quy tắc tự mang lại lợi ích

- Chỉ yêu cầu những trường tối thiểu mà việc giao hàng thực sự cần.
- Hiển thị tổng chi phí, bao gồm phí giao hàng, trước bước thanh toán.
- Cho biết đơn hàng sẽ đến khi nào, tính bằng số ngày và viết thành chữ.
- Đặt chính sách đổi trả ở vị trí người mua lần đầu còn e dè dễ nhìn thấy.

## Bước 7: Ô chọn biến thể, thêm vào giỏ hàng và kiểu thẻ

Ba hành vi cửa hàng mà mỗi cái thường cần một plugin riêng đều đã nằm trong phần tích hợp.

- **Ô chọn màu thuộc tính.** Gán màu cho một giá trị thuộc tính sản phẩm trong khu vực quản trị, và các sản phẩm có biến thể sẽ hiển thị chấm màu hoặc nút dạng viên thuốc thay cho danh sách thả xuống. Khi đó, người mua chọn biến thể bằng cách nhìn trực quan, điều này đặc biệt quan trọng trên điện thoại.
- **Thêm vào giỏ hàng mà không tải lại trang.** Khi thêm sản phẩm từ một lưới, carousel hoặc lớp phủ thẻ, giỏ hàng được cập nhật ngay tại chỗ, nên người mua vẫn ở trang họ đang xem và giỏ hàng trên header tiếp tục hiển thị số lượng.
- **Kiểu thẻ sản phẩm.** Ghim mọi ảnh danh mục vào cùng một hình dạng để lưới thẳng hàng, chọn xem ảnh thư viện bổ sung hiện khi di chuột hay chạy như trình chiếu, và quyết định lớp phủ khi di chuột sẽ hiển thị gì: mua, xem nhanh hoặc cả hai.

Cả ba đều là cài đặt. Không cái nào cần đoạn mã, child theme hay plugin thứ hai, và mỗi cái đều có thể tắt nếu bạn thích hành vi đơn giản hơn.

Một số giao diện bán riêng lớp tính năng này. OceanWP cung cấp tích hợp WooCommerce miễn phí và bán Ocean eCommerce Pro như một sản phẩm riêng, còn [cách Canvas so sánh với OceanWP](https://canvaswp.com/vi/compare/oceanwp/) trình bày những gì mỗi gói bao gồm cho một cửa hàng.

## Bước 8: Thanh toán, tốc độ, rồi đến một đơn hàng thử

Thiết kế làm sau cùng, phần tiền bạc làm trước. Hãy hoàn tất các bước này trước khi bạn thông báo cho mọi người rằng cửa hàng đã mở.

### Thiết lập thương mại trong WooCommerce

- Kết nối các cổng thanh toán bạn dự định sử dụng và hoàn tất xác minh, thường mất lâu hơn bạn nghĩ.
- Thiết lập quy tắc thuế và khu vực vận chuyển cho những địa điểm bạn thực sự giao hàng đến.
- Viết các trang hoàn tiền, đổi trả và giao hàng, rồi liên kết chúng từ footer và trang thanh toán.

### Tốc độ trong Canvas

WooCommerce tải script và stylesheet trên mọi trang của website, kể cả những trang không bán gì. Năm công tắc sẽ thu lại điều đó: gỡ 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 ghi nhận nguồn đơn hàng, ngăn đoạn script cart fragments liên tục hỏi máy chủ trên mọi trang có hiển thị giỏ hàng, và bỏ các thư viện kiểm tra độ mạnh mật khẩu và select ngoài các trang tài khoản và thanh toán. Chúng nằm trong số 35 tối ưu hóa, và mỗi tùy chọn đều có thể hoàn tác.

### Sau đó, hãy đặt một đơn hàng thật

Mua thử một món hàng từ cửa hàng của chính bạn, trên điện thoại, bằng dữ liệu di động. Thanh toán bằng thẻ thật nếu cổng thanh toán của bạn hỗ trợ hoàn tiền thử nghiệm. Kiểm tra email xác nhận có đến không, kiểm tra đơn hàng có xuất hiện trong quản trị không, rồi tự hoàn tiền cho mình. Mọi lỗi bạn phát hiện trong năm phút đó là lỗi mà khách hàng lẽ ra đã phát hiện thay bạn.

**Hiệu năng, tab WooCommerce.** Năm công tắc có thể đảo ngược cho các script mà trang không bao giờ sử dụng.

## Nguồn

Khi hướng dẫn này mô tả nội dung nằm ngoài chính Canvas, đây là các trang chính thức có tài liệu về nội dung đó.

- [Cài đặt và gỡ cài đặt WooCommerce](https://woocommerce.com/document/installing-uninstalling-woocommerce/) woocommerce.com · WooCommerce miễn phí, cài đặt từ màn hình Plugin và mở trình hướng dẫn cài đặt riêng của nó
- [Trang WooCommerce](https://woocommerce.com/document/woocommerce-pages/) woocommerce.com · WooCommerce chỉ định một trang riêng cho cửa hàng, giỏ hàng, thanh toán và tài khoản
- [Thiết lập thuế trong WooCommerce](https://woocommerce.com/document/setting-up-taxes-in-woocommerce/) woocommerce.com · Thuế suất được đặt trong cài đặt WooCommerce
- [Thiết lập khu vực vận chuyển](https://woocommerce.com/document/setting-up-shipping-zones/) woocommerce.com · Vùng giao hàng là một khu vực địa lý mà bạn giao hàng tới
- [Theo dõi nguồn đơn hàng](https://woocommerce.com/document/order-attribution-tracking/) woocommerce.com · Ghi nhận nguồn đơn hàng là gì và cài đặt WooCommerce giúp tắt tính năng này

Việc nên làm tiếp theo

## Bước tiếp theo

Hai hướng dẫn về phần còn lại của trang web quanh cửa hàng, và toàn bộ tính năng của cửa hàng.

[Hướng dẫn **Xây dựng trang web nhà hàng** Quy trình nhập từ đầu đến cuối trên một dự án thực tế, cùng các chỉnh sửa tiếp theo.](https://canvaswp.com/vi/guides/build-a-restaurant-website-with-wordpress/) [Hướng dẫn **Xây dựng website cho khách hàng** Một giấy phép cho mọi khách hàng: khóa giấy phép, bản sao staging và cách bàn giao.](https://canvaswp.com/vi/guides/build-client-websites-with-wordpress/) [Sản phẩm **Canvas và WooCommerce** 24 khối cửa hàng và 18 mẫu cửa hàng.](https://canvaswp.com/vi/woocommerce/)

Câu hỏi

## Câu hỏi thường gặp

[FAQ đầy đủ](https://canvaswp.com/vi/faq/) trả lời các thắc mắc còn lại, và [tài liệu](https://docs.canvaswp.com/) giải thích chi tiết mọi cài đặt.

**Tôi có còn cần plugin WooCommerce không?**

Có, cửa hàng Canvas vẫn chạy trên plugin WooCommerce. Canvas bổ sung khối, mẫu và tùy chọn lên trên plugin và để plugin tiếp tục đảm nhiệm vai trò chính, nên đơn hàng, sản phẩm, thuế, vận chuyển và thanh toán vẫn nằm đúng nơi các tiện ích khác của bạn mong đợi. 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ẽ cài và kích hoạt WooCommerce trước khi quá trình nhập diễn ra.

**Các khối cửa hàng có phải là một khoản mua thêm không?**

Không, các khối cửa hàng Canvas đi kèm mọi gói mà không mất thêm chi phí. Tất cả 24 khối cửa hàng đều là khối cao cấp, và mọi gói đều bao gồm mọi khối cao cấp, cùng với 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ử riêng và không có tiện ích bổ sung cửa hàng.

**Bạn có thể kết hợp các khối này với các khối WooCommerce không?**

Có, bạn có thể kết hợp tự do: các khối cửa hàng Canvas là khối đăng ký thông thường, nên chúng đặt cạnh khối WooCommerce và khối lõi trong cùng một mẫu và cùng một trang. Thay từng phần một và giữ nguyên phần còn lại của bố cục.

**Nhập bản demo cửa hàng có tạo ra hai trang thanh toán không?**

Không, khi nhập bản demo cửa hàng Canvas, bạn chỉ còn một trang thanh toán. Trình nhập sẽ tìm các trang cửa hàng, giỏ hàng, thanh toán và tài khoản mà trang web của bạn đã có, rồi trỏ menu và liên kết của bản demo tới các trang đó, nhờ vậy bạn giữ lại mỗi loại một trang. Sản phẩm và đơn hàng hiện có của bạn được giữ nguyên, và toàn bộ quá trình nhập có thể được hoàn tác.
