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)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
|
Right Sidebar Layout (Full-height)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
|
Shortcodes For Wide Gallery Layout
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
|
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.
|
1
2
3
|
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
