ĐỒ ÁN XÂY DỰNG WEBSITE BÁN HÀNG BẰNG ... - 123doc

Xã hội phát triển về nhiều mặt, kèm theo đó là sự bùng nổ mạnh mẽ của công nghệ thông tin. Nhu cầu của con người ngày càng được nâng cao. Để đáp ứng cho nhu cầu con người trong việc mua hàng hóa thông minh thông qua các website bán hàng. Chúng ta chỉ cần ở bất kỳ đâu chỉ cần có kết nối Internet thì có thể mua hàng ở bất kỳ nơi nào với các chế độ vận chuyển chuyên nghiệp trên toàn quốc. Để đáp ứng được điều đó thì công nghệ website hiện nay có rất nhiều cách để tạo nên một website bán hàng thông minh. Trong đó chúng ta không thể không nói đến Wordpress. Đây là một công cụ rất phổ biến trên thế giới nói chung và Việt Nam nói riêng.Trong Wordpress có một Plugin rất nổi tiếng được viết từ các lập trình viên thực thụ từ Wootheme đó chính là Woocommerce. Nó được phản hồi rất tịch cực trong ngành công nghệ website đặc biệt là website bán hàng tính đến thời điểm hiện tại. Với sự hỗ trợ đặc biệt của Plugin Woocommerce trong việc tạo một website bán hàng. Em đã chọn đề tài “Xây dựng website bán hàng bằng Wordpress”.

Trang 1

KHOA CÔNG NGHỆ THÔNG TIN

Trang 2

MỤC LỤC

MỤC LỤC 1

DANH MỤC TỪ VIẾT TẮT: 3

DANH MỤC HÌNH ẢNH 4

LỜI NÓI ĐẦU 7

Chương I: TỔNG QUAN VỀ WORDPRESS VÀ PLUGIN WOOCOMMERCE 8 1.1 Giới thiệu chung về Wordpress 8

1.2 Giới thiệu Woocommerce: 12

1.2.1 Cài đặt và thiết lập cơ bản: 13

1.2.2 Tìm hiểu các trang trong Woocommerce: 19

1.3 Thêm một sản phẩm đơn giản: 22

1.3.1.Nhập thông tin sản phẩm: 22

1.3.2.Thiết lập danh mục sản phẩm 25

1.3.3 Thiết lập từ khóa sản phẩm 25

1.3.4 Ảnh sản phẩm 26

1.3.5 Thư viện hình ảnh của sản phẩm 26

1.3.6 Thử nghiệm chức năng giỏ hàng và thanh toán 30

1.4 Cách sử dụng theme Store Front cho Woocommerce: 33

1.5 Các thiết lập cài đặt các thành phần trong Woocommerce: 40

1.5.1 Thiết lập thay đổi kích thước sản phẩm: 43

1.5.2 Thiết lập thuế: 47

1.5.3 Thêm tỉnh thành Việt Nam và tối ưu thông tin khách hàng 51

1.5.4.Tổng quan chức năng tính phí-giao nhận(vận chuyển) 52

1.5.5 Thiết lập giao nhận-tỉ lệ sàn: 54

1.5.6.Thêm nhiều phương thức giao nhận-tỉ lệ sàn: 56

1.5.7.Sử dụng loại hình giao nhận (Shpping Class) 61

1.5.8.Thiết lập thanh toán 65

1.5.8.1.Thanh toán qua PayPal: 65

1.5.8.2.Tích hợp Ngân Lượng và Bảo Kim: 65

1.5.9 Thiết lập Email thông báo: 66

1.6 Sử dụng các Widget trong Woocommerce: 67

1.7 Thiết lập Yoat SEO cho WooCommerce 68

Trang 3

CHƯƠNG II: DEMO CÁC CHỨC NĂNG WEBSITE 70 KẾT LUẬN 71 TÀI LIỆU THAM KHẢO: 72

Trang 4

DANH MỤC TỪ VIẾT TẮT:

1 CMS – Content Management System Hệ quản trị nội dung

2 VAT(Value Added Tax) Thuế giá trị gia tăng

Trang 5

DANH MỤC HÌNH ẢNH

Hình 1:Tìm plugin “Woocommerce” trên thư viện 13

Hình 2:Cài đặt bản dịch và thiết lập cho Woocommerce 14

Hình 3:Cài đặt trang cần thiết cho Woocommerce 15

Hình 4: Thiết lập vị trí và định dạng tiền tệ phù hợp với Việt Nam 16

Hình 5: Đã thiết lập hoàn thành 17

Hình 6: Cấu hình định dạng tiền mặt 18

Hình 7:Bỏ số đơn vị thập phân ở tiền tệ 19

Hình 8:Các trang mặc định của Woocommerce 20

Hình 9: Thiết lập trang cửa hàng 21

Hình 10: Thiết lập lại các trang bị mất 21

Hình: 11 Menu thêm sản phẩm 22

Hình 12:Nhập tiêu đề và mô tả chi tiết của sản phẩm 22

Hình 13: Khung nhập dữ liệu sản phẩm 23

Hình 14: Nhập dữ liệu sản phẩm 24

Hình 15: Khung mô tả ngắn sản phẩm 25

Hình 16: Tạo danh mục sản phẩm 25

Hình 17:Thiết lập từ khóa sản phẩm 26

Hình 18: Ảnh đại diện sản phẩm 26

Hình 19: Thư viện ảnh của một sản phẩm 27

Hình 20: Xem trang cửa hàng 27

Hình 21: Sản phẩm hiển thị ở trang Cửa hàng 28

Hình 22: Hình mô tả chi tiết sản phẩm 29

Hình 23: Thêm sản phẩm vào giỏ 30

Hình 24: Trang giỏ hàng 31

Hình 25: Trang thanh toán chưa hiệu chỉnh 32

Hình 26: Trang thanh toán đã được hiệu chỉnh 33

Hình 27: Import dữ liệu dummy content 34

Hình 29: Thiết lập Import 35

Hình 30: Sản phẩm mẫu sau khi đã import 36

Trang 6

Hình 33: Thiết lập trang chủ làm trang chính 37

Hình 34: Trang chủ Store Front 38

Hình 35: Tùy chỉnh giao diện 39

Hình 36: Tổng quan trang thiết lập 40

Hình 37: Cài đặt chung 40

Hình 38:Thiết lập cài đặt sản phẩm 41

Hình 39: Thiết lập hình sản phẩm 44

Hình 40:Ảnh catalog 44

Hình 41: Ảnh sản phẩm đơn lẻ 45

Hình 42:Hình thu nhỏ sản phẩm 46

Hình 43: Thay đổi thông số kích thước sản phẩm 46

Hình 44: Hình tái tạo sản phẩm 47

Hình 46: Kích hoạt tính năng thuế 47

Hình 47:Các tùy chọn thiết lập thuế 48

Hình 48: Khung khai báo tỉ lệ thuế 49

Hình 49: Ví dụ thiết lập thuế VAT tại Việt Nam với tỉ lệ 10% 50

Hình 50: Kết quả thiết lập thuế 50

Hình 51: Thiết lập địa chỉ mặc định 51

Hình 52: Thông tin thanh toán đã hiệu chỉnh 52

Hình 53: Trang cài đặt tính phí giao nhận trong Woocommerce 53

Hình 54: Thiết lập giao nhận-tỉ lệ sàn 54

Hình 55: Tỉ lệ sàn đã được thiết lập 55

Hình 56: Thanh toán đã được thiết lập tỉ lệ sàn 56

Hình 57: Các phương thức giao nhận 58

Hình 58: Thiết lập miễn phí giao hàng 58

Hình 59: Thiết lập miễn phí giao hàng 60

Hình 60: Thiết lập loại hình giao nhận 61

Hình 61:Thêm một loại hình giao nhận mới 62

Hình 62:Danh sách các loại hình giao nhận 62

HÌnh 63: Tùy chọn loại hình giao nhận 63

Hình 64:Thiết lập phí vận chuyển cho loại hình giao nhận 64

Hình 65: Thiết lập PayPal 65

Trang 7

Hình 66: Thiết lập Ngân Lượng 65

Hình 67: Thiết lập Bảo Kim 66

Hình 68:Các tùy chọn thiết lập email trong Woocommerce 66

Hình 69:Giao diện Wiget 67

Hình 70: Xóa bỏ chữ “Archive” trên tiêu đề 68

Hình 71: Tùy chỉnh các chuyên mục 69

Hình 72: Tùy chỉnh sitemap 69

Trang 8

LỜI NÓI ĐẦU

Xã hội phát triển về nhiều mặt, kèm theo đó là sự bùng nổ mạnh mẽ của côngnghệ thông tin Nhu cầu của con người ngày càng được nâng cao Để đáp ứng cho nhucầu con người trong việc mua hàng hóa thông minh thông qua các website bán hàng.Chúng ta chỉ cần ở bất kỳ đâu chỉ cần có kết nối Internet thì có thể mua hàng ở bất kỳnơi nào với các chế độ vận chuyển chuyên nghiệp trên toàn quốc Để đáp ứng đượcđiều đó thì công nghệ website hiện nay có rất nhiều cách để tạo nên một website bánhàng thông minh Trong đó chúng ta không thể không nói đến Wordpress Đây là mộtcông cụ rất phổ biến trên thế giới nói chung và Việt Nam nói riêng.Trong Wordpress

có một Plugin rất nổi tiếng được viết từ các lập trình viên thực thụ từ Wootheme đóchính là Woocommerce Nó được phản hồi rất tịch cực trong ngành công nghệ websiteđặc biệt là website bán hàng tính đến thời điểm hiện tại Với sự hỗ trợ đặc biệt củaPlugin Woocommerce trong việc tạo một website bán hàng Em đã chọn đề tài “Xâydựng website bán hàng bằng Wordpress”

Mặc dù đã rất cố gắng nỗ lực để hoàn thành đề tài,bên cạnh đó không thể tránhkhỏi những thiếu sót Mong rằng nhận được sự phản hồi tích cực từ phía thầy cô vàcác bạn

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

Trang 9

Chương I: TỔNG QUAN VỀ WORDPRESS VÀ PLUGIN

WOOCOMMERCE1.1 Giới thiệu chung về Wordpress.

WordPress là một phần mềm nguồn mở (Open Source Software) được viết bằngngôn ngữ lập trình website PHP (Hypertext Preprocessor) và sử dụng hệ quản trị cơ sở

dữ liệu MySQL WordPress được ra mắt lần đầu tiên vào ngày 27/5/2003 bởi tác giảMatt Mullenweg và Mike Little Hiện nay WordPress được sở hữu và phát triển bởicông ty Automattic có trụ sở tại San Francisco, California thuộc hợp chủng quốc HoaKỳ

WordPress là một mã nguồn mở bằng ngôn ngữ PHP để hỗ trợ tạo blog cá nhân,

và nó được rất nhiều người sử dụng ủng hộ về tính dễ sử dụng, nhiều tính năng hữuích Qua thời gian, số lượng người sử dụng tăng lên, các cộng tác viên là những lậptrình viên cũng tham gia đông đảo để phát triển mã nguồn WordPress có thêm nhữngtính năng tuyệt vời Và cho đến thời điểm 2015, WordPress đã được xem như là một

hệ quản trị nội dung (CMS – Content Management System) vượt trội để hỗ trợ ngườidùng tạo ra nhiều thể loại website khác nhau như blog, website tin tức/tạp chí, giớithiệu doanh nghiệp, bán hàng – thương mại điện tử, thậm chí với các loại website có

độ phức tạp cao như đặt phòng khách sạn, thuê xe, đăng dự án bất động sản,v v Hầunhư mọi hình thức website với quy mô nhỏ và vừa đều có thể triển khai trên nền tảngWordPress

Nhưng như thế không có nghĩa là WordPress chỉ thích hợp với các dự án nhỏ, màhiện nay có tới khoảng 25% website trong danh sách 100 website lớn nhất thế giới sử

dụng mã nguồn WordPress Ví dụ như trang tạp chí TechCrunch, Mashable, CNN,

BBC America, Variety, Sony Music, MTV News, Bata, Quartz,…rất nhiều không

thể kể hết được

Những Thành tựu của Wordpress

Khi tìm hiểu về WordPress, bạn sẽ thật tự hào khi biết rằng mã nguồn mà các bạnđang tìm hiểu ngay sau đây có những thành tựu rất vượt bậc và là một mã nguồn CMS

mở phổ biến nhất hành tinh Để kiểm chứng điều đó, các bạn cần biết là:

 Trên thế giới, có khoảng 25 bài viết được đăng lên các website sử dụng

WordPress mỗi giây

Trang 10

 Trong số 100% các website sử dụng mã nguồn CMS, WordPress chiếm 60%.

 Phiên bản WordPress 4.0 đạt hơn 16 triệu lượt tải chỉ sau khoảng hai tháng

 WordPress đã được dịch sang 52 ngôn ngữ khác nhau Tuy nhiên lại chưa cóphiên bản tiếng Việt chính thức, nhưng bạn có thể Việt hóa dễ dàng bằng cách tìm bàitrên blog với từ khóa “Việt hóa WordPress“

 Có hơn 80 chương trình họp mặt về WordPress được tổ chức vào năm 2014

 Mã nguồn WordPress hiện đang có khoảng 785 lập trình viên cùng hợp tácphát triển

 Chỉ tính các giao diện (hay còn gọi là theme) miễn phí trên thư viện

WordPress.org thì đã có hơn 2.700 themes khác nhau

*Hoạt động của mã nguồn Wordpress:

Các dữ liệu làm việc thế nào?

Trong mã nguồn WordPress, nó đã được lập trình nhiều tính năng giúp bản thân

nó có thể tương tác với cơ sở dữ liệu (database) như MySQL để giúp người sử dụng cóthể lưu trữ dữ liệu mềm trên website Tất cả các dữ liệu mềm được lưu trữ vào database

sẽ bao gồm các nội dung văn bản được nhập vào website, các thiết lập (vì các thiết lập

sẽ lưu dưới dạng một kiểu dữ liệu) và một số dữ liệu khác

Nếu vào xem database thông qua phpMyAdmin hoặc các ứng dụng tương tự, sẽthấy WordPress có nhiều bảng dữ liệu để chứa các dữ liệu được lưu vào

WordPress làm gì mỗi khi có người truy cập vào website?

Khi một người truy cập vào website, WordPress sẽ tự động xử lý theo quy trìnhsau:

Trang 11

Bước 1 – Khởi động mã nguồn

Tập tin index.php trong mã nguồn (không phải của theme hay plugin) được tải ra, sau đó nó sẽ truy xuất các tập tin cốt lõi khác như wp-config.php vốn để kết nối đến cơ

sở dữ liệu, wp-settings.php,… Bạn có thể mở tập tin index.php lên xem và lần mò theo

các tập tin được nhúng vào sẽ biết được quy trình nó load theo thứ tự các tập tin

Ở bước này, WordPress sẽ kết nối đến cơ sở dữ liệu được thiết lập trong

wp-config.php, sau đó sẽ tiến hành tải những tính năng trong mã nguồn như /wp-include/functions.php, /wp-include/options.php,…nhằm nạp sẵn các chức năng cần

thiết để có thể tiếp nhận những dữ liệu

Và cũng trong bước này, toàn bộ các dữ liệu được lưu vào bảng wp_options cógiá trị ở cột autoload là true sẽ được lôi ra hết, dù thiết lập đó có được sử dụng haykhông Mục đích của bước này là mang sẵn các tuỳ chọn của website cùng các plugin

để hỗ trợ cho các bước sau, đặc biệt là bước tải plugin để nó làm việc chính xác Đó là

lý do tại sao ở bài tối ưu bảng wp_options, mình có khuyên bạn nên xoá bớt các hàng

dữ liệu không dùng đến ở bảng này để giảm thời gian tải

Bước 2 – Kích hoạt plugin

Các plugin mà bạn đang kích hoạt trong website sẽ được tải ra ngay sau khi mãnguồn WordPress khởi động xong Bởi vì các tính năng trong WordPress Core được sửdụng trong plugin thường sẽ được gắn vào hookinit (bạn tạm thời hiểu nó là một điểmneo để kích hoạt kịch bản nào đó) nên nó sẽ load ngay sau khi WordPress khởi động làvậy

Bước 3 – Thực thi tập tin functions.php trong theme

Lúc này, WordPress sẽ tiến hành dò tìm đến tập tin functions.php trong themeđang được kích hoạt để tải các tính năng mà người tạo ra theme đã khai báo ở đó Vậylàm sao WordPress có thể hiểu được website đang dùng theme nào? Đó là ở bước 1, nó

đã kết nối vào database và dựa theo khoá current_theme trong cột option_name tại bảngwp_options

Trang 12

WordPress xác định thêm hiện tại thông qua database

Bước 4 – Phân tích truy vấn và khởi tạo truy vấn

Đây là bước quan trọng để website của bạn có thể hiển thị nội dung ra bên ngoài,

vì các nội dung sẽ được trả về sau khi các truy vấn gửi vào database Nếu bạn muốn biết

nó phân tích như thế nào thì xem tại đây

Truy vấn nghĩa là một mệnh lệnh được gửi vào database nhằm lấy các thông tin

mà truy vấn đó cần xem Truy vấn ở đây là truy vấn SQL gửi vào MySQL Server.Trước tiên, WordPress sẽ chạy hàm wp() được thiết lập trong

/wp-include/functions.php vốn để gọi phương thức $wp->main() cho mục đích thiết lập

truy vấn Đối tượng $wp được tạo ra bởi lớp WP trong /wp-include/class-wp.php./**

* Set up the WordPress query

Trang 13

Lúc này, phương thức $wp->parse_request() sẽ được khởi động cho mục đíchphân tích truy vấn dựa theo đường dẫn của website Vì bạn biết rằng WordPress sẽ tự

động sinh truy vấn dựa theo đường dẫn, ví dụ khi chúng ta vào http://domain.com/?

p=123 thì WordPress sẽ gửi một truy vấn vào database để lấy dữ liệu của post mang số

ID là 123

Sau khi truy vấn được phân tích, WordPress sẽ làm việc tiếp theo là thiết lập cáchàm điều kiện thông qua phương thức $wp_query->parse_query() Sau đó nó sẽ chuyểncác truy vấn đã được tạo ra thành truy vấn bằng các lệnh SQL nhằm gửi đến MySQL đểlấy dữ liệu bài viết bằng phương thức $wp_query->get_posts() Nếu database có dữliệu, các bài viết sẽ được lấy về sau khi gửi truy vấn và nó sẽ được lưu vào đốitượng$wp_query để nó sử dụng trong các vòng lặp cho việc hiển thị bài viết

Trong quá trình gửi truy vấn này, nếu nó không tìm thấy dữ liệu thì sẽ phân tích

và hiển thị báo lỗi 404

Và cuối cùng là nó có dữ liệu, thì nó sẽ thiết lập biến $post để sử dụng trongvòng lặp Biến $post là đối tượng chứa các dữ liệu của bài viết thông qua các thuộctính Phần này chúng ta sẽ đào sâu hơn ở phần tìm hiểu sâu về query và vòng lặp

Bước 5 – Thực thi các tập tin khuôn mẫu (template) trong theme

Sau khi nó đã có dữ liệu bài viết và các dữ liệu liên quan mà nó đã làm ở bước 4,thì nó sẽ tiến hành xử lý các tập tin template của theme thông qua cấu trúc template.Sau đó các nội dung và trang chủ của website sẽ được hiển thị dựa theo các templatetags dưới dạng HTML

1.2 Giới thiệu Woocommerce:

Woocommerce là một plugin miễn phí được sử dụng để tạo một trang thương

mại điện tử cỡ nhỏ tốt nhất hiện nay trong WordPress Nó cũng như bao plugin khác là

bổ sung chức năng vào website nhưng nó sẽ bổ sung gần như toàn diện các chức năng

mà một trang bán hàng đơn giản cần có

Woocommerce sẽ có các chức năng chính như:

 Tạo sản phẩm với định dạng thông thường, sản phẩm có thuộc tính, sản phẩmaffiliate và sản phẩm kỹ thuật số (có thể tải về)

Trang 14

 Hỗ trợ tự tính thuế sản phẩm hoặc thuế theo đơn hàng.

 Hỗ trợ tự tính giá chuyển phát, có rất nhiều loại tính giá chuyển phát và sẽ đadạng hơn khi cài thêm plugin như có thể tính giá chuyển phát dựa theo cânnặng, kích thước, tỉnh thành,…

 Trang quản lý đơn hàng chuyên nghiệp, lọc đơn hàng thông qua từng trạngthái

 Hỗ trợ template hiển thị riêng để có thể tự cấu hình lại template hiển thị phầnshop và sản phẩm, cái này rất có lợi cho lập trình viên

 Có sẵn nhiều theme và extension (plugin mở rộng) để biến thành trang shopchuyên nghiệp

 Và hàng tá các chức năng hay ho khác nữa

Như vậy với các tính năng kể trên, Woocommerce có thể lựa chọn cho những ai cầnlàm một trang shop đơn giản ngay trên website WordPress của mình để giới thiệu sảnphẩm và cho phép khách đặt hàng trực tuyến để bán hàng tiện lợi hơn

1.2.1 Cài đặt và thiết lập cơ bản:

-Trước tiên bạn tìm plugin tên Woocommerce trong Dashboard và cài plugin tên

WooCommerce – excelling eCommerce rồi cài nó.

Hình 1:Tìm plugin “Woocommerce” trên thư viện

Trang 15

Sau khi cài đặt thì kích hoạt như bình thường Sau khi kích hoạt nó sẽ chuyển

thẳng bạn đến trang thiết lập ban đầu cho Woocommerce Hãy ấn vào nút Cài đặt bản

dịch để nó cài bộ ngôn ngữ phù hợp cho website, ví dụ bạn đang dùng WordPress

tiếng Việt thì nó sẽ cài bản dịch tiếng Việt cho Woocommerce Sau đó ấn nút Bắt đầu.

Hình 2:Cài đặt bản dịch và thiết lập cho Woocommerce

Trang 16

Kế đến là bước cài đặt trang cần thiết cho Woocommerce, ở đây nó sẽ cài một số

trang bắt buộc như Cửa hàng, Giỏ hàng, Thanh toán,…vì nếu không có các trang này thì sẽ không hoàn thiện được Do vậy ta sẽ ấn nútTiếp tục.

Hình 3:Cài đặt trang cần thiết cho Woocommerce

Trang 17

Kế tiếp là cài đặt vị trí cửa hàng, ở đây bạn sẽ cài đặt quốc gia của cửa hàng bạn,loại tiền tệ, định dạng tiền tệ Nếu bạn thiết lập cho cửa hàng tại Việt Nam thì nên thiếtlập như ảnh dưới.

Hình 4: Thiết lập vị trí và định dạng tiền tệ phù hợp với Việt Nam.

Trang 18

Ở bước cài đặt vận chuyển và thuế bạn cứ ấn Tiếp tục mà không cần chọn gì nhé,

cái này chúng ta sẽ thiết lập kỹ hơn ở mục riêng của nó Sau khi thiết lập xong thì quaylại trang quản trị

Hình 5: Đã thiết lập hoàn thành

Trang 19

Ngoài ra chúng ta còn một bước cuối nữa là chỉnh lại định dạng tiền tệ một chútnữa để cho nó phù hợp nhất với định dạng tiền tệ Việt Nam, đó là xóa 2 số 0 ở cuối đi.Bạn hãy vào Woocommerce -> Cài đặt.

Hình 6: Cấu hình định dạng tiền mặt

Trang 20

Sau đó ở tab Chung, bạn sửa thành 0 ở phần Số đơn vị thập phân.

Hình 7:Bỏ số đơn vị thập phân ở tiền tệ

Okay, bây giờ giá tiền của sản phẩm sẽ hiển thị chính xác là 150.000 nếu chúng

ta nhập giá là 150000

1.2.2 Tìm hiểu các trang trong Woocommerce:

Mặc định sau khi cài xong Woocommerce, bạn vào phần quản lý trang (Pages) sẽthấy có một số trang mặc định mà Woocommerce tự tạo ra để có thể sử dụng các chứcnăng cần thiết trên trang bán hàng

Trang 21

Hình 8:Các trang mặc định của Woocommerce

Ở đây bao gồm:

 Cửa hàng: Trang này sẽ hiển thị các sản phẩm mới nhất trên website và có

phân trang

 Giỏ hàng: Trang này sẽ là trang giỏ hàng của bạn khi thêm hàng vào giỏ, nó sẽ

hiển thị các sản phẩm có trong giỏ hàng

 Tài khoản của tôi: Đây là trang quản lý tài khoản của khách hàng nếu họ đăng

nhập vào website

 Thanh toán: Trang thanh toán đơn hàng, hay còn gọi là trang Checkout.

Còn cái Trang mẫu là cái Sample page khi cài WordPress, không có gì cả

Trong đó, trang Cửa hàng sẽ được thiết lập ở Woocommerce -> Cài đặt -> Sản

phẩm -> Hiển thị.

Trang 22

Hình 9: Thiết lập trang cửa hàng

Các trang còn lại tuy không thiết lập ở đây nhưng để nó hoạt động thì nội dungphải cần có các shortcode tương ứng như sau:

 Giỏ hàng: [woocommerce_cart]

 Tài khoản của tôi: [woocommerce_my_account]

 Thanh toán: [woocommerce_checkout]

Dĩ nhiên là những shortcode đó đều có trong các trang mặc định màWoocommerce tạo ra rồi

Lỡ xóa các trang của Woocommerce, làm sao để tạo lại?

Khi một hoặc tất cả trang có sẵn trong Woocommerce bị mất do bạn lỡ xóa đi

hoặc vì lý do nào đó, bạn có thể tạo lại bằng cách vào Woocommerce -> Tình trạng hệ

thống -> Công cụ -> và ấn vào nút Cài đặt trang.

Hình 10: Thiết lập lại các trang bị mất

Trang 23

1.3 Thêm một sản phẩm đơn giản:

Phần tiêu đề và nội dung chúng ta sẽ nhập nó như tiêu đề sản phẩm và nội dung

mô tả chi tiết của sản phẩm

Hình 12:Nhập tiêu đề và mô tả chi tiết của sản phẩm

Trang 24

Ngay bên dưới nó là phần Dữ liệu sản phẩm, ở đây bạn hãy chọn là Sản phẩm

đơn giản Ở bên dưới khung đó là các phần bạn nhập thông tin sản phẩm như giá cả,

mã sản phẩm, quản lý kho hàng,…

Hình 13: Khung nhập dữ liệu sản phẩm

 Chung: Phần này sẽ nhập thông tin về mã sản phẩm và giá sản phẩm.

o Mã sản phẩm: Nhập mã sản phẩm để bạn tiện quản lý trong kho hàng.

o Giá bán chuẩn: Giá chuẩn của sản phẩm.

o Giá khuyến mãi: Giá sản phẩm sau khi được giảm, bạn có thể lên lịch để giá

khuyến mãi có hiệu lực trong thời gian nhất định

 Kiểm kê kho hàng: Phần này sẽ thiết lập số lượng sản phẩm trong kho và tình trạng

hàng hóa trong kho

o Quản lý kho hàng: Bạn muốn thiết lập số lượng hàng trong kho thì đánh dấu vào.

o Tình trạng kho hàng: Tình trạng của sản phẩm này là còn hàng hay hết hàng.

Nếu bạn bật tính năng kiểm kê kho hàng thì khi khách mua hết số lượng đã thiếtlập thì nó đưa về tình trạng hết hàng

o Bán riêng: Đánh dấu nếu bạn muốn khách chỉ được mua với số lượng 1 cái của

mặt hàng này trong một đơn hàng

 Giao nhận: Thiết lập trọng lượng, kích thước của sản phẩm và loại hình giao hàng.

o Trọng lượng: Nhập số trọng lượng của sản phẩm, đơn vị sẽ được thiết lập ở

Woocommerce -> Cài đặt

o Kích thước: Nhập chiều dài, chiều rộng và chiều cao của sản phẩm, đơn vị sẽ

được thiết lập ở Woocommerce -> Cài đặt

Trang 25

o Loại hình giao nhận hàng: Chọn loại hình giao nhận hàng, cái này mình sẽ nói

kỹ hơn ở bài khác

 Các sản phẩm được kết nối: Kết nối các sản phẩm lại với nhau để người mua có thể

dễ dàng tìm ra các sản đó và gợi ý khách hàng mua kèm thêm

o Bán thêm: Gợi ý khách hàng mua sản phẩm thay cho sản phẩm hiện tại mà họ

đang xem Ví dụ sau này bạn có một sản phẩm tốt hơn sản phẩm này thì có thểthêm nó vào phần này

o Bán chéo: Gợi ý khách hàng mua thêm trong lúc xem giỏ hàng, ví dụ bạn bán

iPhone 6S thì nên thêm các sản phẩm như sạc, vỏ điện thoại vào phần bán chéo

để họ mua kèm thêm

o Nhóm: Chọn nhóm sản phẩm cần đưa vào Nhóm sản phẩm nghĩa là họ mua theo

một nhóm chứ không mua riêng lẻ, cái này mình sẽ nói riêng ở phần khác

 Các thuộc tính: Thiết lập thuộc tính sản phẩm như màu sắc, kích thước,…nhưng

mình sẽ nói kỹ hơn ở phần khác

 Nâng cao: Một số thiết lập thêm cho sản phẩm.

o Ghi chú thanh toán: Ghi chú mà bạn muốn gửi đến khách hàng sau khi mua

Tiếp tục kéo xuống dưới, chúng ta sẽ thấy phần mô tả ngắn của sản phẩm Phần

này để bạn nhập mô tả ngắn, ví dụ như một lời giới thiệu ngắn về sản phẩm vì nó sẽhiển thị ngay bên dưới giá sản phẩm trong trang chi tiết của sản phẩm

Trang 26

Hình 15: Khung mô tả ngắn sản phẩm

1.3.2.Thiết lập danh mục sản phẩm.

Tiếp tục nhìn qua bên tay phải của trang thêm sản phẩm sẽ thấy phần thiết lậpdanh mục sản phẩm, nhìn chung nó giống hệt chức năng Category (Chuyên mục) trongbài viết thôi Nếu chưa có bạn có thể thêm mới một danh mục và chọn nó

Trang 27

1.3.5 Thư viện hình ảnh của sản phẩm

Ngay bên dưới phần ảnh sản phẩm là phần thư viện hình ảnh sản phẩm, nói chínhxác hơn thì đây là danh sách nhiều hình ảnh mà bạn muốn nó hiển thị theo dưới dạngslide (trình diễn ảnh) trong trang sản phẩm Bạn nên chọn một số tấm ảnh khác của sảnphẩm này ở đây, khi chọn ảnh bạn hãy ấn Ctrl để chọn nhiều ảnh

Trang 28

Hình 19: Thư viện ảnh của một sản phẩm

Xong rồi, , bây giờ hãy ấn nút đăng bài viết Sau đó vào lại trang Cửa hàng của

bạn

Hình 20: Xem trang cửa hàng

Trang 29

Và bạn đã thấy sản phẩm mình vừa đăng lên nó thế này.

Hình 21: Sản phẩm hiển thị ở trang Cửa hàng.

Trang 30

Và khi click vào trang chi tiết một sản phẩm nó sẽ hiển thị thế này.

Hình 22: Hình mô tả chi tiết sản phẩm

Trang 31

1.3.6 Thử nghiệm chức năng giỏ hàng và thanh toán

Bây giờ hãy thử thêm sản phẩm của bạn vào giỏ đi Lúc này bạn sẽ thấy nó đểmột thông báo là đã thêm sản phẩm vào giỏ hàng

Hình 23: Thêm sản phẩm vào giỏ

Trang 32

Và khi bạn click vào giỏ hàng thì nó sẽ hiển thị thế này.

Hình 24: Trang giỏ hàng

Tiếp theo ấn nút thanh toán.Ban đầu chưa chỉnh sửa Code nó sẽ hiển thị như thế

này và có thêm các phần không phù hợp đối với Việt Nam.Ví dụ Bang/hạt,Postcode

Trang 33

Hình 25: Trang thanh toán chưa hiệu chỉnh

Trang 34

Sau khi được chỉnh sửa Code sẽ được hiển thị như sau:

Hình 26: Trang thanh toán đã được hiệu chỉnh

1.4 Cách sử dụng theme Store Front cho Woocommerce:

Khi sử dụng Woocommerce thì chắc chắn không phải theme nào cũng có thể hỗtrợ hiển thị gian hàng của mình tốt nhất Lý do là vì mỗi theme đều có cách thiết kếkhác nhau, nên có thể nhiều theme mà đặc biệt là theme miễn phí sẽ không hỗ trợ hiểnthị tốt trong Woocommerce

Và khi chấp nhận sử dụng Woocommerce, nếu bạn muốn gian hàng của mìnhđẹp thì chắc chắn sẽ cần phải mua một số theme trả phí dành riêng cho Woocommercetại WooThemes hoặc ThemeForest (phong phú hơn) nhưng bạn chỉ nên sử dụng themetrả phí cho Woocommerce khi bạn đã thật sự biết cách sử dụng nó

Trang 35

* Các tính năng của theme Store Front:

 Hoàn toàn miễn phí và mã nguồn mở

 Tương thích tốt với các plugin hỗ trợ thiết kế như Origin Page Builder hoặcVisual Composer để tự thiết kế bố cục cho mỗi trang

 Hỗ trợ cấu trúc HTML5 và Schema chuẩn SEO

 Khu vực tùy chỉnh Customize đầy đủ

 Dễ sử dụng

 Hỗ trợ Responsive

 Có hỗ trợ phần mở rộng Storefront Designer để hỗ trợ tùy biến chuyên nghiệphơn

 Code thân thiện với lập trình viên

 Hỗ trợ nhiều child theme (trả phí)

Thêm dữ liệu mẫu (Dummy content) cho Woocommerce.

Dữ liệu mẫu của Woocommerce là một gói dữ liệu đã tạo sẵn một số sản phẩm

để chúng ta có thể dễ dàng thử nghiệm các chức năng hoặc theme Mục đích mình kêucác bạn thêm dữ liệu mẫu này vào là để chúng ta có thể thấy theme hiển thị đầy đủ thếnào

Đầu tiên bạn tải plugin Woocommerce về máy tính và giải nén ra Khi giải nén

ra, bạn vào thư mục/woocommerce/dummy-data/ sẽ thấy các tập tin dữ liệu mẫu.

Nhưng ở đây chúng ta chỉ sử dụng tập tin dummy-data.xml

Cuối cùng là bạn truy cập vào website -> Công cụ -> Nhập vào -> WordPress

(cài plugin WordPress Importer nếu bạn chưa cài) và upload tập tin dummy-data.xmllên

Hình 27: Import dữ liệu dummy content

Trang 36

Đưa các sản phẩm về user của bạn và đánh dấu vào Download and import fileattachments rồi Submit.

Từ khóa » đồ An Xây Dựng Website Bán Hàng Bằng Wordpress