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

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 có 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)

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)

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

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é

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