Làm web bán hàng với Flatsome – Tuỳ chỉnh cho WooCommerce

Ngày đăng: 03 - 04 - 2020 Lượt xem: 427 lượt

Tuỳ chỉnh cho giao diện WooCommerce sẽ là bài cuối trong series Làm Web bán hàng với Flatsome. Trong bài viết này sẽ giới thiệu cách tuỳ chỉnh các hiển thị sản phẩm, thanh toán, giỏ hàng,… cho WooCommerce. Flatsome là giao diện hỗ trợ WooCommerce, nên nó sẽ có tích hợp giao diện dành cho plugin bán hàng này.

Tuỳ chỉnh cho WooCommerce

Tuỳ chỉnh hiển thị giao diện WooCommerce trong Flatsome sẽ bao gồm các thành phần như: trang danh mục sản phẩm, trang sản phẩm, trang tài khoản, tranh giỏ hàng và thanh toán,…

Bước 1: Chỉnh sửa thông bảo của cửa hàng: là một đoạn thông báo sẽ xuất hiện trên hoặc dưới cùng trang web. Dùng cho các thông báo khuyến mại hay hoạt động mới của cửa hàng.

Bước 2: Chỉnh sửa trang Danh mục sản phẩm: bạn kéo xuống dưới và lựa chọn Layout (bố cục) cho trang danh mục sản phẩm. Như là có Sidebar hay không, Sidebar bên trái hay bên phải,… List Style dạng ma trận hay danh sách.

Số lượng sản phẩm mỗi trang – Products per Page là bao nhiêu. Số lượng sản phẩm mỗi hàng trên màn hình Desktop, Tablet, Mobile.

Tiếp theo là tuỳ chỉnh phần Header cho trang danh mục. Bạn có thể lựa chọn Header tron suốt và chọn ảnh nền header. Ảnh này được dùng làm backgroun cho cả Main header, nhìn khá đẹp mắt.

Tiếp theo là tuỳ chọn hiển thị cho từng sản phẩm trong danh sách.

Bước 3: Tuỳ chỉnh hiển thị trang sản phẩm Product page:

Product Layout: lựa chọn bố cục hiển thị cho trang chi tiết sản phẩm. Chẳng hạn mình chọn Right Sidebar Small là một side bar nằm bên phải ở phần đầu của trang sản phẩm.

Tiếp theo là tuỳ chỉnh Product Header là phần đầu của trang sản phẩm. Cũng giống như trang danh mục sảnh phẩm.

Bước 4: tuỳ chỉnh trang tài khoản. Bạn có thể chỉnh sửa hình nên cho tiêu đề, câu chào khi có người muốn đăng nhập.

Bước 5: tuỳ chỉnh Icon thanh toán. Bạn có thể ẩn hiện các icon, và di chuyển vị trí. Phần này cho khách hàng biết họ có thể thanh toán bằng cách nào trên website của bạn. Các icon này sẽ nằm dưới cùng website.

Bước 6: tuỳ chỉnh ảnh sản phẩm. Dùng để chỉnh sửa kích thước ảnh và cắt ảnh sản phẩm.

Bước 7: tuỳ chỉnh trang thanh toán. Bạn lựa chọn bố cục trang thanh toán theo ý mình. Chẳng hạn chọn Focused thì tất cả nội dung của website sẽ biến mất, chỉ hiện mỗi trang thanh toán nằm giữa. Bạn cũng có thể ẩn một số trường thông tin không cần thiết.

Bước 8: tuỳ chỉnh hiển thị giỏ hàng. Bạn có thể chọn Layout cho phù hợp với trang thanh toán. Bạn nên chọn Auto update on quantity change để giỏ hàng tự động cập nhật giá khi khách thêm bớt sản phẩm/ số lượng sản phẩm.

Tổng kết

Với Flatsome, bạn rất dễ dàng có một trang web bán hàng đẹp mắt, khả năng tuỳ biến cao là lại rất nhẹ. Flatsome còn là nền tảng chung của rất nhiều giao diện web bán hàng hiện nay. Biết cách tuỷ chỉnh Flatsome, bạn có thể dễ dàng tuỳ chỉnh những giao diện khác.

0 0 vote
Article Rating

guest
0 Comments
Inline Feedbacks
View all comments

Bài viết liên quan

Tạo bảng giá trong Wordpress với Flatsome

Tạo bảng giá trong Wordpress với Flatsome

06 - 04 - 2020

Trong quá trình làm website, có đôi bạn muốn tạo một bảng giá, phục vụ cho việc cho thuê...

Làm web bán hàng với Flatsome - Tuỳ chỉnh hiển thị Blog

Làm web bán hàng với Flatsome - Tuỳ chỉnh hiển thị Blog

31 - 03 - 2020

Các giao diện wordpress chuyên nghiệp cho phép bạn chỉnh sửa hiển thị các trang chức năng riêng biệt....

Làm web bán hàng với Flatsome - Tuỳ chỉnh giao diện

Làm web bán hàng với Flatsome - Tuỳ chỉnh giao diện

31 - 03 - 2020

Tuỳ chỉnh giao diện bao gồm bố cục, màu sắc, font chữ,... để website mang phong cách riêng. Đây...

Làm web bán hàng với Flatsome – Tạo trang liên hệ tuyệt đẹp

Làm web bán hàng với Flatsome – Tạo trang liên hệ tuyệt đẹp

30 - 03 - 2020

Trang liên hệ là một thành phần không thể thiếu đối với mỗi website. Trang liên hệ là nơi...

Làm web bán hàng với Flatsome – Tạo footer

Làm web bán hàng với Flatsome – Tạo footer

30 - 03 - 2020

Footer hay còn gọi là chân trang, là thành phần nằm dưới cùng của trang. Footer thường chứa các...

Làm web bán hàng với Flatsome – Tạo nội dung trang chủ

Làm web bán hàng với Flatsome – Tạo nội dung trang chủ

29 - 03 - 2020

Trong bài viết trước mình đã tạo phần đầu trang chủ với các loại banner. Trong bài viết này,...

0
Would love your thoughts, please comment.x
()
x