Bài viết này thực hiện (hoặc lụm bài về đăng câu like từ các trang khác) bởi Việt Lâm Coder một YOUTUBER có tâm và đẹp trai siêu cấp vô địch zũ trụ.
Mục lục
Flatsome là 1 theme khá hay cho website wordpress + woocommerce để làm website bán hàng. Độ tùy biến khá cao và dễ thao tác.
Nội dung chính:
- Cách kích hoạt thư viện ảnh theo chiều ngang
- Các sửa lỗi hiển thị thư viện ảnh theo chiều ngang
- Demo online
Gần đây tôi có làm 1 dự án trên flatsome và cần sử dụng kiểu hiển thị thư viện ảnh trong sản phẩm ở chiều dọc và rất may mắn là theme đã hỗ trợ. Với 2-3 ảnh thì không sao, nhưng thật không may nếu nhiều hơn từ 4 ảnh trở lên thì lại lỗi với kiểu hiển thị theo chiều dọc. Gallery không chạy slider và bị nhảy tung tóe khi dê chuột qua hoặc click vào ảnh nhỏ (như hình – theme mặc định tính tới thời điểm hiện tại version 3.7.1)
Lỗi hiển thị thư viện ảnh ở dạng dọc – Ảnh levantoan.com
Sau 1 ngày tìm hiểu tôi đã tìm ra cách sửa lỗi hiển thị thư viện ảnh theo chiều dọc trong theme flatsome. Và đây và kết quả sau khi sửa (ảnh bên dưới)
Sau khi sửa lỗi hiển thị ảnh ảnh ở dạng dọc trong flatsome – Ảnh levantoan.com
Cách kích hoạt thư viện hình ảnh theo chiều dọc
Bạn vào Flatsome -> Theme Options -> Shop (Woocommerce) -> Product Page tiếp sau đó đến mục Gallery và chọn như hình dưới
Kích hoạt thư viện ảnh theo chiều dọc trong flatsome
Cách sửa lỗi hiển thị thư viện ảnh theo chiều dọc trong flatsome
Vậy làm thế nào để có thể sửa lỗi trên trong thời gian chờ theme update?
Rất đơn giản bạn chỉ cần làm theo 2 bước sau đây nhé
Bước 1: Sửa lại tên class
- Nếu bạn làm trên theme gốc thì sửa wp-content/themes/flatsome/woocommerce/single-product/file product-image-vertical.php cụ thể sẽ đổi tên class “vertical-thumbnails” tại dòng 116 thành “devvn-vertical-thumbnails” (như hình dưới)
- Nếu bạn dùng child theme thì copy file wp-content/themes/flatsome/woocommerce/single-product/file product-image-vertical.php từ theme gốc sang folder child theme theo đường dẫn sau wp-content/themes/{tên child theme của bạn}/woocommerce/single-product/file product-image-vertical.php và cũng sửa đổi tên class “vertical-thumbnails” tại dòng 116 thành “devvn-vertical-thumbnails” (như hình dưới)
Bước 2: Thêm css
Tại bước này bạn chỉ cần thêm đoạn css sau vào Custom CSS trong Advanced Options là xong nhé
Thêm css – Ảnh levantoan.com
Code css
|
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
|
/** Author levantoan.com*/@media screen and (min-width: 850px){ .devvn-vertical-thumbnails .product-thumbnails.thumbnails { width: 480px; -webkit-transform: rotate(90deg) translate(0, -100%); transform: rotate(90deg) translate(0, -100%); -webkit-transform-origin: left top; transform-origin: left top; } .devvn-vertical-thumbnails .product-thumbnails.thumbnails .col { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); padding: 0; max-width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; width: 80px; } .devvn-vertical-thumbnails .product-thumbnails.thumbnails .flickity-prev-next-button.previous { opacity: 1; left: -25px; transform: translateX(0); top: 20px; -ms-transform: translateX(0); } .devvn-vertical-thumbnails .product-thumbnails.thumbnails .flickity-prev-next-button.next { opacity: 1; right: -25px; transform: translateX(0); top: 20px; -ms-transform: translateX(0); } .devvn-vertical-thumbnails .product-thumbnails a:hover img, .devvn-vertical-thumbnails .product-thumbnails a:hover, .devvn-vertical-thumbnails .product-thumbnails .is-nav-selected a img, .devvn-vertical-thumbnails .product-thumbnails .is-nav-selected a { border-color: transparent !important; border: 0 !important; } .devvn-vertical-thumbnails .product-thumbnails.thumbnails .flickity-viewport { height: 75px !important; }} |
Sau khi hoàn thành 2 bước trên thì bây giờ bạn chỉ cần reload lại website và xem kết quả thôi 🙂
Chúc các bạn thành công ^^
Bài viết này thực hiện (hoặc lụm bài về đăng câu like từ các trang khác) bởi Việt Lâm Coder một YOUTUBER có tâm và đẹp trai siêu cấp vô địch zũ trụ.
