Tạo Lightbox Image trong chi tiết sản phẩm woocommerce

Thảo luận trong 'Mã nguồn mở Wordpress' bắt đầu bởi seolagi, 8/4/21.

  1. seolagi

    seolagi

    Moderator

    Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    776
    Đã được thích:
    67
    Điểm thành tích:
    28
    Mặc định ở các themes bán hàng đã có sẵn Lightbox Image trong chi tiết sản phẩm woocommerce, nhưng đối với 1 số themes tin tức và themes không hỗ trợ plugin bán hàng woocommerce khi bạn cài plugin này vào rất dễ bị lỗi slider hình ảnh trong chi tiết sản phẩm không hoạt động được.

    Và chức năng Lightbox Image không hoạt động, khiến bạn ấn vào tấm hình nó sẽ nhảy ra 1 màn hình # rất khó chịu cho người dùng.

    Để cài chức năng Lightbox Image cho Woocommerce và các thư viện ảnh bất kỳ trên web của bạn không riêng gì sản phẩm thì bạn sử dụng plugin WP Lightbox 2 hỗ trợ trên toàn web rất dễ dàng.

    Demo: click vào hình trong slider danh sách sản phẩm sẽ hiển thị Lightbox hình như dưới:

    lightbox-product-woocommerce.jpg

    Cách cài đặt cho trang chi tiết sản phẩm hoạt động được chức năng Lightbox Image:
    • Cài đặt plugin link sau: https://wordpress.org/plugins/wp-lightbox-2/
    • Mở plugin này lên bạn sẽ thấy hướng dẫn sử dụng ở dưới khá chi tiết.
    • Bạn có thể chèn Lightbox img ở bất kỳ bức hình nào chỉ cần truyền thêm thuộc tính rel="lightbox" vào là được.
    lightbox-setting.jpg

    Cài Lightbox Img vào danh sách chi tiết sản phẩm woocommerce như sau:

    • Truy cập đường dẫn: wp-content/plugins/woocommerce/includes/wc-template-functions.php
    • Mở file này lên, thêm rel="lightbox[roadtrip]" vào hàm wc_get_gallery_image_html( $attachment_id, $main_image = false ) như hình dưới, lưu tải lên lại là xong.
    chen-rel-lightbox-roadtrip.jpg
    Ra ngoài xem kết quả nhé.
     
    Cảm ơn đã xem bài:

    Tạo Lightbox Image trong chi tiết sản phẩm woocommerce

    Last edited by a moderator: 8/4/21


Like và Share ủng hộ ITSEOVN