Làm website bán hàng bằng WordPress kết hợp WooCommerce

Bài viết này được viết bởi Thế Khương | Wordpress

Thế Khươngkiemtiencenter.com

"Chào mừng bạn đến với Kiemtiencenter, những kiến thức mình chia sẻ có thể giúp bạn phần nào đó trong quá trình kiếm tiền online & marketing online. 2017 này, bạn có thể theo dõi hành trình kiếm tiền với blogging của mình :

Jan 05

Sử dụng WordPress & WooCommerce để hoàn thành 1 trang web bán hàng

Đối với những bạn đang bán sản phẩm vật lý (quần áo, giày dép, đồng hồ, mỹ phẩm,…) thì không thể nào chọn những giao diện dạng blog hay tin tức để bán hàng được.

Những giao diện blog, tin tức rất phù hợp để kiếm tiền với affiliate marketing qua những bài review, so sánh, hướng dẫn mua hàng,…Nếu như bạn làm dạng site này, hãy xem lại hướng dẫn :

Tuy nhiên ở trường hợp này, bạn đang bán hàng của bạn, thì bạn cần 1 store online, nơi khách hàng có thể vào chọn & đặt hàng ngay trên tại web.

Lúc này, bạn cần 1 nền tảng & giao diện cho dạng website bán hàng (dạng store), có 1 số nền tảng mà bạn có thể dùng như :

  • WordPress
  • Haravan
  • Shopify
  • …..

Tuy nhiên nếu bạn xài Haravan và Shopify thì nó hơi mắc (trả tiền theo từng tháng) không phù hợp với những bạn mới bán hàng online có ngân sách nhỏ.

Ở bài viết này, mình sẽ hướng dẫn bạn tự xây dựng 1 trang web như thế này bằng WordPress để tiết kiệm ngân sách hơn ($1/tháng với mã giảm giá mình cung cấp).

CHỜ LÁT !!!

Bạn có muốn tham gia 1 cộng đồng : Nơi mà bạn được cung cấp các tài liệu hướng dẫn kiếm tiền online đầy đủ A-Z, có đội ngũ hỗ trợ bạn mỗi khi gặp khó khăn, có đầy đủ công cụ thực hành, và có 1 cộng đồng với hàng ngàn người làm MMO cùng thảo luận ?

Mình sẽ đi từng bước để bạn có thể hoàn thiện 1 website bán hàng chuyên nghiệp, bạn có thể follow theo 1 cách dễ dàng (Ngoài ra mình cũng sẽ tặng cho bạn 1 số theme premium trả phí chuyên để làm website store dạng này khi bạn mua hosting $1/tháng qua link của mình ngay dưới đây).

lam-website-ban-hang

1/ Mua hosting, cài giao diện & tải nội dung mẫu.

Mua hosting & hoàn thiện 1 trang WordPress rất đơn giản, bạn có thể tham khảo thêm ở bài :

Tuy nhiên khi cài WordPress cho web bán hàng, bạn nên làm theo video dưới đây, mình có hướng dẫn thiết lập WooCommerce (Plugin chuyên dụng cho website thương mại điện tử) :

 

LẤY ƯU ĐÃI HOSTING $1/THÁNG Và miễn phí 1 domain kèm theo

(Miễn phí 1 domain nên bạn không cần mua domain luôn nhé. Sau khi mua xong bạn hãy điền vào form này để lấy các giao diện bán hàng đẹp)

Một số lưu ý :

  • Nếu bạn làm website bán hàng ở Việt Nam thì để nguyên giao diện admin tiếng Việt cho dễ xài.
  • Để thêm giao diện mới bạn vào Giao diện => Thêm mới => Tải giao diện lên (Chú ý là file giao diện là .zip), nếu trong bonus của mình có file .rar thì bạn phải giải nén file .rar này ra để tìm file .zip bên trong)

them-giao-dien-ban-hang

  • Để dễ dàng hơn trong việc thao tác cho người mới, bạn nên import (load) nội dung mẫu của giao diện (ở video ví dụ trên mình dùng mythemeshop) bằng cách vào Theme Option => Import/Export và chọn giao diện muốn tải.

import-noi-dung-mau

Việc tải nội dung mẫu sẽ thêm rất nhiều sản phẩm, các trang mẫu vào website của bạn. Việc này bạn có thể xóa các sản phẩm sau, mình sẽ hướng dẫn bạn làm điều đó, nhưng trước tiên chúng ta sẽ đi qua 1 số thiết lập cơ bản để hoàn thiện 1 trang bán hàng.

Chú ý ở video trên thì sau khi cài đặt hosting Godaddy thì họ đã cài sẵn cho bạn plugin Woocommerce, nếu chưa có thì bạn có thể cài vào và kích hoạt tại khu vực gói mở rộng => cài mới

cai-dat-woocommerce

2/ Chỉnh sửa Menu gọn gàng cho trang web.

Menu là các danh mục nằm ở đầu hoặc cuối trang. Ví dụ giao diện mà mình đang sử dụng có 2 menu ở đầu trang như hình :

chinh-sua-menu

Nội dung mà bạn import sẵn sẽ tự tạo ra Menu hoặc nếu bị lỗi nó sẽ tạo ra rất nhiều thư mục trong 1 menu, vì vậy để xóa bớt hoặc thêm Menu mới, bạn vào Giao diện => Menu

thu-muc-menu

Để chỉnh sửa 1 Menu có sẵn bạn chọn menu đó rồi nhất nút CHỌN, hoặc nếu bạn muốn tạo 1 Menu mới hoàn toàn theo ý bạn thì bạn nhấn vào tạo một trình đơn mới.

them-menu-moi

Để chỉnh sửa, thêm/bớt các mục vào Menu rất đơn giản, bạn chỉ cần kéo thả các trang có sẵn trên trang web của bạn vào Menu hoặc bạn có thể dẫn link mà bạn muốn khi khách hàng nhấn vào nó chuyển đến đâu đều được :

giao-dien-chinh-sua-menu

Hoặc nếu bạn muốn tạo 1 mục ở menu mà chứa nhiều danh mục con khác thì bạn vẫn tạo các danh mục này bình thường và kéo các danh mục con xuống dưới danh mục chính. Các danh mục con sẽ hơi lệch sang bên phải như này :

danh-muc-menu

Bạn có thể vọc 1 số tính năng khác của menu như tùy chỉnh màu cho Menu, thêm Icon cho Menu :

mau-va-icon-cho-menu

Tùy chỉnh Menu rất dễ, bạn vọc 1 chút là ra, bạn tạo Menu làm sao cho phù hợp với website, mặt hàng & các dịch vụ của bạn nhìn ổn ổn là được. Ngoài ra bạn còn có thể chỉnh sửa cách hiển thị Menu, màu nền menu, up ảnh background cho menu ở mục :

tuy-chinh-menu

3/ Tùy chỉnh font & màu chữ của font

Hầu như các giao diện bạn cài đặt là của nước ngoài, và font chữ họ sử dụng sẽ không phù hợp với Việt Nam (Họ không sử dụng Google font) nên nhìn sẽ rất khó chịu.

Và nếu màu chữ website của bạn hơi nhạt thì có thể làm đậm nó lên theo hướng dẫn sau :

Bạn vào Theme Option => Typography :

chinh-sua-font

Để đồng nhất, ở đây mình chọn tất cả là font Arial, font này được dùng phổ biến nhất Việt Nam trên website :

chinh-sua-font

Về màu sắc bạn cũng có thể chỉnh sửa ở đây luôn, mình thấy màu khá ổn rồi nên giữ nguyên.

4/ Thay đổi logo & Favicon cho website của bạn

Mỗi cửa hàng đều phải có 1 logo riêng, và nếu bạn không có bạn có 2 lựa chọn :

  • Thuê designer thiết kế logo cho bạn (khuyên dùng vì chuyên nghiệp hơn), bạn có thể tìm designer trên các website freelancer như vlance chẳng hạn.
  • Tự thiết kế logo bằng các công cụ miễn phí trên mạng.

Còn Favicon có thể có cũng được mà không có cũng không sao. Để thay đổi 2 thứ này bạn vào Theme Options => General Settings, xóa logo mặc định đi và upload logo của bạn lên.

thay-doi-logo-favicon

Mình khuyến nghị bạn nên upload logo với kích thước 200×50 pixel để hiển thị gọn gàng nhất, ngoài ra bạn cũng có thể add thêm favicon với các kích thước khác nhau để hiển thị tốt trên cả máy tính & điện thoại.

logo-cho-trang-ban-hang

Sau khi làm xong phần 4 này, bạn có thể thấy website bạn đã nhìn tử tế rồi, nhưng chúng ta sẽ không dừng ở đây, mình sẽ tiếp tục hướng dẫn bạn những thao tác tiếp theo để hoàn chỉnh  1 trang web bán hàng.

5/ “Việt hóa” giao diện của bạn.

Nếu website bạn bán hàng ở Việt Nam, bạn cần “Việt Hóa” những mục hay nút như “wishlist, add to cart, top rate product,..” để phù hợp hơn. Để việt hóa các mục này, bạn hãy cài plugin miễn phí có tên “Easiest Translation Plugin For WordPress” (Download tại đây)

Cách cài plugin rất đơn giản, bạn tham khảo ở bài viết sau :

Hướng dẫn cài Plugin & các plugin nên sử dụng (làm theo hướng dẫn Cài đặt Plugin dạng file .zip trên máy tính của bạn)

Sau khi cài đặt xong Plugin, bạn vào mục My WP Translate, tích vào ô Enable Translate Panel

viet-hoa-theme

Sau đó bạn chỉ việc điền từ tiếng Anh muốn dịch vào ô đầu tiên và điền từ tiếng Việt tương ứng vào ô thứ 2 để dịch, rất đơn giản.

6/ Vọc hết các tính năng trong Theme Option.

Tất cả các tính năng của giao diện bạn tải lên đều nằm ở mục Theme Option, ví dụ với Mythemeshop, ở mục này bạn có thể vọc được rất nhiều thứ nữa hay ho, chẳng hạn như :

  • General Setting : Ngoài việc chỉnh sửa logo, favicon, bạn còn có thể chèn mã code vào header hoặc footer trang web của bạn, chẳng hạn như mã Google Analytic, Mã Facebook Pixel, Addthis,…
  • Performance : Một số chức năng cải thiện hiệu suất trang web
  • Homepage : Chỉnh sửa các banner hiện ở trang chủ & chỉnh sửa layout
  • Styling Options : Chỉnh sửa kiểu dáng website, màu sắc, hình ảnh,….
  • Header : Chỉnh sửa kiểu dáng màu sắc trên đầu trang
  • WooCommerce : Chỉnh sửa 1 số chức năng bán hàng, ví dụ số sản phẩm hiển thị, kiểu hiển thị,…
  • Blog Page : Trang bán hàng vẫn luôn cần 1 mục blog, bạn có thể chỉnh sửa ở đây
  • ……….Và nhiều mục khác.

Bạn hoàn toàn có thể tự chỉnh sửa và vọc các tính năng, kiểu dáng website, kiểu hiển thị theo cách của bạn.

7/ Ẩn Sidebar ở các page chính.

Nếu bạn không muốn hiện sidebar (thành phần nằm bên trái hay phải của blog) ở 1 số trang quan trọng như :

  • Giỏ hàng
  • Thanh toán
  • Liên hệ
  • Thông tin tài khoản khách hàng
  • ……..Hoặc bất cứ trang nào bạn muốn

Thì bạn vào trang cần chỉnh sửa, nhấn Sửa trang

an-sidebar

Ở phần sidebar, bạn chọn No sidebar, rồi lưu lại bằng cách nhấn cập nhật là xong.

an-sidebar

8/ Cách thêm sản phẩm và danh mục sản phẩm

Công việc này khá dễ dàng, nếu muốn thêm 1 sản phẩm, bạn vào Sản phẩm => Thêm sản phẩm và điền tiêu đề cho sản phẩm.

them-san-pham-vao-website

Ở mục này mình sẽ xét đến sản phẩm đơn giản không có biến thể (Ví dụ không có màu khác, size khác,…) thì bạn chỉ cần :

  • Đặt giá cho sản phẩm
  • Đặt giá khuyến mãi (không bắt buộc, nếu bạn điền giá này thì khách sẽ thấy giá thường bị ghạch ngang và thay bằng giá khuyến mãi)

sanpham-don-gian

  • Thêm sản phẩm vào danh mục có sẵn (hoặc tạo mới danh mục) ở cột bên phải. Theme mẫu đã thêm cho bạn rất nhiều danh mục, cái nào bạn không dùng tới thì có thể xóa đi.

danh-muc-san-pham

  • Thêm ảnh sản phẩm & thư viện ảnh. Ảnh sản phẩm là ảnh to khách sẽ thấy khi vào xem sản phẩm, còn thư viện ảnh là những ảnh nhỏ bên dưới, khi khách click vào nó sẽ phóng to ra.

thu-vien-anh-san-pham

  • Cuối cùng hãy ghi 1 đoạn mô tả ngắn cho sản phẩm và nhấn Đăng bài viết để hoàn thành việc post sản phẩm lên website

mo-ta-san-pham

9/ Thêm nhiều màu khác nhau cho 1 sản phẩm

Đối với những sản phẩm có nhiều màu hoặc size, bạn phải đưa ra các lựa chọn cho khác hàng, đầu tiên bạn phải cài đặt plugin YITH WooCommerce Color and Label để làm việc này. Link download plugin dưới đây :

Sau đó bạn vào Sản phẩm => Các thuộc tính & thêm thuộc tính màu sắc như hình :

them-thuoc-tinh-mau-sac

Sau đó nhấn vào ký hiệu hình bánh răng ở thuộc tính mới tạo để thêm màu sắc :

them-mau-sac

Bạn thêm màu sắc mong muốn, ví dụ mình thêm màu đen :

them-mau-den

Cứ lần lượt như vậy, mình có 4 màu sau đây, tương ứng với áo mình demo

them-4-mau

Bây giờ, để làm cho những màu sắc này hiện lên khi khách hàng vào xem sản phẩm, bạn phải chỉnh sửa sản phẩm về loại “sản phẩm có biến thể”

san-pham-co-bien-the

Sau đó bạn vào “các thuộc tính” và thêm thuộc tính màu sắc :

them-thuoc-tinh-mau-sac

Tiếp đó bạn chọn những màu tương ứng với áo vào tick vào “dùng cho nhiều biến thể”lưu thuộc tính này lại

luu-thuoc-tinh-mau-sac

Tiếp tục bạn vào mục các biến thể và chọn tạo biến thể từ các thuộc tính, nhấn “đi”

bien-the

Bạn sẽ chỉnh sửa lần lượt từng màu sắc với hình ảnh mà giá tiền theo ý bạn

chinh-sua-bien-the

Sau khi sửa xong toàn bộ, bạn cập nhật lại sản phẩm :

cap-nhat-san-pham

Sau đó bạn có thể ra xem lại sản phẩm sẽ có lựa chọn màu sắc :

chon-mau-sac-cho-san-pham

10/ Thêm size (hoặc các thuộc tính khác) cho sản phẩm.

Tương tự color, size cũng là 1 biến thể của sản phẩm, hoặc nếu bạn có những mặt hàng có nhiều loại (thuộc tính) khác nhau, bạn hoàn toàn có thể tạo ra các biến thể này từ mục các thuộc tính, ở đây mình ví dụ tạo Size cho sản phẩm.

them-label-size-san-pham

Bạn thêm size, ví dụ Size S thì bạn ghi ở label là S

them-size

Ví dụ mình thêm 3 size SML :

them-size-sml

Tương tự như màu sắc, bạn edit sản phẩm & thêm thuộc tính, tích vào dòng “dùng cho nhiều biến thể”

them-thuoc-tinh-size

OK bây giờ xem lại sản phẩm, đã có đủ lựa chọn màu & size :

mau-size

Bạn có thể xem video sau đây từ blog thachpham để dễ dàng thao tác hơn :

11/ Tùy biến form đặt hàng của khách hàng.

Form mặc định đặt hàng có 1 số thông tin mà không phù hợp với thị trường Việt Nam hoặc bạn cũng không cần xài đến như :

  • ZipCode
  • Tên công ty
  • Họ và tên chỉ nên ở 1 mục
  • ….

Nếu bạn muốn xóa hoặc chỉnh sửa các mục ở đây, bạn nên cài plugin WooCommerce Checkout Manager. Sau khi cài xong bạn thiết lập nó bằng cách vào mục Woocheckout

chinh-sua-checkout

Sau đó bạn vào Setting và chỉnh sửa các thông tin như ý muốn rồi lưu thay đổi lại, mình chỉnh sửa như sau :

  • Tick vào ô require nếu muốn khách bắt buộc phải điền thông tin đó
  • Tick vào mục dấu x ở cuối nếu muốn xóa form đó

woocheckout

Tạm kết.

Sau khi bạn làm xong 11 hướng dẫn ở bài viết này, dường như bạn đã làm được hoàn thiện 1 trang web bán hàng, tuy nhiên về WooCommerce nó có rất nhiều tính năng nữa như :

  • Mã giảm giá
  • Các tiện ích mở rộng hỗ trợ bán hàng
  • Tích hợp thanh toán
  • ……

Tất cả đều là các tính năng nâng cao. Đầu tiên bạn hãy làm theo bài hướng dẫn này, sau đó nếu bạn muốn mình chỉnh sửa hay hướng dẫn tính năng nào, hãy bình luận dưới đây, mình sẽ viết trong phần 2 của bài viết “Hướng dẫn làm trang bán hàng với WordPress với WooCommerce”

Một ghi chú nữa, để làm cho website của bạn đẹp thì bạn cũng phải cần những hình ảnh, banner đẹp, bạn có thể thuê designer riêng hoặc tự làm những hình ảnh đó, mình gợi ý 2 công cụ đễ sử dụng :

Bạn có thể xem demo trang sản phẩm mình mới tạo theo link sau

http://shoppingano.com/san-pham/ao-tay-dai-cho-sieu-nhan-uong-ruou-troi-dong/

Chúc bạn thực hành thành công

Đôi chút về Thế Khương

Kiếm tiền online với mảng affiliate marketing từ 2013. Ngoài việc luôn luôn học hỏi những kiến thức mới và chia sẻ trên kiemtiencenter thì mình đã thành công trong việc xây dựng một cộng đồng MMO đỉnh cao với ~2000 thành viên.

Tìm hiểu về Team MMO của mình
Xem tất cả bài viết

Bạn có thể theo dõi mình trên Facebook để nhận các tin tức, xu hướng kiếm tiền online mới nhất, mình thường chia sẻ những thông tin hay hoặc bài viết chất lượng lên tường.

Mình mới viết xong Ebook chia sẻ kinh nghiệm kiếm tiền với Affiliate Marketing. Nhấn vào đây để download !!!

GỢI Ý !!!

Kiemtiencenter đang có ưu đãi cực lớn, tặng áo thun, ebook hướng dẫn kiếm tiền affiliate, nghiên cứu từ khóa, xây dựng nội dung cho blog, tặng thêm bộ giao diện làm website kiếm tiền !!! bấm vào đây để xem chi tiết.

Để lại câu hỏi và mình sẽ hồi âm trong thời gian tối đa 24 giờ :

144 Bình luận Trên "Làm website bán hàng bằng WordPress kết hợp WooCommerce"

avatar
Sắp xếp theo:   mới nhất | cũ nhất
Dung
Khách
Dung
Bạn ơi cho mình hỏi, mình cài theme giống của bạn, cũng import để cho giống demo nhưng khi hiện ra thì trang của mình không thể hiện được slider như demo,mình nhấn vào nút home thì nó lại đưa về cái bản demo cài (đường link trang demo chứ không phải là của web mình) mình đã chỉnh sửa cả menu, đổi lại nút home, nhưng trong phần homepage mình chỉnh đi chỉnh lại mà nó vẫn không hiện slider ra giao diện được như demo. Bạn chỉ giúp mình cách khắc phục với, mình import đi import lại… Đọc thêm »
Hải Thiện
Khách
Hải Thiện

Chào Khương, Mình đã mua host coupon 12$/năm qua link của bạn, hiện mình đang muốn làm một site kiểu nhà hàng ăn uống và giới thiệu các món ăn, bạn có themes nào kiểu thế gửi cho mình với, cám ơn nhiều 🙂

Duy
Khách
Duy

hi Khương,
Mình đã mua host coupon 12$/năm qua link của bạn và mình dùng theme mts-ecommerce. Theme này hiện tại mình đã dùng thử 1 số plugin như loco để dịch nhưng không đc. Bạn có thể support mình cách dịch theme này đc k bạn. Một số từ như Add To Cart, Save, RELATED PRODUCTS,… Thanks bạn nhiều.

Duy
Khách
Duy

hi Bạn,
Mình đã mua host coupon 12$/năm qua link của bạn và mình cũng đã điền form đăng ký nhận quà của bạn nhưng hiện tại mình vẫn chưa thấy bạn reply. Bạn check dùm mình với. Thank bạn!

Duy
Khách
Duy

Cho mình hỏi là template mà bạn đang dùng ở demo trên là template tên gì thế. Bạn có thể chỉ mình 1 số template cho website bán hàng giá OK không bạn. Và mình muốn có thêm 1 page addmin riêng để quản lí sản phẩm cho user đc phân quyền dùng thì mình làm như thế nào ạ. Cảm ơn bạn nhiều!

Hương
Khách
Hương

mình muốn đăng nhiều hình ngoài trang chủ thì làm sao ạ?

PHƯỚC
Khách
PHƯỚC

MÌNH K TÌM THẤY Theme Option ĐÂU CẢ

Kien
Khách
Kien

Cho mình hỏi là mua bằng link ở kiemtiencenter mà $1/ tháng nhưng mà khi vào link đó thì làm gì có chỗ nào mua được $1
Làm thế nào để mua được $1/tháng

Lan
Khách
Lan

Chị muốn thêm thông tin phía dưới chân của web nhưng sao tìm hoài không thấy chỗ để nhập vào. Cái của c là ecommerce.

Lai Tung
Khách
Lai Tung

cho mình hỏi trong phần việt hóa giao diện của bạn. Mình không biết điền chữ tiếng anh và tiếng việt vào ô nào ???
Có phải ô phía dưới không
[IMG]http://i.imgur.com/uMs5amH.png[/IMG]

wpDiscuz