Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách tích hợp các tính năng zoom và slider cho gallery sản phẩm WooCommerce, đồng thời thay thế lightbox mặc định bằng LightGallery. Đây là những bước cần thiết để cải thiện trải nghiệm người dùng và nâng cao chất lượng hiển thị sản phẩm trên website của bạn.
1. Thêm Hỗ Trợ Cho Zoom và Slider Trong WooCommerce
WooCommerce cung cấp sẵn các tính năng như zoom, slider và lightbox cho gallery sản phẩm. Để kích hoạt các tính năng này, bạn cần thêm chúng vào file functions.php của theme:
// Kích hoạt tính năng zoom và slider cho gallery sản phẩm WooCommerce
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-slider' );
2. Loại Bỏ Lightbox Mặc Định Nếu Đã Kích Hoạt
Nếu theme của bạn đã kích hoạt sẵn tính năng lightbox nhưng bạn muốn thay thế nó bằng một thư viện khác như LightGallery, hãy sử dụng đoạn mã sau:
add_action( 'after_setup_theme', 'ca_woocommerce_single_product_gallery_support' );
function ca_woocommerce_single_product_gallery_support() {
if ( current_theme_supports( 'wc-product-gallery-lightbox' ) ) {
remove_theme_support( 'wc-product-gallery-lightbox' );
}
}
3. Thêm Class Tùy Biến Cho Sản Phẩm
Để dễ dàng quản lý giao diện CSS cho các sản phẩm có hỗ trợ zoom và slider, bạn có thể thêm class tùy chỉnh dựa trên các tính năng đã kích hoạt:
add_filter( 'post_class', 'ca_add_product_classes_based_on_theme_support' );
function ca_add_product_classes_based_on_theme_support( $classes ) {
if( ! is_product() ) return $classes;
if ( current_theme_supports( 'wc-product-gallery-zoom' ) ) {
$classes[] = 'product-has-zoom';
}
if ( current_theme_supports( 'wc-product-gallery-slider' ) ) {
$classes[] = 'product-has-gallery-slider';
}
return $classes;
}
4. Tích Hợp LightGallery Để Thay Thế Photoswipe Mặc Định
LightGallery là một thư viện JS mạnh mẽ và nhẹ nhàng, giúp tăng cường trải nghiệm duyệt hình ảnh cho người dùng. Để thay thế Photoswipe bằng LightGallery, bạn thực hiện như sau:
add_action( 'wp_enqueue_scripts', 'ca_replace_photoswipe_with_lightgallery_lightbox_js', 99 );
function ca_replace_photoswipe_with_lightgallery_lightbox_js() {
if( ! is_product() ) return;
// Đăng ký CSS của LightGallery
wp_enqueue_style(
'lightgallery',
'https://cdn.jsdelivr.net/npm/lightgallery.js@1.4.0/dist/css/lightgallery.css',
[],
'1.6.11'
);
// Đăng ký JS của LightGallery
wp_enqueue_script(
'lightgallery',
'https://cdn.jsdelivr.net/npm/lightgallery.js@1.4.0/lib/js/lightgallery.min.js',
['jquery'],
'1.6.11'
);
// Khởi tạo LightGallery cho WooCommerce
wp_add_inline_script( 'lightgallery',
"jQuery('.woocommerce-product-gallery__wrapper').each(function(i, obj) {
lightGallery(document.getElementById(jQuery(this).prop('id')), {
plugins: [lgZoom, lgThumbnail],
selector: 'a',
});
});"
);
}
5. Tối Ưu SEO Cho Tính Năng Mới
Để tối ưu SEO khi thêm các tính năng này:
- Giảm thiểu tài nguyên tải: Chỉ tải các thư viện LightGallery khi người dùng truy cập trang sản phẩm.
- Tăng trải nghiệm người dùng: Tính năng zoom và slider giúp khách hàng dễ dàng xem chi tiết sản phẩm, qua đó tăng thời gian ở lại trang, một yếu tố có lợi cho SEO.
Kết Luận
Việc tùy chỉnh và cải thiện giao diện gallery sản phẩm WooCommerce không chỉ giúp website của bạn thân thiện hơn với người dùng mà còn hỗ trợ quá trình tối ưu SEO. Hãy áp dụng những thủ thuật này để tối đa hóa hiệu quả hiển thị sản phẩm!