Flatsome là một trong những chủ đề WooCommerce tốt nhất trên thị trường không thể phủ nhận. Chủ đề WordPress phổ biến này có nhiều mẫu được định nghĩa sẵn cho cửa hàng, sản phẩm và các trang nội bộ. Tuy nhiên, bạn có thể muốn tạo một trang sản phẩm tùy chỉnh Flatsome để có thể thiết kế bất kỳ bố cục nào bạn cần.
Do đó, chúng tôi đã lên kế hoạch chuẩn bị một hướng dẫn chi tiết để tạo trang sản phẩm tùy chỉnh Flatsome. Hướng dẫn này sẽ giúp bạn thiết kế các trang sản phẩm WooCommerce đẹp mắt một cách dễ dàng.
Tạo Trang Sản Phẩm Tùy Chỉnh Flatsome Toàn Cầu
Có nhiều cách để tùy chỉnh trang sản phẩm Flatsome. Hướng dẫn sẽ chỉ cách tạo một trang sản phẩm tùy chỉnh Flatsome một cách toàn cầu. Điều đó có nghĩa là bạn tạo một bố cục trang sản phẩm tùy chỉnh một lần và áp dụng thiết kế cho toàn bộ các trang sản phẩm WooCommerce ngay lập tức. Vậy, hãy bắt đầu.
Bước 1:
Để tùy chỉnh trang sản phẩm Flatsome một cách toàn cầu, điều hướng đến UX Blocks >> Thêm Mới. Tạo một khối cho bố cục sản phẩm tùy chỉnh Flatsome. Đặt tên cho khối với tiêu đề mong muốn của bạn và nhấn ‘Xuất bản.’ Chúng tôi đã đặt tên khối của mình là “Bố Cục Sản Phẩm Tùy Chỉnh Toàn Cầu“.
Bước 2:
Trong bảng điều khiển, di chuột qua ‘Flatsome’ và từ đó đến ‘Tùy Chọn Chủ Đề, đến phần WooCommerce >> Trang Sản Phẩm.
Bước 3:
Bạn sẽ được đưa đến trang tùy chỉnh sản phẩm. Nhấn vào biểu tượng ‘Tùy Chỉnh’ trong tùy chọn ‘Bố Cục Sản Phẩm’. Chọn ‘Bố Cục Sản Phẩm Tùy Chỉnh Toàn Cầu’ từ danh sách bố cục sản phẩm tùy chỉnh. Xuất bản cài đặt để lưu các thay đổi.
Bước 4:
Khối hiện tại cho trang sản phẩm tùy chỉnh Flatsome đang trống. Chúng tôi chưa có bố cục nào được thêm vào, phải không? Nếu bạn truy cập bất kỳ trang sản phẩm WooCommerce nào, chúng sẽ trống không. Nó yêu cầu mở trình xây dựng Flatsome để thêm bố cục trang sản phẩm mới. Để tạo bố cục trang sản phẩm mong muốn với UX Builder, di chuột qua ‘Chỉnh Sửa Sản Phẩm’ trên thanh công cụ quản trị viên trên cùng và nhấn vào ‘Chỉnh sửa bố cục sản phẩm với UX builder.’
Bước 5:
Trang bố cục tùy chỉnh của bạn sẽ được mở trong UX Builder. Nhấn vào nút ‘Thêm Phần Tử’ ở bảng bên trái trong UX Builder. Bây giờ bạn có thể sử dụng toàn bộ các phần tử của UX Builder theo ý muốn trong khi UX Builder đang được mở. Kiểm tra hướng dẫn sử dụng UX Builder của Flatsome để tùy chỉnh bố cục trang sản phẩm. Thậm chí bạn còn có thể nhập bố cục trang sản phẩm tùy chỉnh Flatsome mong muốn từ Flatsome studio.
Bước 7:
Nếu bạn không muốn xây dựng một trang WooCommerce tùy chỉnh với UX Builder. Bạn có thể sử dụng mã ngắn trang sản phẩm tùy chỉnh Flatsome để thiết kế bố cục một cách nhanh chóng. Tôi sẽ tùy chỉnh bố cục sản phẩm Bên Trái. Kiểm tra xem trước trang sản phẩm WooCommerce. Chúng tôi đã thêm các mã ngắn vào trang cho sự tiện lợi của bạn.
Bước 8:
Bạn có các mã ngắn cho bố cục sản phẩm bên trái. Bây giờ, thêm các mã ngắn này vào khối Bố Cục Sản Phẩm Tùy Chỉnh Toàn Cầu trống mà chúng tôi đã tạo trong bước đầu tiên và nhấn nút Cập Nhật.
Bước 9:
Bước vào bất kỳ trang sản phẩm cửa hàng WooCommerce tùy chỉnh nào của bạn, và bạn có thể nhận thấy các trang không còn trống nữa. Trang trống đã được điền bằng bố cục Bên Trái. Nhấn nút “Chỉnh Sửa Bố Cục Với UX Builder” để tùy chỉnh bố cục trang. Nó sẽ mở trang trong UX Builder. Bước 2:
Từ bảng điều khiển WordPress, đi đến Sản phẩm>Danh mục. Từ danh sách danh mục, chọn danh mục cụ thể mà bạn muốn tạo mẫu tùy chỉnh. Mở danh mục trong trình soạn thảo.
Bước 3:
Cuộn xuống và nhấp vào hộp lựa chọn cho Bố cục Sản phẩm Tùy chỉnh. Chọn ‘Trang Sản Phẩm Tùy Chỉnh-Danh Mục’ từ danh sách và nhấp ‘Cập nhật’ để lưu cài đặt.
Bước 4:
Bây giờ mở bất kỳ sản phẩm nào trong chế độ ‘Xem’ thuộc danh mục ưa thích của chúng ta. Di chuột qua ‘Chỉnh sửa Sản phẩm’ trên thanh quản trị phía trên và nhấp ‘Chỉnh sửa Bố cục Sản phẩm với UX Builder.’ Sản phẩm của bạn sẽ được mở trong UX Builder, và bạn có thể tùy chỉnh và phát triển một trang sản phẩm tùy chỉnh cho danh mục cụ thể.
Kết quả cuối cùng
Kết luận
Trong hướng dẫn này, chúng tôi đã cố gắng chỉ cho bạn cách tạo và sử dụng một trang sản phẩm tùy chỉnh theo sở thích của bạn. Quy trình này cho phép bạn tạo bất kỳ thiết kế nào bạn muốn cho bố cục sản phẩm tùy chỉnh của mình. Bạn cũng có thể dễ dàng tạo một trang web một trang miễn phí với giao diện Flatsome.
Hy vọng hướng dẫn này giúp bạn đáp ứng nhu cầu cụ thể của mình. Hãy theo dõi WPCred để nhận thêm các hướng dẫn hữu ích như thế này! Đừng ngần ngại xem bài viết của chúng tôi về so sánh plugin SEO Yoast với Rank Math để hiểu rõ hơn về các plugin SEO phổ biến.
