Custom Product Layout Flatsome

Flatsome từ lâu đã được mệnh danh là “theme quốc dân” trong giới làm website WordPress nhờ tốc độ load nhanh và khả năng tùy biến mạnh mẽ. Nổi bật nhất phải kể đến Custom Product Layout – tính năng giúp bạn thiết kế lại trang chi tiết sản phẩm (Product Page) cực kỳ chuyên nghiệp mà không cần phải viết một dòng code nào.

Nếu bạn là người mới tìm hiểu về WordPress và muốn tự tay làm một trang sản phẩm có tỷ lệ chuyển đổi cao (thêm bảng size, thông tin giao hàng, icon bảo hành…), bài viết này chính là dành cho bạn.

Tại Sao Nên Sử Dụng Custom Product Layout Trên Flatsome?

Trước đây, để thay đổi cấu trúc trang sản phẩm của WooCommerce, bạn thường phải can thiệp vào file PHP trong theme con (child theme), điều này gây khó khăn cho những ai không chuyên về kỹ thuật. Với tính năng Custom Product Layout mới, mọi thứ đã thay đổi:

• Sử dụng hoàn toàn UX Builder: Kéo thả trực quan các thành phần (element) vào đúng vị trí bạn muốn.
• Tăng độ tin cậy (Trust Indicators): Dễ dàng chèn thêm các Element như Lightbox Size Chart (Bảng kích cỡ), chính sách vận chuyển (Shipping info), hoặc các Icon cam kết bảo hành, thanh toán an toàn ngay gần nút “Thêm vào giỏ hàng”.
• Không cần biết code: Phù hợp với mọi đối tượng, từ các chủ shop tự làm web đến các anh em quản trị viên muốn tối ưu UI/UX nhanh chóng.

Custom Product Layout Flatsome: Cách tạo trang chi tiết sản phẩm tùy chỉnh

Bước 1: Tạo một UX Block mới làm “khung” giao diện

Đầu tiên, bạn cần tạo một trang trắng (UX Block) để lưu trữ thiết kế mới của mình.

1. Trong trang quản trị WordPress, vào UX Blocks > chọn Add new (Thêm mới).
2. Đặt tên cho Block này để dễ nhớ. (Ví dụ: CPL – Mặc định toàn trang, CPL – Danh mục quần áo…).
3. Chỉ cần đặt tên và bấm Đăng (Publish), chưa cần thiết kế gì bên trong lúc này.

Bước 2: Kích hoạt giao diện tùy chỉnh (Khai báo nơi áp dụng)

Sau khi có “khung”, bạn phải báo cho Flatsome biết sẽ dùng khung này ở đâu. Bạn có 3 lựa chọn:

Lựa chọn A: Áp dụng cho TOÀN BỘ sản phẩm trên web (Globally)

• Vào Giao diện (Appearance) > Tùy biến (Customize).
• Truy cập WooCommerce > Product Page.
• Tại phần Product Layout, chọn kiểu Custom. Sau đó chọn đúng tên UX Block bạn vừa tạo ở Bước 1. Lưu lại (Publish).

Lựa chọn B: Chỉ áp dụng cho một Danh mục cụ thể (Per Category)

• Vào Sản phẩm (Products) > Danh mục (Categories).
• Bấm chỉnh sửa danh mục bạn muốn thay đổi (vd: Áo thun).
• Tìm phần chọn Custom Layout và chọn UX Block bạn đã tạo. (Lưu ý: Tính năng này tương thích rất tốt nếu bạn dùng Yoast SEO hoặc Rank Math để set Danh mục chính).

Lựa chọn C: Chỉ áp dụng cho một Sản phẩm đơn lẻ (Per Single Product)

• Mở trang chỉnh sửa của sản phẩm bạn muốn đổi giao diện.
• Kéo xuống dưới, tìm mục chọn Layout và chọn UX Block tương ứng.

Bước 3: Bắt tay vào thiết kế bằng UX Builder (Trực quan nhất)

Đây là bước bạn thêm mắm dặm muối, kéo thả các thành phần cho đẹp mắt. Theo tài liệu, cách tốt nhất là thiết kế trực tiếp trên giao diện bên ngoài (Front-end) thay vì trong trang quản trị:

1. Mở một trang sản phẩm bất kỳ ngoài website (Nên chọn sản phẩm đã có sẵn đầy đủ hình ảnh, mô tả ngắn, giá cả… để dễ hình dung lúc thiết kế).

Nhìn lên thanh công cụ đen trên cùng (Admin bar), nhấp vào dòng chữ: “Edit product layout with UX Builder”.

Khung UX Builder quen thuộc sẽ hiện ra. Lúc này, bạn sẽ thấy cột bên trái có thêm một menu mới tên là Product Page. Trong đó chứa toàn bộ các mảnh ghép như: Hình ảnh sản phẩm, Tiêu đề, Giá, Nút thêm vào giỏ hàng, Đánh giá, v.v.

Mẹo nhỏ: Hãy bắt đầu bằng cách kéo thả một phần tử Gap và Row để tạo bố cục chia cột, sau đó gắp các thành phần (Elements) thả vào vị trí bạn muốn.

💡 2 Lưu ý quan trọng từ nhà phát triển:

1. Hiển thị tính năng của Plugin khác (Product Hooks): Nếu bạn cài các plugin bên ngoài (ví dụ: Plugin hiển thị điểm thưởng, mua hàng nhanh…) mà không thấy chúng hiện ra trên giao diện tự thiết kế. Đừng lo, hãy tìm phần tử có tên là “Product Hooks” trong UX Builder và kéo thả nó vào nơi bạn muốn tính năng đó hiển thị.
2. Sử dụng Template có sẵn: Nếu làm từ đầu quá mất thời gian, nhà phát triển UX Themes cung cấp sẵn các bộ mã ngắn (Shortcodes) giao diện hoàn chỉnh. Bạn chỉ cần chèn các shortcode này vào UX Block, sau đó vào UX Builder chỉnh sửa lại theo ý thích là xong.

flatsome_custom_single_product_x

Có các hook được tạo sẵn (trống) để gắn nội dung tùy chỉnh trong trường hợp cần thiết.

Mã ngắn (shortcode) để tùy chỉnh bố cục trang sản phẩm.

Đây là liên kết đến các shortcode dành cho bố cục sản phẩm tùy chỉnh: http://docs.uxthemes.com/article/247-custom-product-page-layout-shortcodes

Chỉ cần sao chép mã ngắn bạn muốn sử dụng vào khối trang sản phẩm và bắt đầu tùy chỉnh bố cục ngay lập tức.

Cách Sử Dụng Template Product Page Có Sẵn (Tiết Kiệm Thời Gian, Không Cần Tự Thiết Kế)

Thay vì phải tự ngồi tưởng tượng bố cục và kéo thả từng thành phần từ đầu như một trang giấy trắng, bạn hoàn toàn có thể “đứng trên vai người khổng lồ”. Cộng đồng Flatsome hiện nay có rất nhiều tài nguyên chia sẻ các layout dựng sẵn, tối ưu rất đẹp, hiện đại và cực kỳ dễ sử dụng.

1. Nguồn Tải Template Miễn Phí, Uy Tín

Điển hình nhất phải kể đến bộ sưu tập Layout được thiết kế bởi tác giả Davi Peyroton trên cộng đồng Flatzone. Các mẫu ở đây được tích hợp sẵn các yếu tố tăng tỷ lệ chuyển đổi (Trust indicators) như bảng Size (Lightbox), thông tin vận chuyển, hay các icon bảo hành đẹp mắt – và quan trọng nhất là chúng hoàn toàn miễn phí.

👉 Bạn có thể xem demo và tải về tại đây: Tài nguyên chia sẻ từ Flatzone

Ngoài ra, bạn cũng có thể tham khảo thêm một số nguồn uy tín khác như:

• Flatsome Studio: Thư viện khổng lồ được tích hợp sẵn ngay trong UX Builder của theme.
• Tài liệu Shortcode từ UX Themes: Hãng cũng cung cấp sẵn các bộ mã shortcode layout cơ bản để người dùng lấy làm khung chuẩn.
• Các hội nhóm cộng đồng thiết kế website WordPress/Flatsome trên Facebook.
• Tham khảo thêm các nguồn trả phí như: flatsomedemos.com, flatsomeplugins.com, …

2. Các Bước Áp Dụng Nhanh Giao Diện Mẫu

Vì thao tác thiết lập hoàn toàn giống với quy trình ở phần trên, bạn chỉ cần thực hiện nhanh qua các bước sau:

• Bước 1: Lấy Shortcode: Chọn mẫu ưng ý trên Flatzone (hoặc các nguồn khác) và Copy toàn bộ đoạn mã Shortcode.
• Bước 2: Dán vào UX Block: Tạo một UX Block mới, chuyển khung soạn thảo sang chế độ Text (Văn bản), Paste mã vào và bấm Publish.
• Bước 3: Khai báo Layout: Chọn nơi áp dụng giao diện (Toàn trang, từng Danh mục hoặc Sản phẩm lẻ) giống hệt Bước 2 của Phần 1.
• Bước 4: Tinh chỉnh (Front-end): Mở trang sản phẩm bất kỳ ngoài website, bấm “Edit product layout with UX Builder” trên thanh admin. Tại đây, bạn chỉ việc thay đổi chữ, hình ảnh, hoặc kéo thả phần tử Product Hooks (nếu dùng plugin ngoài).

Bấm Update là bạn đã có ngay một trang sản phẩm xịn xò, tối ưu chuyển đổi mà không tốn công thiết kế từ đầu!

Lời Kết

Có thể thấy, Flatsome ngày càng hoàn thiện và ưu ái rất nhiều cho những anh em không chuyên về code. Chỉ với vài thao tác kéo thả và copy/paste đơn giản, bạn đã có thể sở hữu một trang Product Page xịn xò, chuẩn SEO và tối ưu chuyển đổi không thua kém gì các thương hiệu lớn.

Bạn đã trải nghiệm tính năng Custom Product Layout này chưa? Hoặc có phát hiện thêm tính năng nào hay ho trong các bản cập nhật gần đây của Flatsome không? Hãy để lại bình luận chia sẻ để mọi người cùng học hỏi nhé!