Hướng dẫn sử dụng Flatsome từ A–Z cho người mới [2026]

Flatsome là một trong những theme WordPress được sử dụng phổ biến để xây dựng website bán hàng bằng WooCommerce. Theme tích hợp sẵn UX Builder, công cụ thiết kế kéo thả giúp bạn tạo trang chủ, landing page, banner, danh mục sản phẩm và nhiều khu vực khác mà không cần tự viết toàn bộ HTML hoặc CSS.

Tuy nhiên, khi mới cài Flatsome, bạn có thể gặp một số câu hỏi: chỉnh logo ở đâu, sửa trang chủ bằng cách nào, UX Builder hoạt động ra sao, Header và Footer được quản lý tại khu vực nào, hay làm thế nào để giao diện hiển thị tốt trên điện thoại?

Trong bài viết này, ToanWeb sẽ hướng dẫn sử dụng Flatsome theo đúng trình tự dựng một website thực tế. Sau khi hoàn thành, bạn có thể:

• Cài đặt Flatsome và Child Theme đúng cách.
• Hiểu các khu vực quản trị quan trọng của theme.
• Sử dụng UX Builder để xây dựng bố cục trang.
• Tạo và chỉnh sửa Header, Footer, menu và logo.
• Xây dựng trang chủ bán hàng cơ bản.
• Quản lý sản phẩm và tùy chỉnh trang WooCommerce.
• Thiết kế giao diện tương thích với máy tính, máy tính bảng và điện thoại.
• Tối ưu tốc độ, SEO và cập nhật theme an toàn.

Lưu ý: Tên hoặc vị trí một số tùy chọn có thể khác đôi chút tùy phiên bản Flatsome, phiên bản WordPress, WooCommerce và gói ngôn ngữ đang sử dụng. Hãy sao lưu website trước khi thay đổi giao diện trên trang đang hoạt động.

1. Flatsome là gì?

Flatsome là theme WordPress được phát triển theo hướng tối ưu cho WooCommerce. Thay vì phải cài thêm một trình dựng trang bên ngoài, theme đã có sẵn UX Builder để người dùng chỉnh sửa bố cục trực quan.

Một bộ Flatsome thường gồm những thành phần quan trọng sau:

• Flatsome Theme: theme chính, chứa toàn bộ chức năng và tệp nguồn cốt lõi.
• Flatsome Child Theme: theme con dùng để lưu những tùy chỉnh riêng, hạn chế việc code bị ghi đè khi cập nhật theme chính.
• UX Builder: trình thiết kế trang kéo thả của Flatsome.
• UX Blocks: các khối nội dung có thể thiết kế một lần và tái sử dụng ở nhiều vị trí.
• Header Builder: công cụ sắp xếp logo, menu, tìm kiếm, tài khoản, giỏ hàng và các thành phần ở đầu trang.
• Flatsome Studio: thư viện các mẫu thiết kế có thể nhập vào UX Builder và chỉnh sửa lại.
• Theme Options: khu vực cấu hình màu sắc, font chữ, bố cục, blog, cửa hàng, trang sản phẩm và các thiết lập chung khác.

Flatsome phù hợp với website nào?

Flatsome phù hợp nhất với:

• Website bán hàng bằng WooCommerce.
• Website giới thiệu doanh nghiệp có danh mục sản phẩm.
• Landing page giới thiệu sản phẩm hoặc dịch vụ.
• Website nội thất, thời trang, mỹ phẩm, đồ gia dụng và điện máy.
• Website cần quản trị viên tự thay banner hoặc nội dung thường xuyên.

Flatsome vẫn có thể dùng cho blog hoặc website giới thiệu đơn giản. Tuy nhiên, nếu website có hệ thống dữ liệu rất đặc thù hoặc yêu cầu hiệu năng cực cao, một theme viết riêng có thể phù hợp hơn.

Dùng Flatsome có cần cài Elementor không?

Không. Flatsome đã có UX Builder nên người mới không cần cài thêm Elementor để thiết kế trang. Việc dùng hai trình dựng trang trên cùng một website thường làm quy trình quản trị phức tạp hơn và có thể phát sinh thêm CSS, JavaScript không cần thiết.

2. Cần chuẩn bị gì trước khi cài Flatsome?

Trước khi bắt đầu, bạn nên chuẩn bị:

1. Một website WordPress đã hoạt động.
2. Tài khoản quản trị viên WordPress.
3. Bộ cài Flatsome hợp lệ, gồm theme chính và theme con nếu có.
4. WooCommerce nếu mục tiêu là xây dựng website bán hàng.
5. Một bản sao lưu nếu đang thao tác trên website có dữ liệu.

Bạn cũng nên chuẩn bị trước logo, favicon, màu thương hiệu, font chữ, danh mục sản phẩm và một số hình ảnh banner. Khi có sẵn bộ nhận diện, việc thiết kế sẽ nhất quán và nhanh hơn đáng kể.

Phân biệt Flatsome Theme và Flatsome Child

Theme chính phải được cài trước vì nó chứa toàn bộ chức năng. Child Theme chỉ kế thừa theme chính, vì vậy không thể hoạt động độc lập.

Bạn nên kích hoạt Child Theme nếu dự định:

• Thêm code PHP vào functions.php.
• Ghi đè template của WooCommerce hoặc Flatsome.
• Tạo các tệp CSS, JavaScript riêng.
• Tùy chỉnh website lâu dài và vẫn muốn cập nhật theme chính.

Nếu chỉ thay logo, màu sắc, font chữ hoặc thiết kế bằng UX Builder, bạn không nhất thiết phải chỉnh code. Dù vậy, dùng Child Theme ngay từ đầu vẫn là lựa chọn an toàn cho website có kế hoạch phát triển lâu dài.

3. Hướng dẫn cài đặt Flatsome

Bước 1: Tải theme Flatsome lên WordPress

Trong trang quản trị WordPress, đi tới:

Giao diện → Giao diện → Thêm giao diện mới → Tải giao diện lên

Chọn tệp ZIP của theme chính, sau đó nhấn Cài đặt. Khi quá trình tải hoàn tất, chưa cần tùy chỉnh ngay.

Bước 2: Cài Flatsome Child Theme

Thực hiện tương tự để tải tệp Child Theme. Sau khi cả hai theme đã được cài, hãy kích hoạt Flatsome Child. WordPress sẽ tự sử dụng chức năng từ theme chính.

Bước 3: Chạy trình thiết lập ban đầu

Sau khi kích hoạt, Flatsome có thể hiển thị trình thiết lập ban đầu. Tùy bộ cài và phiên bản, bạn có thể được yêu cầu:

• Đăng ký hoặc xác thực theme.
• Tạo Child Theme.
• Cài plugin cần thiết.
• Nhập nội dung mẫu.
• Thiết lập logo hoặc giao diện ban đầu.

Nếu chưa muốn nhập demo, bạn có thể bỏ qua và tự xây dựng trang. Không nên nhập nhiều demo liên tiếp vào website thật vì có thể tạo ra trang, menu, ảnh và nội dung mẫu không cần thiết.

Bước 4: Cài WooCommerce

Nếu làm website bán hàng, vào Plugin → Cài plugin, tìm WooCommerce, cài đặt và kích hoạt. Sau đó chạy trình thiết lập để khai báo:

• Địa chỉ cửa hàng.
• Đơn vị tiền tệ.
• Loại sản phẩm.
• Phương thức giao hàng.
• Phương thức thanh toán.

Tại Việt Nam, bạn nên kiểm tra lại đơn vị tiền tệ là VND, định dạng giá, địa chỉ thanh toán và các phương thức chuyển khoản hoặc COD trước khi mở bán.

4. Làm quen với các khu vực quản trị của Flatsome

Người mới thường nhầm giữa UX Builder, Theme Options và UX Blocks. Có thể hiểu đơn giản như sau:

Khi nào dùng Theme Options?

Hãy dùng Theme Options khi muốn thay đổi trên toàn website, ví dụ:

• Màu chủ đạo của nút bấm.
• Font chữ cho tiêu đề và nội dung.
• Chiều rộng bố cục.
• Kiểu hiển thị blog.
• Số cột sản phẩm.
• Bố cục trang chi tiết sản phẩm.
• Header, Footer hoặc thông tin bản quyền.

Khi nào dùng UX Builder?

Hãy dùng UX Builder khi muốn thiết kế nội dung cụ thể, ví dụ trang chủ, trang giới thiệu, landing page hoặc một banner khuyến mãi.

Khi nào dùng UX Block?

UX Block phù hợp với nội dung xuất hiện ở nhiều nơi, chẳng hạn:

• Footer thiết kế riêng.
• Thanh cam kết dịch vụ.
• Banner khuyến mãi dùng trên nhiều danh mục.
• Hướng dẫn mua hàng xuất hiện ở nhiều sản phẩm.
• Nội dung chèn trước hoặc sau bài viết.

5. Thiết lập thông tin và nhận diện website

Trước khi dựng trang chủ, hãy thiết lập các thông tin chung.

Đổi tên website và mô tả ngắn

Đi tới Cài đặt → Tổng quan hoặc Giao diện → Tùy biến → Nhận diện website, sau đó nhập tên website và mô tả ngắn.

Tên website không nhất thiết phải lặp lại đầy đủ trong mọi tiêu đề SEO. Nếu dùng Rank Math hoặc Yoast SEO, bạn có thể cấu hình tiêu đề SEO riêng cho từng trang.

Thay logo

Mở Flatsome → Theme Options → Header → Logo & Site Identity hoặc khu vực tương đương trong Tùy biến. Tải logo lên và điều chỉnh chiều rộng hiển thị.

Nên dùng:

• SVG nếu hệ thống cho phép và tệp đến từ nguồn an toàn.
• PNG nền trong suốt nếu logo có hình dạng đặc biệt.
• WebP nếu logo là ảnh phức tạp.

Không nên tải logo kích thước quá lớn rồi thu nhỏ bằng CSS. Một logo có chiều rộng thực tế khoảng vài trăm pixel thường đã đủ cho phần Header.

Thay favicon

Favicon là biểu tượng nhỏ xuất hiện trên tab trình duyệt. Bạn có thể tải biểu tượng vuông trong phần Nhận diện website. WordPress thường khuyến nghị ảnh tối thiểu 512 × 512 px để tạo nhiều kích thước khác nhau.

Thiết lập màu sắc

Trong Theme Options → Style → Colors, hãy chọn:

• Màu chính cho nút và liên kết quan trọng.
• Màu phụ cho điểm nhấn.
• Màu chữ nội dung.
• Màu thông báo thành công hoặc cảnh báo nếu cần.

Chỉ nên dùng một màu chính và một đến hai màu phụ. Quá nhiều màu làm website thiếu nhất quán và khiến nút kêu gọi hành động không nổi bật.

Thiết lập font chữ

Trong phần Typography, chọn font cho nội dung, menu và tiêu đề. Đối với website tiếng Việt, hãy kiểm tra font có hỗ trợ đầy đủ dấu.

Để đảm bảo tốc độ:

• Chỉ dùng một hoặc hai họ font.
• Hạn chế tải quá nhiều độ đậm.
• Ưu tiên font hệ thống nếu không bắt buộc dùng font thương hiệu.
• Kiểm tra hiển thị trên điện thoại.

6. Hướng dẫn sử dụng UX Builder

UX Builder là phần quan trọng nhất khi học cách sử dụng Flatsome. Công cụ này cho phép bạn thêm, sắp xếp và chỉnh sửa nội dung ngay trên giao diện xem trước.

Cách mở UX Builder

Đi tới Trang → Tất cả trang, chọn trang cần chỉnh sửa rồi nhấn Edit with UX Builder hoặc Chỉnh sửa với UX Builder. Bạn cũng có thể mở trang ở giao diện bên ngoài và chọn nút chỉnh sửa trên thanh quản trị nếu tài khoản có quyền phù hợp.

Hiểu cấu trúc Section → Row → Column → Element

Phần lớn bố cục trong UX Builder được xây theo bốn lớp:

1. Section: khu vực lớn, có thể đặt nền, chiều cao và khoảng cách riêng.
2. Row: hàng nội dung nằm trong Section.
3. Column: các cột nằm trong Row.
4. Element: phần tử cụ thể như Text, Image, Button hoặc Products.

Ví dụ, một khu vực giới thiệu gồm ảnh bên trái và nội dung bên phải có thể được tạo như sau:

• Một Section làm nền.
• Một Row giới hạn chiều rộng nội dung.
• Hai Column, mỗi cột chiếm 50%.
• Cột trái chứa Image; cột phải chứa Title, Text và Button.

Nếu hiểu cấu trúc này, bạn sẽ dễ dàng kiểm soát khoảng cách và responsive hơn so với việc thêm phần tử một cách rời rạc.

Các thao tác cơ bản trong UX Builder

Khi chọn một phần tử, bạn có thể:

• Chỉnh nội dung và kiểu hiển thị.
• Kéo để thay đổi vị trí.
• Nhân bản phần tử.
• Sao chép và dán.
• Xóa phần tử.
• Thêm class hoặc ID riêng.
• Điều chỉnh hiển thị theo thiết bị.
• Quay lại thao tác trước bằng Undo.

Hãy lưu hoặc cập nhật trang sau mỗi nhóm thay đổi quan trọng. Tránh chỉnh quá nhiều rồi mới lưu, đặc biệt khi mạng không ổn định.

Các phần tử Flatsome thường dùng

Section

Section dùng để chia trang thành các khu vực rõ ràng. Bạn có thể thiết lập màu nền, ảnh nền, hiệu ứng nền, chiều cao tối thiểu và padding.

Mỗi Section nên phục vụ một mục tiêu, ví dụ: giới thiệu, danh mục sản phẩm, sản phẩm nổi bật hoặc đánh giá khách hàng.

Row và Column

Row quản lý chiều rộng và khoảng cách giữa các cột. Column quản lý tỷ lệ bố cục. Bạn có thể tạo 2, 3, 4 hoặc nhiều cột tùy nội dung.

Trên mobile, không nên cố giữ quá nhiều cột nhỏ. Hãy chuyển về một hoặc hai cột để nội dung dễ đọc và nút dễ bấm.

Text và Title

Text dùng cho đoạn nội dung; Title dùng cho tiêu đề trang trí hoặc tiêu đề khu vực. Khi làm SEO, hãy kiểm tra thẻ HTML của tiêu đề:

• Mỗi trang thường chỉ nên có một H1 chính.
• Các phần lớn dùng H2.
• Ý nhỏ nằm trong phần H2 dùng H3.

Không chọn H2 hoặc H3 chỉ vì kích thước đẹp. Nếu muốn chữ to hoặc nhỏ, hãy chỉnh style mà vẫn giữ cấu trúc heading hợp lý.

Image và Gallery

Image dùng cho ảnh đơn; Gallery dùng cho nhóm ảnh. Trước khi tải ảnh, hãy:

• Đổi tên tệp có ý nghĩa.
• Nén ảnh.
• Chọn kích thước phù hợp vị trí hiển thị.
• Điền ALT mô tả nội dung ảnh.
• Ưu tiên WebP hoặc AVIF nếu hệ thống hỗ trợ tốt.

Button

Button dùng để dẫn người dùng tới sản phẩm, biểu mẫu, số điện thoại hoặc trang liên hệ. Nội dung nút nên nói rõ hành động, chẳng hạn “Xem sản phẩm”, “Nhận báo giá” hoặc “Gọi tư vấn”, thay vì chỉ ghi “Xem thêm” ở mọi vị trí.

Banner và Slider

Banner phù hợp với nội dung quảng bá có ảnh nền, tiêu đề và nút. Slider chứa nhiều slide có thể chuyển qua lại.

Slider nhìn bắt mắt nhưng không nên lạm dụng. Một ảnh hero rõ thông điệp thường tải nhanh và tạo hành động tốt hơn một slider có quá nhiều ảnh dung lượng lớn.

Icon Box

Icon Box phù hợp để trình bày lợi ích, cam kết hoặc quy trình. Ví dụ: giao hàng toàn quốc, bảo hành chính hãng, hỗ trợ kỹ thuật và thanh toán an toàn.

Products và Product Categories

Hai phần tử này lấy dữ liệu trực tiếp từ WooCommerce. Bạn có thể chọn hiển thị sản phẩm mới, sản phẩm nổi bật, sản phẩm bán chạy, sản phẩm giảm giá hoặc sản phẩm thuộc một danh mục.

Hãy kiểm tra số cột trên từng thiết bị và tránh hiển thị quá nhiều sản phẩm ở trang chủ. Trang chủ nên giúp khách khám phá danh mục; trang danh mục mới là nơi hiển thị toàn bộ sản phẩm.

Accordion và Tabs

Accordion giúp thu gọn các nội dung dài như câu hỏi thường gặp. Tabs phù hợp khi các nhóm nội dung có mức độ quan trọng tương đương. Không nên giấu toàn bộ nội dung chính của trang trong nhiều tab vì người dùng có thể bỏ qua.

Margin, padding và khoảng cách khác nhau thế nào?

• Padding: khoảng cách từ nội dung đến mép bên trong phần tử.
• Margin: khoảng cách bên ngoài giữa phần tử đó với phần tử khác.

Khi hai khu vực bị dính sát nhau, hãy xác định cần tăng padding của Section hay margin của phần tử. Không nên chèn nhiều Spacer để chữa mọi lỗi khoảng cách, vì giao diện dễ vỡ trên thiết bị khác.

Dùng Flatsome Studio

Trong UX Builder, chọn Add Content rồi mở Flatsome Studio để duyệt mẫu. Sau khi nhập một mẫu, hãy thay toàn bộ ảnh, nội dung, màu sắc và liên kết bằng dữ liệu thật của website.

Studio phù hợp để lấy ý tưởng hoặc tăng tốc thiết kế. Không nên nhập nhiều mẫu rồi để nguyên, vì website sẽ thiếu bản sắc và có thể chứa nội dung mẫu không cần thiết.

[Internal link: “Hướng dẫn sử dụng UX Builder chi tiết” – bài con giải thích từng element, copy/paste và responsive.]

7. Cách thiết kế responsive trong Flatsome

Responsive có nghĩa là giao diện thích nghi với kích thước màn hình. Một trang đẹp trên máy tính chưa chắc đã sử dụng tốt trên điện thoại.

Trong UX Builder, hãy chuyển lần lượt giữa chế độ desktop, tablet và mobile để kiểm tra:

• Kích thước tiêu đề.
• Khoảng cách trên và dưới Section.
• Số cột sản phẩm.
• Thứ tự ảnh và nội dung.
• Kích thước nút.
• Khả năng đọc văn bản.
• Ảnh nền có che mất nội dung hay không.

Một số nguyên tắc responsive nên áp dụng

• Desktop có thể dùng 4–5 cột sản phẩm; mobile thường nên dùng 2 cột.
• Khu vực giới thiệu 2 cột nên chuyển thành 1 cột trên màn hình hẹp.
• Nút quan trọng cần đủ lớn và không nằm quá gần nút khác.
• Không đặt chữ nhỏ lên ảnh nền có độ tương phản thấp.
• Hạn chế ẩn nội dung quan trọng chỉ để giao diện trông gọn hơn.
• Kiểm tra trên điện thoại thật, không chỉ dựa vào chế độ xem trước.

Nếu cần đảo thứ tự cột trên mobile, hãy dùng tùy chọn sắp xếp hoặc tạo bố cục phù hợp thay vì nhân đôi toàn bộ nội dung. Nhân đôi rồi ẩn theo thiết bị có thể khiến trang nặng và khó bảo trì.

8. Cách tạo Header Flatsome

Header thường gồm logo, menu, tìm kiếm, tài khoản và giỏ hàng. Trong Flatsome, bạn có thể mở Header Builder từ Theme Options → Header.

Header thường được chia thành:

• Top Bar: thanh nhỏ phía trên, dùng cho thông báo hoặc thông tin liên hệ.
• Header Main: khu vực chính chứa logo và các chức năng quan trọng.
• Header Bottom: thường chứa menu danh mục hoặc menu phụ.
• Header Mobile: bố cục riêng cho điện thoại.

Tạo menu chính

Đi tới Giao diện → Menu hoặc khu vực quản lý menu tương ứng của WordPress. Tạo menu mới, thêm Trang, Danh mục sản phẩm, Bài viết hoặc liên kết tùy chỉnh, sau đó gán vào vị trí menu chính.

Cấu trúc menu nên ngắn gọn. Với website bán hàng, có thể dùng:

• Trang chủ.
• Sản phẩm hoặc danh mục chính.
• Giới thiệu.
• Tin tức.
• Chính sách.
• Liên hệ.

Tạo menu thả xuống

Trong màn hình quản lý menu, kéo mục con lệch sang phải dưới mục cha. Không nên tạo quá nhiều tầng vì menu khó sử dụng trên điện thoại.

Mega Menu

Mega Menu phù hợp khi website có nhiều danh mục. Hãy chia nhóm rõ ràng theo loại sản phẩm, nhu cầu hoặc thương hiệu. Chỉ dùng Mega Menu khi lượng nội dung đủ lớn; website ít danh mục nên dùng menu thả xuống thông thường.

Sticky Header

Sticky Header giữ một phần Header khi người dùng cuộn trang. Tính năng này giúp menu và giỏ hàng luôn dễ truy cập, nhưng Header sticky nên gọn hơn Header ban đầu để không chiếm quá nhiều màn hình.

Header trên mobile

Một Header mobile cơ bản nên có:

• Nút mở menu.
• Logo.
• Biểu tượng tìm kiếm hoặc giỏ hàng.

Không nên đưa toàn bộ thông tin desktop xuống mobile. Số điện thoại hoặc nút tư vấn có thể đặt trong menu hoặc thanh cố định riêng nếu thực sự cần.

[Internal link: “Cách tạo Header Flatsome bằng Header Builder”.]

9. Cách tạo Footer Flatsome

Footer là khu vực cuối trang, thường chứa thông tin doanh nghiệp, liên hệ, chính sách, danh mục và mạng xã hội.

Có hai cách phổ biến để tạo Footer:

Cách 1: Dùng Widget

Đi tới Giao diện → Widget, thêm nội dung vào các cột Footer do theme cung cấp. Cách này nhanh, phù hợp với Footer đơn giản.

Cách 2: Dùng UX Block

Tạo một UX Block mới, thiết kế Footer bằng UX Builder, sau đó gán Block vào khu vực Footer hoặc chèn shortcode tại vị trí phù hợp trong Theme Options.

Cách dùng UX Block linh hoạt hơn vì bạn có thể tạo Row, Column, icon, ảnh và responsive giống như một trang bình thường.

Một Footer bán hàng nên có:

• Tên và thông tin pháp lý của đơn vị.
• Địa chỉ, số điện thoại, email.
• Liên kết chính sách mua hàng, bảo hành, giao hàng và đổi trả.
• Danh mục sản phẩm quan trọng.
• Kênh mạng xã hội.
• Thông tin bản quyền.

Tránh nhồi quá nhiều từ khóa vào Footer hoặc đặt hàng trăm liên kết lặp lại trên mọi trang.

[Internal link: “Cách tạo Footer Flatsome bằng UX Block”.]

10. Hướng dẫn tạo trang chủ bằng Flatsome

Đây là phần giúp bạn kết hợp những kiến thức đã học thành một website hoàn chỉnh.

Bước 1: Tạo trang mới

Đi tới Trang → Thêm trang mới, đặt tên “Trang chủ”, xuất bản rồi mở bằng UX Builder.

Bước 2: Đặt làm trang chủ tĩnh

Đi tới Cài đặt → Đọc, chọn “Một trang tĩnh”, sau đó chọn trang vừa tạo làm Trang chủ.

Bước 3: Xây dựng bố cục

Một trang chủ bán hàng có thể sắp xếp theo thứ tự sau:

Khu vực 1: Hero banner

Nêu rõ sản phẩm hoặc lợi ích chính, kèm một nút hành động. Nội dung phải trả lời nhanh ba câu hỏi: bạn bán gì, dành cho ai và khách nên làm gì tiếp theo?

Khu vực 2: Danh mục sản phẩm

Hiển thị 4–8 danh mục quan trọng bằng ảnh dễ nhận biết. Không nhất thiết đưa tất cả danh mục con lên trang chủ.

Khu vực 3: Sản phẩm nổi bật

Dùng element Products để hiển thị một nhóm sản phẩm có chủ đích như bán chạy, mới hoặc đang khuyến mãi.

Khu vực 4: Banner chiến dịch

Giới thiệu ưu đãi, bộ sưu tập hoặc sản phẩm cần đẩy mạnh. Hãy cập nhật hoặc gỡ banner khi chương trình kết thúc.

Khu vực 5: Lợi ích và cam kết

Dùng Icon Box để trình bày 3–4 lý do khách hàng nên lựa chọn, ví dụ sản phẩm chính hãng, giao hàng nhanh, bảo hành rõ ràng và hỗ trợ kỹ thuật.

Khu vực 6: Đánh giá hoặc dự án thực tế

Ưu tiên đánh giá có nguồn gốc thật. Nếu dùng ảnh khách hàng hoặc thương hiệu đối tác, hãy đảm bảo bạn có quyền sử dụng.

Khu vực 7: Bài viết mới

Hiển thị các bài tư vấn có liên quan đến sản phẩm. Đây cũng là cách tạo liên kết nội bộ từ trang chủ tới nội dung SEO.

Khu vực 8: Kêu gọi hành động

Kết thúc bằng một hành động cụ thể như liên hệ tư vấn, xem toàn bộ sản phẩm hoặc nhận báo giá.

Bước 4: Kiểm tra trước khi xuất bản

Kiểm tra:

• Tất cả nút có liên kết đúng.
• Banner không còn chữ mẫu.
• Ảnh có ALT và dung lượng hợp lý.
• Không có sản phẩm mẫu hoặc giá sai.
• Trang hiển thị tốt trên mobile.
• Mỗi trang chỉ có một H1 chính rõ ràng.

11. Hướng dẫn thêm sản phẩm WooCommerce

Đi tới Sản phẩm → Thêm mới. Một sản phẩm cơ bản cần có:

• Tên sản phẩm.
• Mô tả chi tiết.
• Mô tả ngắn.
• Giá bán và giá khuyến mãi nếu có.
• Ảnh đại diện và thư viện ảnh.
• Danh mục sản phẩm.
• Thuộc tính.
• Thông tin kho.
• Cân nặng và kích thước nếu dùng để tính vận chuyển.

Sản phẩm đơn giản

Sản phẩm đơn giản chỉ có một phiên bản mua. Chọn loại Sản phẩm đơn giản, nhập giá, tồn kho và thông tin vận chuyển.

Sản phẩm biến thể

Sản phẩm biến thể phù hợp khi một sản phẩm có nhiều lựa chọn như màu sắc hoặc kích thước.

Quy trình cơ bản:

1. Chọn loại Sản phẩm có biến thể.
2. Tạo hoặc chọn thuộc tính.
3. Đánh dấu thuộc tính dùng cho biến thể.
4. Tạo các biến thể.
5. Nhập giá, ảnh và tồn kho cho từng biến thể.

Nếu một biến thể chưa có giá, WooCommerce có thể không cho phép khách mua biến thể đó.

Ảnh sản phẩm

Ảnh đại diện cần rõ, đồng nhất tỷ lệ và nền. Thư viện ảnh nên cho thấy nhiều góc, chi tiết, kích thước hoặc cách sử dụng. Tránh tải ảnh quá lớn chỉ để hiển thị ở khung nhỏ.

Danh mục, thuộc tính và từ khóa sản phẩm

• Danh mục: dùng để phân nhóm sản phẩm và tạo trang danh mục.
• Thuộc tính: mô tả đặc điểm có cấu trúc như thương hiệu, công suất, màu hoặc kích thước.
• Từ khóa sản phẩm: chỉ dùng khi có chiến lược rõ ràng; không tạo quá nhiều trang tag mỏng.

[Internal link: “Hướng dẫn đăng sản phẩm WooCommerce chuẩn SEO”.]

12. Tùy chỉnh trang cửa hàng và danh mục sản phẩm

Trong Theme Options và phần WooCommerce, bạn có thể cấu hình:

• Số cột sản phẩm.
• Kiểu ảnh và hiệu ứng khi rê chuột.
• Vị trí Sidebar.
• Bộ lọc sản phẩm.
• Quick View.
• Nút thêm vào giỏ hàng.
• Kiểu phân trang hoặc tải thêm.
• Thông tin hiển thị trên thẻ sản phẩm.

Trang danh mục nên có tiêu đề rõ, mô tả ngắn hữu ích, sản phẩm và bộ lọc thực sự liên quan. Không nên đặt một đoạn văn SEO quá dài phía trên khiến người dùng phải cuộn nhiều mới thấy sản phẩm.

Nếu muốn thêm banner vào một danh mục, bạn có thể tạo nội dung bằng UX Block hoặc shortcode rồi chèn vào khu vực nội dung đầu danh mục, tùy cách cấu hình của phiên bản đang dùng.

13. Tùy chỉnh trang chi tiết sản phẩm

Trang sản phẩm là nơi ảnh hưởng trực tiếp đến quyết định mua. Hãy ưu tiên:

• Tên sản phẩm rõ ràng.
• Ảnh chất lượng tốt.
• Giá và tình trạng hàng.
• Lợi ích chính trong mô tả ngắn.
• Nút mua nổi bật.
• Thông tin giao hàng, bảo hành.
• Mô tả chi tiết dễ đọc.
• Đánh giá thật.
• Sản phẩm liên quan.

Trong Theme Options → WooCommerce → Product Page hoặc khu vực tương đương, bạn có thể chọn bố cục thư viện ảnh, vị trí thông tin, tab và sản phẩm liên quan.

Tạo Custom Product Layout bằng UX Block

Flatsome hỗ trợ xây dựng bố cục sản phẩm tùy chỉnh bằng UX Block kết hợp các shortcode dành cho trang sản phẩm. Cách này phù hợp khi bạn muốn kiểm soát sâu vị trí thư viện ảnh, giá, mô tả, nút mua và các khối nội dung.

Trước khi áp dụng cho toàn bộ cửa hàng, hãy thử trên môi trường staging hoặc một nhóm sản phẩm. Trang sản phẩm tùy chỉnh có thể xung đột với plugin biến thể, đánh giá, mua nhanh hoặc bundle nếu bố cục bỏ thiếu hook cần thiết.

[Internal link: “Cách tạo trang sản phẩm tùy chỉnh trong Flatsome”.]

14. Hướng dẫn sử dụng UX Blocks

UX Block là một khối nội dung độc lập được thiết kế bằng UX Builder. Sau khi tạo, bạn có thể chèn Block bằng shortcode hoặc chọn tại những vị trí được Flatsome hỗ trợ.

Cách tạo UX Block

1. Đi tới UX Blocks → Add New.
2. Đặt tên dễ nhận biết.
3. Mở bằng UX Builder.
4. Thiết kế nội dung.
5. Lưu và lấy shortcode của Block.
6. Chèn shortcode vào vị trí cần hiển thị.

Quy tắc đặt tên UX Block

Khi website có nhiều Block, hãy đặt tên theo mục đích và vị trí, ví dụ:

• Footer - Chính.
• Cam kết - Toàn website.
• Banner - Danh mục máy pha cà phê.
• Hướng dẫn mua hàng - Sau mô tả sản phẩm.

Không nên đặt tên chung chung như “Block 1” hoặc “Mẫu mới”, vì sau một thời gian rất khó quản lý.

Lợi ích của UX Block

Nếu nội dung được dùng ở 20 trang, bạn chỉ cần sửa một Block để cập nhật cả 20 vị trí. Tuy nhiên, đừng lồng quá nhiều UX Block trong nhau vì sẽ khó tìm nguồn nội dung và khó xử lý khi giao diện lỗi.

15. Tùy chỉnh blog trong Flatsome

Flatsome không chỉ dùng cho sản phẩm; bạn vẫn có thể xây dựng blog để làm SEO và tư vấn khách hàng.

Trong Theme Options, phần Blog thường cho phép chọn:

• Bố cục trang danh sách bài viết.
• Sidebar trái, phải hoặc không có Sidebar.
• Kiểu thẻ bài viết.
• Hiển thị ngày đăng, tác giả và danh mục.
• Ảnh đại diện.
• Bài viết liên quan.
• Nút chia sẻ.
• Điều hướng bài trước và bài sau.

Khi viết bài, nên dùng trình soạn thảo WordPress cho nội dung dài, thay vì chia mọi đoạn thành quá nhiều element UX Builder. Nội dung chuẩn giúp dễ chỉnh sửa, nhẹ hơn và thuận tiện khi đổi theme trong tương lai.

UX Builder phù hợp với landing page hoặc phần trình bày đặc biệt; Gutenberg phù hợp hơn với bài blog dài có cấu trúc văn bản.

16. Thêm CSS tùy chỉnh vào Flatsome

Khi Theme Options không có tùy chọn mong muốn, bạn có thể dùng CSS.

Các vị trí thường dùng gồm:

• Giao diện → Tùy biến → CSS bổ sung.
• Khu vực Custom CSS trong Theme Options.
• Tệp CSS của Child Theme.

Với chỉnh sửa nhỏ, CSS bổ sung là cách đơn giản. Với dự án cần quản lý code lâu dài, nên đặt CSS trong Child Theme, chia chú thích theo thành phần và lưu bằng Git nếu có thể.

Không chỉnh trực tiếp tệp CSS hoặc PHP của theme chính. Khi cập nhật Flatsome, những thay đổi đó có thể bị ghi đè.

Dùng class riêng trong UX Builder

Thay vì viết selector phụ thuộc vào nhiều lớp có sẵn của theme, hãy thêm một class dễ hiểu cho element, ví dụ tw-home-benefits, rồi viết CSS dựa trên class này. Cách đó giúp code ít bị ảnh hưởng hơn khi thay đổi bố cục.