Chuyển thư viện ảnh dọc trong theme flatsome

Theme WordPress Flatsome Woocommerce, theme wordpress giá trị cả về chất lượng giao diện lẫn hiệu quả khi vận hành.  Độ tùy biến của Flatsome khá cao và dễ thao tác, thay đổi và thêm bớt nhiều tính năng hay. Hôm nay Sieutocviet sẽ hướng dẫn bạn thay thư viện ảnh theo chiều dọc trong theme flatsome.

 

Cách chỉnh sửa chuyển thư viện ảnh dọc trong Flatsome

Gallery không chạy slider và chuột qua hoặc click vào ảnh nhỏ không chính xác như hình dưới

Hướng dẫn kích hoạt chuyển thư viện ảnh dọc trong theme Flatsome

Đầu tiên các bạn vào:

Flatsome -> Theme Options -> Shop (Woocommerce) -> Product Page tiếp sau đó đến mục Gallery

Kích hoạt thư viện ảnh theo chiều dọc trong flatsome

Cách sửa lỗi hiển thị không chính xác trong thư viện ảnh theo chiều dọc của theme flatsome

Cách sửa đơn giản nhất chỉ với 2 cách như sau:

Bước 1: Sửa lại tên class trong theme thư viện chuyển ảnh dọc của flatsome

  • Nếu bạn làm trên theme gốc thì sửa wp-content/themes/flatsome/woocommerce/single-san-pham/file san-pham-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-san-pham/file san-pham-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-san-pham/file san-pham-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 cho thư viện chuyển ảnh dọc trong theme của flatsome

Các bạn vào Flatsome >> Advenced >> Custom CSS

Tại đây các bạn thêm phần code bên dưới

@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;
    }
}

Kết luận:

Chỉ cần làm 2 bước trên các bạn Ctr+F5 và xem thành quả thôi.

 

Xem thêm các bài liên quan:

Tạo menu xổ ngang trong Widget Area

Cách chỉnh sửa menu flatsome trong wordpress của bạn

Tùy biến Custom CSS trong flatsome

Thư viện ảnh dọc trong Flatsome là gì?

Là một thư viện ảnh tại product layout của Woocommerce. Giúp cho khách hàng dễ tiếp cận với sản phẩm của bạn

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

Cách sửa lỗi hiển thị thư viện ảnh theo chiều dọc trong flatsome

Bước 1: Sửa lại tên class Bước 2: Thêm css