Trang chủ Flatsome 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 Block trống
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)

[row]

[col span="3" span__sm="12"]

[ux_sidebar id="product-sidebar"]


[/col]
[col span="9" span__sm="12"]

[row_inner]

[col_inner span="6" span__sm="12"]

[ux_product_gallery]


[/col_inner]
[col_inner span="6" span__sm="12"]

[ux_product_breadcrumbs]

[ux_product_title]

[ux_product_rating]

[ux_product_price]

[ux_product_excerpt]

[ux_product_add_to_cart]

[ux_product_meta]

[share]


[/col_inner]

[/row_inner]
[ux_product_tabs]

[ux_product_upsell style="grid"]

[ux_product_related]


[/col]

[/row]

Right Sidebar Layout (Full-height)

[row]

[col span="9" span__sm="12"]

[row_inner]

[col_inner span="6" span__sm="12"]

[ux_product_gallery]


[/col_inner]
[col_inner span="6" span__sm="12"]

[ux_product_breadcrumbs]

[ux_product_title]

[ux_product_rating]

[ux_product_price]

[ux_product_excerpt]

[ux_product_add_to_cart]

[ux_product_meta]

[share]


[/col_inner]

[/row_inner]
[ux_product_tabs]

[ux_product_upsell style="grid"]

[ux_product_related]


[/col]
[col span="3" span__sm="12"]

[ux_sidebar id="product-sidebar"]


[/col]

[/row]

Shortcodes For Wide Gallery Layout

[ux_product_gallery style="full-width"]

[row]

[col span="7" span__sm="12"]

[ux_product_breadcrumbs]

[ux_product_title]

[ux_product_excerpt]

[share]


[/col]
[col span="5" span__sm="12" padding="30px 30px 30px 30px" bg_color="rgba(233, 228, 228, 0.67)"]

[ux_product_price]

[ux_product_add_to_cart]

[ux_product_meta]


[/col]

[/row]
[row]

[col span__sm="12"]

[ux_product_tabs]

[ux_product_upsell style="grid"]

[ux_product_related]


[/col]

[/row]

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
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
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)

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.

add_action( 'flatsome_custom_single_product_1', function () {
	echo 'Hello World';
} );

Thật đơn giản đúng không?

Một số ứng dụng có thể tham khảo Share Code

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

Tham gia nhóm Hỏi Đáp Flatsome – WordPress – VPS để hỏi đáp các thắc mắc của bạn nha!

1/5 - (1 bình chọn)