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

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

Một số shortcode layout tham khảo

Left Sidebar Layout (Full-height)

 

	

				

			
			
 

 
 
		
					

	

	

				

			
			
 

 

	

				

			
			
 
[ux_product_gallery]
 
 
		
					

	

	

				

			
			
 
[ux_product_breadcrumbs]
 
[ux_product_title]
 
[ux_product_rating]
 
[ux_product_price]
 
[ux_product_excerpt]
 
[ux_product_add_to_cart]
 
[ux_product_meta]
 

 
 
		
					

	
 

[ux_product_tabs]
 
[ux_product_upsell style="grid"]
 
[ux_product_related]
 
 
		
					

	
 

 

	

				

			
			
 

 

	

				

			
			
 
[ux_product_gallery]
 
 
		
					

	

	

				

			
			
 
[ux_product_breadcrumbs]
 
[ux_product_title]
 
[ux_product_rating]
 
[ux_product_price]
 
[ux_product_excerpt]
 
[ux_product_add_to_cart]
 
[ux_product_meta]
 

 
 
		
					

	
 

[ux_product_tabs]
 
[ux_product_upsell style="grid"]
 
[ux_product_related]
 
 
		
					

	

	

				

			
			
 

 
 
		
					

	
 

[ux_product_gallery style="full-width"]
 

 

	

				

			
			
 
[ux_product_breadcrumbs]
 
[ux_product_title]
 
[ux_product_excerpt]
 

 
 
		
					

	

	

				

			
			
 
[ux_product_price]
 
[ux_product_add_to_cart]
 
[ux_product_meta]
 
 
		

	
 


 

	

				

			
			
 
[ux_product_tabs]
 
[ux_product_upsell style="grid"]
 
[ux_product_related]
 
 
		
					

	
 

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.

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!

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)

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';
} );

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