Flatsome là một trong những theme WordPress phổ biến và bán chạy nhất, được thiết kế đặc biệt cho các website thương mại điện tử và doanh nghiệp. Hầu hết các Mẫu website cài sẵn tại ThemeVip đều được xây dựng trên theme Flatsome. Ở bài viết này ThemeVip sẽ gửi đến bạn hướng dẫn chi tiết về cách cài đặt và sử dụng theme Flatsome.

1. Cài Đặt Flatsome Trên WordPress

a. Chọn mua Theme Flatsome bản quyền gốc hoặc bản Gpl

Flatsome là 1 theme có phí và bạn có thể chọn mua bản quyền gốc hoặc bản quyền Gpl. Bản quyền Gpl không giới hạn website thì bạn được tặng kèm khi mua mẫu website bất kỳ tại Themevip, chi tiết Theme Flatsome bản mới tại đây hoặc bản quyền gốc thì bạn có thể mua tại link này.

So sánh Theme Flatsome bản quyền gpl và sản phẩm gốc

Điểm giống:

• Tính năng và hiệu năng: Hoàn toàn giống bản gốc 100%.
• Tính hợp pháp: Sản phẩm GPL tuân thủ pháp luật và điều kiện của giấy phép GNU.

Điểm khác:

Yếu tố	Sản phẩm Gốc	Sản phẩm GPL
Kích hoạt bản quyền	Yêu cầu key hoặc token từ nhà sản xuất.	Không yêu cầu key, chỉ cần cài đặt.
Cập nhật	Tự động qua bảng điều khiển WordPress.	Thủ công qua file tải về.
Hỗ trợ kỹ thuật	Nhận từ nhà phát triển chính thức.	Được hỗ trợ từ bên thứ ba (nếu có).
Kho mẫu (Demo)	Đầy đủ và dễ sử dụng.	Có thể thiếu hoặc cần cài đặt thủ công.

b. Tải file cài đặt theme Flatsome

Dù bạn mua Theme bản quyền gốc hay bản quyền Gpl thì bạn cũng sẽ nhận được File cài đặt với định dạng file nén .Zip

Ví dụ bạn dùng theme Flatsome tại Themevip thì sau khi giải nén file .Zip ra sẽ được các file như hình dưới.

Trong đó file cài đặt chính sẽ ở trong thư mục Theme Files với file cài đặt ví dụ bản Flatsome 3.19.7 thì File cài đặt sẽ là Flatsome-3.19.7.Zip như hình dưới.

c. Cài Đặt Theme Flatsome

Đăng nhập vào WordPress Dashboard.

Đi đến Giao diện (Appearance) > Giao diện (Themes).

Nhấn vào Thêm mới (Add New) > Tải giao diện lên (Upload Theme).

Chọn tệp Flatsome .zip đã tải về và nhấn Cài đặt (Install Now).

Sau khi cài đặt xong, nhấn Kích hoạt (Activate).

Tiếp theo đến phần Setup Wizard bạn chọn Let’s Go.

Tiếp theo điền key bản quyền nếu là mua bản quyền gốc để tiếp tục nếu bạn dùng file tặng tại ThemeVip thì không cần điền key mà Theme được tự kích hoạt sau khi cài. Bây giờ bạn chọn Return to the WordPress Dashboard .Các phần setup child theme, plugins và logo có thể setup sau không cần lo lắng.

2. Child theme Flatsome

Child theme tạm dịch sang Tiếng Việt có nghĩa là theme con, sử dụng theme child cho phép bạn tùy chỉnh css, php trong theme giúp quá trình cập nhật không bị xóa, child theme sẽ thừa hưởng tất cả các tính năng từ theme gốc, Themevip khuyên bạn nên sử dụng child theme, các bước cài đặt khá đơn giản chỉ cần tải Child Theme Flatsome sau đó chọn cài đặt và kích hoạt như thông thường.

Tùy chỉnh mắc sắc, font chữ và logo

Để tùy biến màu sắc, font chữ và logo bạn chọn Giao diện > Tùy biến.

Tiếp theo chọn Style để tùy chỉnh màu sắc và font chữ theo nhu cầu.

Tùy chỉnh css và JavaScript

Để tùy chỉnh code hoặc thêm các mã JavaScript bên thứ ba như: Facebook Pixel, Hotjar, Google Analytics bạn truy cập phần Advanced > Global settings, muốn tùy chỉnh css bạn vào tab Custom CSS.

Tùy chỉnh Flatsome blog

Flatsome là một theme chuyên dùng cho nhu cầu xây dựng trang web bán hàng tuy nhiên nếu bạn muốn dùng các tính năng blog cơ bản thì Flatsome hoàn toàn đáp ứng được, chọn Giao diện > Tùy biến sau đó chọn Blog.

Trong phần blog single post sẽ có các tùy chỉnh như sau:

• Transparent Header: tùy chọn header trong suốt
• Enable Header Meta: tùy chọn các thuộc tính meta trên header
• Enable Featured Image: hiển thị hình ảnh thumbnail đầu trang
• Enable Share Icons: hiển thị nút share
• Enable Footer Meta: tùy chọn hiển thị thuộc tính meta ở footer
• Enable Blog Author Box: hiển thị author box
• Enable Next/Prev Navigation: bật tính năng next post

Hướng dẫn tạo shortcode Flatsome

Shortcode tạm dịch là mã ngắn, đây là một tính năng khá hay của WordPress giúp bạn tùy biến và chèn nội dung vào bất cứ nơi đâu trên website, để tạo shortcode bạn vào UX Blocks tạo một blocks mới, khi tạo xong bạn chú ý góc phải màn hình phần shortcode, giờ bạn có thể copy shortcode này để chèn vào các bài viết.

Để chèn shortcode bạn chỉ cần copy mã và dán vào trang nội dung bất kỳ.

Việt hóa theme Flatsome

Flatsome là một theme nước ngoài cho nên đa số giao diện vẫn chưa hỗ trợ Tiếng Việt, vì vậy bạn cần dịch nó sang ngôn ngữ Tiếng Việt, trước tiên bạn cài đặt plugin Loco Translate, tiếp theo chọn theme Flatsome để việt hóa.

Tạo ngôn ngữ mới cho Flatsome.

Chọn ngôn ngữ Tiếng Việt, chọn location Custom.

Lọc từ mà bạn cần dịch sau đó điền bản dịch và ấn Save để hoàn tất, load lại trang xem bản dịch đã thành công hay chưa, xóa cache toàn trang web nếu có.

TÙY CHỈNH WOOCOMMERCE & FLATSOME

1. Tùy chỉnh WooCommerce trong Flatsome

Để chỉnh các thiết lập của WooCommerce, bạn vào:

Giao diện → Customize → Advanced → WooCommerce

Làm theo thứ tự từ trên xuống dưới:

➤ Store Notice (Thông báo cửa hàng)

Bạn nhập nội dung bất kỳ, thông báo này sẽ xuất hiện ở đầu website để khách dễ thấy.

➤ Product Catalog (Danh mục sản phẩm)

Phần này cho phép bạn chọn cách sắp xếp sản phẩm. WooCommerce có 6 kiểu lọc chính:

• Default sorting – Lọc mặc định của Woo (phổ biến nhất)

• Popularity (sales) – Sản phẩm bán chạy

• Average rating – Sản phẩm có đánh giá cao

• Sort by most recent – Sản phẩm mới nhất

• Sort by price (asc) – Giá thấp → cao

• Sort by price (desc) – Giá cao → thấp

➤ Tùy chỉnh trang chi tiết sản phẩm của Flatsome

Bạn chỉ cần chọn:

• Layout (bố cục)

• Header (kiểu tiêu đề)

• Kích thước hình ảnh

Các phần giỏ hàng, thanh toán… khá dễ nên bạn có thể tự chỉnh khi cần.

➤ Tùy chỉnh Site Search (Tìm kiếm sản phẩm)

Chọn theo gợi ý sau:

• Bật Live Search để hiển thị kết quả ngay lập tức

• Set Search results latency khoảng 500ms – 1000ms

• Bật tìm kiếm theo SKU và tag nếu muốn khách tìm sản phẩm chính xác hơn

2. Xây dựng Landing Page bằng UX Builder

Landing page là trang giúp bán hàng tốt hơn. Flatsome có bộ xây dựng trang kéo-thả nên cực dễ dùng.

Cách tạo:

1. Vào Trang → Thêm trang mới

2. Nhấn Edit with UX Builder

3. Chọn Add Elements để kéo thả block

4. Hoặc mở Flatsome Studio để import mẫu dựng sẵn

5. Nhấn vào Options của từng phần để chỉnh màu sắc – bố cục – khoảng cách

6. Xong nhấn Publish để xuất bản trang

Mẹo:
Nhớ chỉnh hiển thị cho từng thiết bị (PC / Tablet / Mobile).
Vào Options → Visibility để bật/tắt từng phần tử.

3. Tùy chỉnh Header & Footer Flatsome

Flatsome hỗ trợ kéo thả Header, rất dễ dùng và không cần biết code.

➤ Chỉnh Header

• Có preset dựng sẵn, chọn và dùng ngay

• Có 2 phiên bản menu: Desktop & Mobile

➤ Chỉnh Footer

Footer sẽ có 3 phần:

1. Footer 1 – Khu vực chính, thêm widget vào đây

2. Footer 2 – Phần phụ (nếu không dùng → tắt đi)

3. Absolute Footer – Dòng dưới cùng (copyright, text nhỏ…)

Bạn vào Edit Footer Widget để thêm nội dung như: liên hệ, menu, logo, social…