Cách tùy chỉnh trang sản phẩm WooCommerce bằng UX Builder theo theme Flatsome


Tùy chỉnh trang sản phẩm là một tính năng tuyệt vời của UX Builder. Hướng dẫn này sẽ chỉ dẫn cách bạn có thể tùy chỉnh trang sản phẩm WooCommerce bằng Trình tạo UX


Cách tùy chỉnh trang sản phẩm WooCommerce bằng UX Builder theo theme Flatsome

Một cửa hàng trực tuyến phức tạp hơn một trang web thông thường. Đó là lý do tại sao bạn cần sử dụng trình tạo UX để tùy chỉnh. Nó giúp thiết kế cửa hàng WooCommerce của bạn với giao diện trực quan, kéo và thả. Shop online của bạn phải hiện đại và đẹp mắt nhưng tính năng quan trọng nhất là trải nghiệm người dùng (UX).

Trình tạo UX của Flatsome là công cụ tối ưu để tạo các trang web đáp ứng tuyệt vời mà không cần có bất kỳ kinh nghiệm viết mã nào. Hơn nữa, nó cho phép bạn tạo cửa hàng trực tuyến đẹp mắt mà không cần viết một dòng mã nào.

Bây giờ, hãy bắt đầu nhé. Để giúp bạn dễ dàng hơn, chúng tôi đã tạo một video hướng dẫn về cách tùy chỉnh trang sản phẩm WooCommerce bằng UX Builder.

 

 

Làm theo hướng dẫn từng bước, sau đó bạn có thể tiếp tục đọc văn bản chỉ dẫn bên dưới…

Trước khi chuyển đến tùy chỉnh trang sản phẩm, hãy chọn trang bố cục sản phẩm mà chúng tôi sẽ tùy chỉnh trong hướng dẫn này.

 

Lựa chọn Menu Classic Shop

 

Với mục đích thể hiện kết quả, tôi đang chọn Classic Shop cho các bản demo cửa hàng của Chủ đề Flatsome. Tuy nhiên, bạn có thể chọn các bản trình diễn cửa hàng mong muốn của mình từ danh sách.

 


 

Trong tùy biến sản phẩm, tôi đã gọi bố cục này là 'Sidebar'.

Cách thức sử dụng UX Page Builder

 

Nếu bạn muốn tùy chỉnh trang sản phẩm này mà không cần xây dựng các phần tử trang theo cách thủ công trong UX Builder, bạn phải xem tài liệu chính thức của Flatsome. Sau đó, bạn phải tìm kiếm các mã ngắn (shortcodes) cho Bố cục Trang Sản phẩm Tùy chỉnh.

 

Sử dụng ShortCoder trong UX Page Builder

Trên trang này, bạn sẽ nhận được danh sách các mã ngắn cho tất cả các bố cục trang sản phẩm có sẵn. Bạn có thể chọn các mã ngắn mong muốn và bắt đầu tùy chỉnh trong UX Builder.

Đây là liên kết của các mã ngắn cho bố cục sản phẩm tùy chỉnh -

https://docs.uxthemes.com/article/247-custom-product-page-layout-shortcodes

Shortcode tạo trang sản phẩm trong UX Page Builder của Flatsome Theme

 

Vì tôi sẽ tùy chỉnh bố cục thanh bên trái có chiều cao đầy đủ, bây giờ là lúc để sao chép mã cho bố cục. Xin lưu ý rằng ở đây tôi đang hiển thị hình ảnh cho các mã ngắn. Nhưng bạn có thể dễ dàng sao chép nó từ bố cục.

Copy shortcodes trong Flatsome-Theme

Bây giờ hãy tạo một khối mới với tiêu đề. Để tạo, chọnThêm mới trong Khối người dùng từ bảng điều khiển của bạn.

Khối có thể được đặt tên bất kỳ thứ gì nhưng tôi sẽ đặt tên tiêu đề là ‘Bố cục thanh bên trái có chiều cao đầy đủ’. Sau đó, tôi đã dán mã ngắn bên trong trình chỉnh sửa khối mà tôi đã sao chép và nhấp vào nút Xuất bản.

Tạo dựng trang sản phẩm với UX Page Builder

 

Bạn chỉ còn một bước nữa là có thể tùy chỉnh bố cục trang sản phẩm. Đã đến lúc điều hướng đến tùy chọn chủ đề trang sản phẩm và chọn biểu tượng Bố cục tùy chỉnh.

 

Xây dựng bố cục trang sản phẩm trong Flatsome Theme với UX Page Builder

 

Sau đó, bạn sẽ phải bật các khối mới được tạo của mình từ menu thả xuống Bố cục Sản phẩm Tùy chỉnh.

Bây giờ hãy chọn khối bạn vừa tạo cho mục đích của bố cục trang tùy chỉnh. Theo thuật ngữ của tôi, bố cục thanh bên trái có chiều cao đầy đủ. Sau khi lựa chọn blog của bạn hoàn tất, hãy nhấp vào nút Xuất bản để lưu cài đặt.

Sự dụng Publish để xuất bản với UX Page Builder

 

Bây giờ là lúc bắt đầu tùy chỉnh bố cục trang sản phẩm. Đầu tiên, bạn sẽ điều hướng đến trang sản phẩm hiện có từ giao diện người dùng mà bạn đã đặt trước đó.

Xin lưu ý rằng bạn nên chọn một sản phẩm mà bạn đã thiết lập hoàn chỉnh (như một số hình ảnh, mô tả ngắn, v.v.). Bằng cách đó, bạn sẽ dễ dàng hình dung phần trang mà mình sẽ tạo.

Bạn có thể nhận thấy một tùy chọn có tên là ‘UX Builder’ được hiển thị rõ ràng. Nhấn nút đó.

Xuất bản trang với UX Page Builder

 

Sau khi mở Trình tạo người dùng, bạn có thể nhận thấy các phần tử Trang sản phẩm có sẵn trong bảng điều khiển bên trái của phần ‘Trang sản phẩm’. Về cơ bản, đây là khối mà tôi đã tạo tại các mã ngắn bố cục từ hướng dẫn.

 

UX Page Builder

 

Mặt khác, bạn cũng có thể sắp xếp lại các phần tử từ bản xem trước của trình tạo và thêm các phần tử mới từ trang sản phẩm của trình tạo. Trong ví dụ này, tôi đã sắp xếp lại phần ‘Tab sản phẩm’ với ‘Sản phẩm có liên quan’ chỉ bằng tùy chọn kéo và thả.

 

Kéo và thả

 

 

TÓM LẠI

Flatsome đi kèm với chức năng kéo và thả và các mô-đun sẵn sàng hoạt động. Nó sẽ giúp bạn tùy chỉnh trang sản phẩm WooCommerce của mình. Bạn có thể sử dụng các cấu trúc trang khác nhau cho các danh mục sản phẩm khác nhau.

Hơn nữa, nó để lại các mã ngắn gọn gàng và dễ đọc trong trình soạn thảo nội dung.