Thiết kế Website bán hàng từ A-Z (Web 01)

Đây là bài viết đầu tiên trong chuỗi bài viết hướng dẫn Thiết kế website bán hàng từ A-Z cho bạn không biết kĩ thuật.

Mình sẽ hướng dẫn thiết kế website bán hàng đơn giản với chức năng show sản phẩm, đặt hàng online (như ảnh).

shopper-woo-theme1-min

Bước 1. Mua tên miền và Hosting

Tên miền là địa chỉ của website trên Internet, có dạng: themevi.com, vn-zoom.org, vnexpress.net, dantri.com.vn. Nó giống với địa chỉ của ngôi nhà.

Hosting là nơi lưu trữ toàn bộ dữ liệu của website bao gồm bài viết, hình ảnh, video, tài liệu…Nó giống như mảnh đất để xây ngôi nhà.

Mình khuyến khích mua Tên miền và Hosting tại Azdigi Thạch Phạm. Bởi vì ở đây có hosting tối ưu cho WordPress và hỗ trợ rất tốt.

Sử dụng mã AZDG10 để được giảm 10% khi mua hosting tại Azdigi.

Bước 2. Cài đặt WordPress

WordPress là mã nguồn mở được 28% website trên Internet sử dụng. Nó mang lại nhiều tính năng mạnh mẽ cho người dùng, mà không cần bất kỳ kiến thức kĩ thuật nào.

Trước khi đi vào thiết kế website bán hàng, bạn cần cài đặt WordPress. Nếu sử dụng hosting ở Azdigi, hãy cài đặt WordPress theo hướng dẫn này.

Bước 3. Cài đặt Theme Shopper và WooCommerce

Theme (giao diện) WordPress là thành phần tạo nên sức mạnh và sự phổ biến của WordPress. Bạn muốn làm web gì, chỉ cần cài đặt Theme tương ứng.

Bạn muốn thiết kế web bán hàng, chỉ cần cài đặt Theme bán hàng. Bạn muốn thiết kế web công ty, chỉ cần cài đặt Theme công ty.

Hãy truy cập vào liên kết này và tải Theme Shopper WooCommerce Theme – Được phát triển bởi Dessign.net – Theme mà chúng ta sẽ sử dụng trong các bước kết tiếp. Đọc hướng dẫn này nếu bạn không biết cách tải Theme này như nào.

Sau khi tải xong, hãy truy cập vào trang quản lý website tại địa chỉ: themevi.com/wp-admin với themevi.com là tên miền website của bạn.

dang-nhap-vao-wordpress-1-min

Truy cập vào Giao diện > Thêm mới

giao-dien-them-moi1-min

Bấm vào Tải giao diện lên. Bạn sẽ thấy 1 khung hiện ra. Bấm vào Choose File > Chọn file Theme vừa tải về ở phần trên > Cài đặt.

giao-dien-tai-giao-dien-len1-min

và bấm vào Kích hoạt

kich-hoat-theme-shopper-woocommerce-theme-min

Tiếp theo là cài đặt WooCommerce, WooCommerce là công cụ quản lý bán hàng số 1 trong WordPress. Nó giúp bạn bán mọi thứ, kể cả sản phẩm hữu hình lẫn vô hình (như phần mềm, theme, ebook….).

Bạn chỉ cần cài đặt WooCommerce theo hướng dẫn này. Việc thiết lập giao hàng, thanh toán….sẽ được hướng dẫn trong các bước gần cuối bài viết này.

Bước 4. Bắt đầu Thiết kế web bán hàng

4.1. Thiết kế Header

Header của website này bao gồm Logo, Menu và Thanh tìm kiếm

header-shopper-woocommerce1-min

Đầu tiên, để thay đổi Logo, bạn truy cập vào Giao diện > Shopper Theme Settings > Bấm tiếp vào Upload your logo tại mục Custom Logo URL

shopper-theme-settings1-min

Bấm vào Chọn tập tin

media-chon-tap-tin1-min

Một cửa sổ sẽ hiện ra để bạn tìm và chọn ảnh trong máy. Sau khi chọn và tải ảnh lên, chờ tí, ảnh sẽ được tải và bấm vào Sửa

themevi-shopper-woocommerce-dessign1-min

Nhìn qua trái và sao chép đường dẫn ở Địa chỉ File

themevi-shopper-woocommerce-dessign2-min

Dán đường dẫn vào ô Custom Logo URL

themevi-shopper-woocommerce-dessign3-min

Rồi bấm Save Changes ở cuối bài viết.

Tiếp theo là Menu, như web demo bạn sẽ thấy Menu có các phần sau:

  • Home: trang chủ
  • About: trang giới thiệu
  • Shop: cửa hàng, với các menu con là các danh mục sản phẩm
  • My account: tài khoản của khách hàng đăng ký trên web
  • Cart: giỏ hàng
  • Blog: bài viết tư vấn, chia sẻ
  • Contact: trang liên hệ

Vậy bạn cần tạo Trang giới thiệu, liên hệ. Tạo danh mục sản phẩm, và các sản phẩm rồi thêm vào Menu.

Đọc bài viết hướng dẫn tạo Menu này để biết cách làm.

Cuối cùng là thanh tìm kiếm. Nó sẽ tự động xuất hiện ngay sau khi cài đặt Theme, mà không cần làm gì thêm.

4.2. Hiển thị sản phẩm ra trang chủ

Mặc định sản phẩm mới sẽ xuất hiện ở Trang chủ mà không cần phải thiết lập gì!

Trang chủ sẽ xuất hiện 09 sản phẩm, và nút LOAD MORE PRODUCT (bấm vào sẽ hiện ra thêm sản phẩm)

Để đổi chữ Load More Product qua Tiếng Việt, mình sẽ nói ở Bước dịch web, ở gần cuối bài.

4.3. Thiết kế Footer

Footer trang gốc có 2 phần Trên và Dưới

  • Trên: 3 cột
  • Dưới: 2 hàng gồm Liên kết mạng xã hội và Dòng chữ bản quyền

themevi-footer-shopper1-min

Đầu tiên là phần trên, ở đây bạn có thể để 3 mục là Giới thiệu ngắn – Thông tin liên hệ – Hướng dẫn khách hàng (3 mục này rất nhiều website sử dụng, nên mình nghĩ cũng khá hợp lí).

Truy cập vào Giao diện > Widget. Bạn sẽ thấy 3 mục là Footer Widget 1, Footer Widget 2 và Footer Widget 3, tương ứng 3 mục ta vừa nói bên trên.

themevi-footer-shopper2-min

Nhìn qua trái, bên dưới và bạn sẽ thấy Văn bản

widget-van-ban-min

Kéo Văn bản vào Footer Widget 1, bạn sẽ có

widget-van-ban2-min (1)

Điền tên và mô tả của cột và bấm Lưu thay đổi

widget-van-ban3-min

Với cột 2, bạn cũng kéo Văn bản vào Footer Widget 2 và điền thông tin

widget-van-ban4-min

Với cột 3, bạn cũng kéo Văn bản vào Footer Widget 3 và điền thông tin

widget-van-ban5-min

Để chèn liên kết, bạn chỉ cần bôi đen dòng chữ và bấm vào biểu tượng liên kết

widget-van-ban-chen-lien-ket1-min

Điền liên kết và bấm biểu tượng xanh

widget-van-ban-chen-lien-ket2-min

Và kết quả

themevi-footer-shopper-woocommerce11-min

Tiếp theo là dòng liên kết mạng xã hội. Truy cập vào Giao diện > Shopper Theme Settings.

themevi-shopper-theme-settings-social-link1-min

Và điền vào các liên kết mạng xã hội tương ứng cho shop của bạn. Rồi bấm Save changes.

themevi-footer-shopper-woocommerce12-min

Và cuối cùng là dòng chữ bản quyền. Truy cập vào Giao diện > Sửa

giao-dien-sua1-min

Bấm vào Footer.php ở bên phải

footer-php-shopper-woo1-min

Kéo xuống dòng 52, bạn sẽ thấy dòng chữ bản quyền. Đổi lại theo ý bạn thích. Và bấm Cập nhật tập tin

footer-php-shopper-woo2-min

Mình thử sửa!

footer-php-shopper-woo3-min

Và kết quả

footer-php-shopper-woo4-min

4.4. Trang giới thiệu và Liên hệ

Truy cập vào Trang > Thêm trang mới

trang-them-trang-moi1-min

Và tạo lần lượt 2 trang Giới thiệu và Liên hệ

tao-trang-moi1-min

Rồi sau đó thêm vào Menu, nếu muốn!

4.5. Form thanh toán

Đây là form thanh toán mặc định của WooCommerce. Có vẻ thừa một số phần, như quốc gia, mã bưu điện….

Vậy làm sao để xóa một số thành phần, và bỏ “bắt buộc” với một số phần?

Hãy đọc hướng dẫn sửa Form thanh toán bằng Checkout Field Editor nhé!

4.6. Thiết lập WooCommerce

Bao gồm các thiết lập là Giao hàng – Thanh toán và Email nhận đơn hàng.

Mình đã viết các bài chi tiết nói về chúng rồi.

Bước 5. Hướng dẫn sử dụng

Vậy là xong phần thiết kế giao diện rồi. Bây giờ chúng ta đi vào cách sử dụng website.

Bước 6. Thiết lập nâng cao

6.1. Cài đặt công cụ SEO

Xem hướng dẫn cài đặt công cụ tối ưu SEO

6.2. Cài đặt công cụ thống kê truy cập

Hãy sử dụng Google Analytics. Đây là công cụ thống kê truy cập website được nhiều cá nhân, doanh nghiệp sử dụng nhất. Đọc bài viết sau để biết cách cài đặt Google Analytics vào website.

6.3. Cài đặt chứng chỉ SSL (Https)

6.4. Cài đặt email cửa hàng

Email cửa hàng là email có dạng: [email protected] (với diachiwebsite.com là tên miền website). Ví dụ email của mình là [email protected]

Sử dụng email cửa hàng sẽ trông chuyên nghiệp hơn rất nhiều. Bạn có thể sử dụng Gmail Business (G Suite) với mức giá 2.5$/tháng. Hoặc cài đặt miễn phí với Yandex Email.

6.5. Dịch Website

Website còn rất nhiều chỗ là Tiếng Anh. Bạn cần dịch chúng qua Tiếng Việt bằng cách sử dụng Loco Translate, hoặc nhiều cách khác. Đọc hướng dẫn này từ Blog Thạch Phạm để biết cách dịch nhé!

Riêng WooCommerce, mình đang gấp rút dịch qua Tiếng Việt rồi, nên bạn yên tâm là qua Tết âm này, WooCommerce sẽ có Tiếng Việt hoàn toàn.

Bước 7. Vấn đề thường gặp

7.1. Website không gửi email?

Nếu có người mua hàng nhưng không có email gửi về, và mọi thiết lập phía trên đều đúng. Vậy nguyên nhân hầu hết do hosting đã chặn việc gửi mail.

Giải pháp ở đây sẽ là cấu hình máy chủ gửi mail riêng, gọi là SMTP. Hãy đọc bài viết này để biết cách cấu hình SMTP Gmail hoặc SendGrid

Viết một bình luận