[Series viết theme bán hàng Woocommerce] 1. Chuẩn bị

Nói đến Woocommerce chắc chắn bạn không còn xa lạ gì với nó nữa, đó là một plugin tuyệt vời để tạo nên một trang shop online nhanh chóng với mã nguồn WordPress. Bạn có thể mua các theme có hỗ trợ Woocommerce hoặc có thể tạo ra một theme sử dụng Woocommerce thông qua loạt series hướng dẫn này.

Cài đặt WordPress và Woocommerce

Woocommerce là một plugin trên wordpress, và trước khi muốn tạo giỏ hàng thì chúng ta phải cài đặt wordpress trước đã. Mình khuyên bạn nên cài bản mới nhất được tải từ trang chủ tại đây.

Bạn hãy xem lại bài: Hướng dẫn tạo một website WordPress từ A-Z, để cài đặt một trang WordPress cơ bản nhé.

Sau khi cài xong WordPress thì bây giờ chúng ta tiến hành cài đặt Plugin Woocommerce.

• Truy cập đến phần quản tri của website bằng đường dẫn domain/admin hoặc domain/wp-admin.
• Vào phần Giói mở rộng => Cài mới => nhập tên Woocommerce và cài đặt plugin như hình dưới.

• Cài đặt xong thì bạn kích hoặc plugin này lên.
• Sau khi kích hoạt xong bạn sẽ thấy một bản cài đặt các thông tin của Woocommerce, bỏ qua và không cần quan tâm, mình sẽ làm sau nhé.

Thiết lập Plugin Woocommerce

Bây giờ chúng ta sẽ tiến hành thiết lập plugin Woocommerce theo các bước sau:

• Truy cập đến WooCommerce và vào phần “cài đặt”.

• Bỏ qua phần General options vì mình sẽ không sử dụng nó trong theme mình cài đặt phần Currency options như sau để hiển thị định dạng tiền tệ Việt Nam: Nếu bạn sử dụng đồng đơn vị khác thì có thể cài đặt tương tự.

• Bạn nhấn “lưu thay đổi” để lưu các cài đặt, các phần khác mình sẽ cài đặt trong quá trình làm.
• Tiếp theo bạn nhấn vào “tình trạng” trong Woocommerce và kéo xuống phần WC Pages để xem các trang đã cài đặt chưa. Nếu nó đỏ như thế này:

• Thi các bạn tiến hành vào phần “công cụ” phía trên trong “tình trạng” và kéo xuống nhấn vào nút “cài đặt trang” như sau:

• Quay trở lại phần “system status” thấy xanh hết là được.

Cơ bản phần cài đặt này mình không đi sâu, chỉ cài đặt những thứ cơ bản trước, sau đó trong quá trình làm nếu đụng phần cài đặt nào mình sẽ hướng dẫn cụ thể luôn.

Bây giờ chúng ta chuẩn bị giao diện cho phù hợp để dễ dàng tích hợp nhé. Mình khuyên các bạn nên sử dụng các giao diện được thiết kế bằng bootstraps, vì đa phần cấu trúc của nó áp dụng rất tốt, dễ tùy biến và dễ dàng có được một trang website responsite đẹp đúng chuẩn HTML.

Chuẩn bị giao diện HTML

Có một chỗ bạn có thể mua theme HTML mà không cần thiết kế đó là themeforest.net, tuy nhiên các theme trên này đều khá mắc và không phù hợp lắm ở Việt Nam mình. Bạn cũng có thể search từ khóa “html shop template bootstrap” để tìm giao diện phù hợp, sau khi tìm kiếm mình nhặt được theme này:

• Giao diện trên desktop:

• Giao diện trên di động:

• Đây là giao diện mình thấy hài lòng và dễ sử dụng nhất, thậm chí nó còn dễ sử dụng hơn cả các theme tự code tay nữa.
• Dưới đây là toàn bộ file giao diện HTML cần có để làm một trang shop với Woocommerce.

Trong các bài sau mình sẽ hướng dẫn bạn từng bước tích hợp giao diện này vào website nhé.