Flatsome là một trong những theme WordPress phổ biến nhất dành cho WooCommerce, được cộng đồng lựa chọn rộng rãi nhờ bộ công cụ thiết kế kéo thả UX Builder tích hợp sẵn. Thay vì phải chỉnh sửa code phức tạp, người dùng có thể tùy biến hoàn toàn giao diện trang sản phẩm chỉ bằng thao tác kéo thả trực quan, nhanh chóng và dễ kiểm soát kết quả ngay lập tức. Nếu bạn đang tìm kiếm theme phù hợp để bắt đầu dự án WooCommerce, hãy ghé qua kho theme WordPress chất lượng để tham khảo thêm nhiều lựa chọn.
Hướng dẫn dưới đây trình bày chi tiết từng bước để tùy biến giao diện trang sản phẩm WooCommerce trong Flatsome, bắt đầu từ việc tạo UX Blocks, kích hoạt layout tùy chỉnh, đến chỉnh sửa bố cục trực tiếp bằng UX Builder.
Hướng dẫn tùy biến giao diện trang sản phẩm Flatsome từng bước
Bước 1: Tạo UX Blocks mới cho trang sản phẩm
Truy cập vào Admin Dashboard, di chuyển đến mục UX Blocks trên thanh menu bên trái, sau đó nhấn vào Thêm trang mới để khởi tạo một khối bố cục tùy chỉnh riêng cho trang sản phẩm.
Bước 2: Đặt tên và xuất bản UX Blocks
Nhập tiêu đề cho UX Blocks là Custom-products-page (hoặc bất kỳ tên nào dễ nhận biết), sau đó nhấn nút Đăng để lưu UX Blocks vừa tạo vào hệ thống.
Bước 3: Kết nối UX Blocks với trang sản phẩm WooCommerce
Sau khi tạo xong UX Blocks, bước tiếp theo là gán nó vào template trang sản phẩm. Trên Bảng điều khiển, vào Flatsome > Theme Options > WooCommerce > Product Page để mở trang cài đặt bố cục sản phẩm.
Bước 4: Chọn chế độ bố cục tùy chỉnh (Custom layout)
Trong trang cài đặt bố cục vừa mở, tìm mục Product Layout ở cột bên trái. Nhấp vào biểu tượng Custom để kích hoạt chế độ bố cục tùy chỉnh thay vì dùng bố cục mặc định của Flatsome.
Bước 5: Gán UX Blocks vào Custom Product Layout và lưu cài đặt
Tại ô Custom Product Layout, chọn UX Blocks bạn vừa tạo ở bước trước từ danh sách xổ xuống. Sau khi chọn xong, nhấn nút Đăng để lưu toàn bộ cài đặt vào theme Flatsome và áp dụng cho tất cả trang sản phẩm trên website.
Bước 6: Mở trang sản phẩm và truy cập trình chỉnh sửa UX Builder
Điều hướng đến một trang sản phẩm hiện có trên website. Nên chọn sản phẩm đã có đầy đủ thông tin như hình ảnh, mô tả ngắn và giá để dễ quan sát bố cục khi thiết kế. Lúc này trang sản phẩm sẽ hiển thị trống vì UX Blocks vừa tạo chưa có nội dung nào bên trong.
Nhìn lên thanh quản trị phía trên cùng trang, nhấp vào Sửa sản phẩm rồi chọn tùy chọn Edit product layout with UX Builder để mở trình chỉnh sửa bố cục.
Bước 7: Thêm các thành phần bố cục bằng Add Element
Khi giao diện UX Builder khởi động xong, nhấn nút Add Element để mở bảng chứa toàn bộ các thành phần có thể thêm vào trang sản phẩm. Đây là không gian bạn có toàn quyền sắp xếp và tùy biến bố cục theo ý muốn.
Tại tab Product Page trong bảng Add Element, bạn sẽ thấy đầy đủ các thành phần dành riêng cho trang sản phẩm WooCommerce như: hình ảnh sản phẩm, tên sản phẩm, giá, nút thêm vào giỏ hàng, mô tả ngắn, đánh giá sản phẩm và nhiều thành phần khác. Kéo thả bất kỳ thành phần nào vào khu vực thiết kế để bắt đầu xây dựng bố cục.
Nếu bạn gặp khó khăn trong quá trình tùy biến giao diện hoặc cần tư vấn thêm, đội ngũ kỹ thuật luôn sẵn sàng hỗ trợ tại trang hỗ trợ theme WordPress.
Bước 8: Lưu bố cục và kiểm tra kết quả thực tế
Sau khi hoàn thiện thiết kế bố cục theo ý muốn, nhấn nút Update ở góc trên bên phải màn hình để lưu và kích hoạt bố cục mới. Trang sản phẩm sẽ ngay lập tức áp dụng layout vừa thiết kế cho tất cả sản phẩm trên cửa hàng.
Kết quả sau khi tùy biến trang sản phẩm Flatsome bằng UX Builder
Dưới đây là giao diện trang sản phẩm WooCommerce sau khi hoàn tất quá trình tùy chỉnh bố cục bằng UX Builder trong Flatsome. Toàn bộ thành phần được sắp xếp linh hoạt, trực quan và phù hợp với thiết kế thực tế của cửa hàng trực tuyến.
Để website vận hành ổn định với tốc độ tải trang tốt, bạn nên kết hợp với gói hosting WordPress hiệu năng cao phù hợp với lưu lượng truy cập thực tế. Trường hợp cần hỗ trợ kỹ thuật về hosting hoặc tên miền, bạn có thể gửi yêu cầu trực tiếp qua hệ thống hỗ trợ hosting và tên miền để được xử lý nhanh nhất. Hoặc bạn có thể liên hệ trực tiếp với đội ngũ tư vấn để được hỗ trợ tận tình.
Câu hỏi thường gặp về tùy biến trang sản phẩm Flatsome
UX Builder trong Flatsome là gì và hoạt động như thế nào?
UX Builder là công cụ thiết kế kéo thả tích hợp sẵn trong theme Flatsome, cho phép tùy biến bố cục trang sản phẩm, trang đích và nhiều loại trang khác trực tiếp trên giao diện trực quan mà không cần viết code hay sử dụng plugin bổ sung.
UX Blocks là gì và tại sao cần tạo UX Blocks trước khi tùy chỉnh?
UX Blocks là các khối bố cục tái sử dụng được tạo riêng trong Flatsome. Khi thiết kế một UX Blocks và gán vào Product Layout, bố cục đó sẽ được áp dụng đồng loạt cho tất cả trang sản phẩm trên website mà không cần chỉnh sửa từng sản phẩm một.
Có thể áp dụng bố cục UX Builder khác nhau cho từng sản phẩm riêng biệt không?
Qua Theme Options, Flatsome cho phép gán một UX Blocks làm bố cục mặc định cho tất cả sản phẩm. Nếu muốn bố cục riêng cho một sản phẩm cụ thể, bạn cần vào trang chỉnh sửa sản phẩm đó và tùy chỉnh trực tiếp bằng UX Builder tại đó.
Tùy biến trang sản phẩm bằng UX Builder có làm chậm website không?
Nếu bố cục được thiết kế gọn nhẹ, tránh lạm dụng quá nhiều thành phần thì tốc độ tải trang hầu như không bị ảnh hưởng đáng kể. Kết hợp thêm bộ nhớ cache và hosting chất lượng sẽ giúp duy trì hiệu suất tối ưu cho cửa hàng WooCommerce.
Sau khi cập nhật Flatsome lên phiên bản mới, bố cục tùy chỉnh có bị mất không?
Không. Các bố cục được lưu trong UX Blocks là dữ liệu độc lập với phiên bản theme, vì vậy khi cập nhật Flatsome, toàn bộ thiết kế trang sản phẩm bạn đã tạo vẫn được giữ nguyên.
Tôi gặp lỗi khi chỉnh sửa trang sản phẩm bằng UX Builder, cần liên hệ ở đâu?
Bạn có thể gửi yêu cầu hỗ trợ tại trang hỗ trợ theme hoặc liên hệ trực tiếp để được đội ngũ kỹ thuật tư vấn và xử lý lỗi nhanh chóng.
