Hướng dẫn - Tạo Web bán hàng với Shopper Theme WordPress - VN-Zoom | Cộng đồng Chia Sẻ Kiến Thức Công Nghệ và Phần Mềm Máy Tính

Hướng dẫn Tạo Web bán hàng với Shopper Theme WordPress

rs_lyly2009

Moderator
Thành viên BQT
Trong bài viết này mình sẽ giúp bạn tự tay tạo website bán hàng bằng WordPress mà không cần biết bất kỳ kĩ năng lập trình nào.


Bước 1. Đăng ký tên miền và hosting
Mình đã viết một bài chi tiết nói về vấn đề Tên miền và Hosting rồi. Hãy đọc lại bài viết này để biết nhé.

Bước 2. Cài đặt WordPress
Đọc bài hướng dẫn cài đặt WordPress này nhé

Bước 3. Cài đặt Theme Shopper & 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.


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


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.


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


Cài đặt công cụ bán hàng 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


Đầ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



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


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



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


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


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.

> Hướng dẫn tạo Menu
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




Đầ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.



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



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



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



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



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



Để 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



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



Và kết quả



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.



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.



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



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



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



Mình thử sửa!



Và kết quả



4.4. Trang giới thiệu và liên hệ
Truy cập vào Trang > Thêm trang mới



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



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

Còn một số thiết lập nữa, liên quan tới rất nhiều chủ đề. Mình sẽ cập nhật dần dần.

Bước 5. Thiết lập bán hàng
  • Thiết lập Giao hàng
  • Thiết lập Thanh toán
  • Thiết lập Email nhận đơn hàng
Bước 6. Hướng dẫn sử dụng
  • Đăng sản phẩm
  • Tạo & Sửa danh mục sản phẩm
  • Đăng & Sửa bài viết
  • Quản lý đơn hàng
  • Quản lý tài khoản nhân viên
  • và các hướng dẫn khác
Bước 7. Thiết lập khác
SEO - Bảo mật - Hiệu suất
 
Sửa lần cuối:

gaque90

Gà con
Bài viết của bác rất hữu ích. Em cũng tự mày mò trên mạng và đag làm web bán hàng này mto,com,vn. Sử dụng giao diện Storefront nhưng em chưa ưng ý, em lại k biết code. Bác có làm dịch vụ ở hà nội k ạ, để em chạy qua :D
 

rs_lyly2009

Moderator
Thành viên BQT
Bài viết của bác rất hữu ích. Em cũng tự mày mò trên mạng và đag làm web bán hàng này mto,com,vn. Sử dụng giao diện Storefront nhưng em chưa ưng ý, em lại k biết code. Bác có làm dịch vụ ở hà nội k ạ, để em chạy qua :D
Inbox bố cục bác muốn, em coi có mẫu giao diện nào sẵn không, em gửi cho. Web bán hàng thì em có nhiều mẫu lắm, kiểu gì cũng có mẫu hợp ý bác.
 

TB Magic

Rìu Sắt
Mod hướng dẫn post bài giúp em với. Em post mà không vô coi được sản phẩm.
 

smalltiger

Gà con
Trong bài viết này mình sẽ giúp bạn tự tay tạo website bán hàng bằng WordPress mà không cần biết bất kỳ kĩ năng lập trình nào.


Bước 1. Đăng ký tên miền và hosting
Mình đã viết một bài chi tiết nói về vấn đề Tên miền và Hosting rồi. Hãy đọc lại bài viết này để biết nhé.

Bước 2. Cài đặt WordPress
Đọc bài hướng dẫn cài đặt WordPress này nhé

Bước 3. Cài đặt Theme Shopper & 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.


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


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.


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


Cài đặt công cụ bán hàng 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


Đầ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



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


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



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


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


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.



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




Đầ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.



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



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



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



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



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



Để 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



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



Và kết quả



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.



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.



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



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



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



Mình thử sửa!



Và kết quả



4.4. Trang giới thiệu và liên hệ
Truy cập vào Trang > Thêm trang mới



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



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

Còn một số thiết lập nữa, liên quan tới rất nhiều chủ đề. Mình sẽ cập nhật dần dần.

Bước 5. Thiết lập bán hàng
  • Thiết lập Giao hàng
  • Thiết lập Thanh toán
  • Thiết lập Email nhận đơn hàng
Bước 6. Hướng dẫn sử dụng
  • Đăng sản phẩm
  • Tạo & Sửa danh mục sản phẩm
  • Đăng & Sửa bài viết
  • Quản lý đơn hàng
  • Quản lý tài khoản nhân viên
  • và các hướng dẫn khác
Bước 7. Thiết lập khác
SEO - Bảo mật - Hiệu suất
Xin chào Pro!

Bác có bộ code WordPress nào về bán hàng nông nghiệp, cây cảnh, thiết bị làm vườn không?

Nếu có nhờ bác share giúp với.

Xin chân thành cảm ơn!

Trân trọng...
 

Peace5678

Gà con
Hi Mod, mình là thành viên mới, đang muốn tạo 1 web bán hàng thủ công, bác có bộ themme nào cho em xin với ạ. Xin cảm ơn bác
 

sonatimHN

Gà con
Hi Mod, mình là thành viên mới, đang muốn tạo 1 web bán hàng thủ công, bác có bộ themme nào cho em xin với ạ. Xin cảm ơn bác
bạn cứ tải theme Astra về làm shop. Nhẹ mà hỗ trợ cả máy tính, điện thoại Respondsive tốt
 
Top