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

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:



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.

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.

Ra ngoài xem kết quả nhé.