Tạo layout trang chi tiết sản phẩm bằng Block (Custom Layout Theme Flatsome)

Tạo layout trang chi tiết sản phẩm bằng Block (Custom Layout Theme Flatsome)

Tùy chọn layout của Theme Flatsome chúng ta cần đi vào Tùy biến > Woocommerce > Product Page ( hoặc Theme Options → Shop → Product Page ).

Ở khu vực này có nhiều type layout có sẵn: No Sidebar, Left Sidebar blabla…

Nhưng chúng không dễ dàng tùy biến hay thêm 1 thành phần nào đó cho những ai không rành code. Vì thế Custom Layout ra đời.

Cách để tạo 1 Custom Layout trang Product Page

Bước 1: Tạo Block Shortcode

Tạo layout trang chi tiết sản phẩm bằng Block (Custom Layout Theme Flatsome)
Tạo layout trang chi tiết sản phẩm bằng Block (Custom Layout Theme Flatsome)
Tạo Block Shorcode

Ux Blocks > Chèn shortcode vào > Public (Đăng)

Một số shortcode layout tham khảo

Left Sidebar Layout (Full-height)

Right Sidebar Layout (Full-height)

Shortcodes For Wide Gallery Layout

 

Sau khi khởi tạo được Block thì tiếp tục.

Bước 2: Chọn Product Layout Custom

Tùy biến > Woocommerce > Product Page > Chọn Custom.

Sau đó bên dưới là Custom product layout > Chọn Block lúc nảy chúng ta tạo.

Chọn Block Custom Layout
Tạo layout trang chi tiết sản phẩm bằng Block (Custom Layout Theme Flatsome)
Chọn Block Custom Layout

Lưu lại và vào 1 sản phẩm bất kỳ. Bây giờ muốn thêm bớt gì vào Product Page thì chỉ cần Edit Product layout with UX Builder như hình bên dưới!

Config lại layout product page
Tạo layout trang chi tiết sản phẩm bằng Block (Custom Layout Theme Flatsome)
Config lại layout product page
Các hook của woocommerce tại trang chi tiết

Bên cạnh là các hook của woocommerce mà bạn có thể thoải mái di chuyển , thêm , bớt vào vị trí mong muốn

Câu hỏi hay gặp ở đây là Custom Hook flatsome là gì, sử dụng như nào? (eg: flatsome_custom_single_product_1)

Tạo layout trang chi tiết sản phẩm bằng Block (Custom Layout Theme Flatsome)
Product Hook

Nó đây. Tìm element tên Product Hook > Chọn hook custom 1 2 hoặc 3.

Bây giờ làm gì với nó?

Ví dụ đã chọn được hook flatsome_custom_single_product_1 vào vị trí mong muốn rồi.

Chúc mọi người thành công

# KHÁM PHÁ CÁC HASHTAG HÀNG ĐẦU

Theo dõi và cập nhật tin tức AZ9s thông qua các kênh truyền thông:

- Zalo Channel

- Facebook Channel

- Youtube Channel

0 0 votes
Article Rating
Nhận thông báo qua Email
Nhận thông báo cho
guest

0 Comments
Inline Feedbacks
View all comments
0
Hãy để lại bình luận của bạn!x
()
x