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

Cập nhật lần cuối 28/11/2018 by trong Flatsome vào 28/11/2018 có 5502 Views

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:

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)

Để duy trì blog nên mình có làm aff cho 1 số bên hosting. Nhưng dù aff mình cũng chọn 1 số nhà cung cấp uy tín về chất lượng và support nên các bạn cứ yên tâm nhé.

Nếu có mua hosting mà có trong list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều

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

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

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

/*
* 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 ^^

5/5 - (12 votes)
  • Bình luận
Sản phẩm nổi bật của Toản
x