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

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We need money to operate the site, and almost all of it comes from our online advertising.

If possible, please support us by clicking on the advertisements.

Please add vn-z.vn to your ad blocking whitelist or disable your adblocking software.

×

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.

shopper-woo-theme1-min.png

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.

dang-nhap-vao-wordpress-1-min.png

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

giao-dien-them-moi1-min.png

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.png

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

kich-hoat-theme-shopper-woocommerce-theme-min.png

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

header-shopper-woocommerce1-min.png

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


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

media-chon-tap-tin1-min.png

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.png


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

themevi-shopper-woocommerce-dessign2-min.png

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

themevi-shopper-woocommerce-dessign3-min.png

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

themevi-footer-shopper1-min.png



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


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

widget-van-ban-min.png


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

widget-van-ban2-min-1.png


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

widget-van-ban3-min.png


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.png


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.png


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


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

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


Và kết quả

themevi-footer-shopper-woocommerce11-min.png


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.png


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.png


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.png


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

footer-php-shopper-woo1-min.png


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.png


Mình thử sửa!

footer-php-shopper-woo3-min.png


Và kết quả

footer-php-shopper-woo4-min.png


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.png


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

tao-trang-moi1-min.png


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 Vàng Đôi
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.

shopper-woo-theme1-min.png

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.

dang-nhap-vao-wordpress-1-min.png

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

giao-dien-them-moi1-min.png

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.png

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

kich-hoat-theme-shopper-woocommerce-theme-min.png

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

header-shopper-woocommerce1-min.png

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


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

media-chon-tap-tin1-min.png

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.png


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

themevi-shopper-woocommerce-dessign2-min.png

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

themevi-shopper-woocommerce-dessign3-min.png

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

themevi-footer-shopper1-min.png



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


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

widget-van-ban-min.png


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

widget-van-ban2-min-1.png


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

widget-van-ban3-min.png


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.png


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.png


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


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

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


Và kết quả

themevi-footer-shopper-woocommerce11-min.png


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.png


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.png


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.png


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

footer-php-shopper-woo1-min.png


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.png


Mình thử sửa!

footer-php-shopper-woo3-min.png


Và kết quả

footer-php-shopper-woo4-min.png


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.png


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

tao-trang-moi1-min.png


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

Búa Gỗ
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