Flatsome là một giao diện được nhiều người trong cộng đồng WordPress yêu thích và sử dụng rộng rãi nhờ vào các tính năng vượt trội của công cụ thiết kế kéo thả (UX Builder), giúp việc điều chỉnh trở nên thuận tiện và dễ dàng. Với công cụ này, người dùng có thể tùy chỉnh trang sản phẩm WooCommerce theo ý thích một cách đơn giản. Bài viết này sẽ hướng dẫn các bạn từng bước để thiết kế một trang sản phẩm WooCommerce bằng cách sử dụng UX Builder trong giao diện Flatsome.
Hướng dẫn tùy biến giao diện trang sản phẩm Flatsome bằng UX Builder
Trong quá trình tùy chỉnh giao diện sản phẩm, bạn sẽ thấy có rất nhiều cách để hiển thị trang sản phẩm. Bài viết này sẽ chỉ cho bạn cách tùy biến trang sản phẩm theo ý muốn của mình.
Bước 1: Đầu tiên, hãy tạo một UX Blocks mới. Để thực hiện điều này, bạn truy cập vào Admin Dashboard (trang quản trị admin), di chuyển chuột đến mục UX Blocks và nhấn vào Thêm trang mới.
Bước 2: Tiếp theo, đặt tên cho tiêu đề là “Custom-products-page” và sau đó nhấp vào nút Đăng.
Bước 3: Sau khi tạo xong UX Blocks, chúng ta cần tích hợp nó vào trang sản phẩm. Trên Bảng điều khiển, hãy di chuyển chuột tới Flatsome, sau đó chọn Themes Option, rồi tiếp tục sang WooCommerce và nhấp vào Product Page.
Bước 4: Một trang cài đặt bố cục mới sẽ hiện ra. Ở phía bên trái, tìm mục Product Layout và chọn biểu tượng Custom để thêm các cài đặt tùy chỉnh.
Bước 5: Tiếp đến, kích hoạt các khối vừa tạo từ Product Layout. Hãy chọn khối bạn vừa tạo tại Custom Product Layout. Sau khi chọn UX Blocks vừa tạo, nhấn nút Đăng để lưu cài đặt trong chủ đề Flatsome.
Bước 7: Bây giờ, hãy bắt đầu tùy chỉnh Custom Product Layout. Đầu tiên, điều hướng đến một trang sản phẩm hiện có. Hãy chọn một sản phẩm đã thiết lập hoàn chỉnh (như đã có hình ảnh, mô tả ngắn, v.v.) để dễ dàng hình dung phần trang bạn tạo.
Đi tới trang sản phẩm mà bạn muốn làm việc.
Lúc này, trang sản phẩm sẽ trống vì UX Blocks vừa tạo chưa có nội dung. Bạn sẽ thấy phần Sửa sản phẩm ở trên cùng. Nhấp chuột vào đó, sau đó chọn Edit product layout with UX Builder.
Bước 8: Sau khi vào khu vực Edit with UX Builder, nhấn chọn Add Element để đến khu vực chứa các thành phần dùng để tùy chỉnh trang sản phẩm.
Tại thanh bên này, bạn có thể chọn những thành phần và bố cục riêng cho trang sản phẩm theo ý muốn của mình.
Hướng dẫn tùy biến giao diện trang sản phẩm Flatsome bằng UX Builder
Tại mục Product Page, bạn có thể chèn các thành phần thông tin cần thiết cho sản phẩm vào trang chi tiết của sản phẩm.
Nếu bạn chưa quen với việc sử dụng Flatsome, hãy tìm hiểu thêm qua hướng dẫn chi tiết về giao diện Flatsome.
Bước 9: Nhấp vào nút Update để kích hoạt các thiết lập mới.
Kết quả
Kết Luận
Trong bài viết này, chúng tôi đã trình bày cách điều chỉnh trang sản phẩm WooCommerce bằng công cụ UX Builder của Flatsome một cách dễ dàng. Hy vọng các bạn sẽ tiếp tục ủng hộ và đóng góp ý kiến để chúng tôi có thể hoàn thiện nội dung tốt hơn. Cảm ơn các bạn đã quan tâm và theo dõi bài viết. Chúc các bạn thành công!
