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.
