Fix lỗi thư viện ảnh theo chiều dọc trong theme flatsome

admin
11/07/22
0
Views: 270 lượt xem
fix gallery image vertical
[ad_1]
Có thể bạn đang quan tâm

Flatsome là 1 theme tuyệt vời cho website wordpress + woocommerce để làm website bán hàng. Giao diện trực quan, độ tùy biến khá cao và dễ dàng thao tác.

Nội dung chính:

Gần đây tôi đang làm một dự án trên flatsome và buộc phải sử dụng kiểu hiển thị thư viện ảnh trong sản phẩm ở chiều dọc và cực kỳ may mắn là theme đã hỗ trợ. Với 2-3 ảnh thì không sao, nhưng thật không may trường hợp rộng rãi hơn từ  4 ảnh trở lên thì lại lỗi kiểu hiển thị theo chiều dọc. Gallery ko 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 đến thời khắc bây giờ version 3.7.1)

fix gallery image vertical

Lỗi hiển thị thư viện ảnh ở dạng dọc

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

Sau khi sửa lỗi hiển thị ảnh ảnh ở dạng dọc trong flatsome

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

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)

change class name

Mẫu website nổi bật của tô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é

add css

Thêm css

Code css

/*
* Author luutrukienthuc.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

5/5 - (2 bình chọn)
Chào ! Bạn thấy nội dung này thế nào?

Trả lời

Email của bạn sẽ không được hiển thị công khai.