Chuyển thư viện ảnh theo chiều ngang thành dọc trong theme flatsome

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ỏ

để sửa lỗi hiển thị thư viện ảnh theo chiều dọc trong theme flatsome. thì bạn sẽ thực hiện theo hướng dẫn ở dưới:

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é

@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ả