Trong WooCommerce, việc đảm bảo tất cả sản phẩm đều có ảnh đại diện (thumbnail) là rất quan trọng để cải thiện trải nghiệm người dùng và tăng tính chuyên nghiệp cho cửa hàng trực tuyến. Tuy nhiên, nếu bạn có hàng trăm hoặc hàng nghìn sản phẩm mà chưa có ảnh đại diện, việc cập nhật thủ công sẽ rất tốn thời gian. May mắn thay, với một đoạn code WordPress đơn giản, bạn có thể tự động cập nhật ảnh đại diện cho các sản phẩm từ gallery hình ảnh. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách sử dụng đoạn code để thực hiện việc này một cách hiệu quả.
1. Tổng quan về đoạn code
Đoạn code được cung cấp giúp bạn thêm một công cụ vào khu vực quản trị WordPress, cho phép cập nhật ảnh đại diện của sản phẩm WooCommerce từ hình ảnh đầu tiên trong gallery sản phẩm. Code này đặc biệt hữu ích khi:
-
Sản phẩm chưa có ảnh đại diện nhưng đã có gallery hình ảnh.
-
Bạn muốn tiết kiệm thời gian thay vì cập nhật thủ công từng sản phẩm.
-
Bạn đang quản lý một cửa hàng WooCommerce với số lượng lớn sản phẩm.
Code này hoạt động bằng cách:
-
Thêm một mục menu trong khu vực quản trị WooCommerce.
-
Cung cấp một nút để kích hoạt quá trình cập nhật.
-
Tự động kiểm tra các sản phẩm chưa có ảnh đại diện và đặt hình ảnh đầu tiên trong gallery làm ảnh đại diện.
2. Các bước triển khai đoạn code
Bước 1: Thêm code vào theme hoặc plugin
Để sử dụng đoạn code, bạn cần thêm nó vào file functions.php của theme đang sử dụng hoặc tạo một plugin tùy chỉnh. Dưới đây là đoạn code đầy đủ:
add_action('admin_menu', function () {
add_submenu_page(
'edit.php?post_type=product',
'Cập nhật ảnh đại diện',
'Cập nhật ảnh đại diện',
'manage_woocommerce',
'cap-nhat-thumbnail-tu-gallery',
'nguyenlan_update_thumbnail_page'
);
});
function nguyenlan_update_thumbnail_page() {
if (isset($_POST['nguyenlan_update_thumb']) && check_admin_referer('nguyenlan_update_thumb_action')) {
$count = nguyenlan_update_thumbnail_from_gallery();
echo '<div class="notice notice-success is-dismissible"><p>Đã cập nhật ảnh đại diện cho ' . $count . ' sản phẩm.</p></div>';
}
echo '<div class="wrap">';
echo '<h1>Cập nhật ảnh đại diện từ gallery</h1>';
echo '<form method="post">';
wp_nonce_field('nguyenlan_update_thumb_action');
submit_button('Cập nhật ngay', 'primary', 'nguyenlan_update_thumb');
echo '</form>';
echo '</div>';
}
function nguyenlan_update_thumbnail_from_gallery() {
$args = array(
'post_type' => 'product',
'posts_per_page' => -1,
'post_status' => 'publish',
'meta_query' => array(
array(
'key' => '_product_image_gallery',
'compare' => 'EXISTS'
)
)
);
$products = get_posts($args);
$count = 0;
foreach ($products as $product) {
$product_id = $product->ID;
if (has_post_thumbnail($product_id)) continue;
$gallery = get_post_meta($product_id, '_product_image_gallery', true);
if (!$gallery) continue;
$gallery_ids = explode(',', $gallery);
$first_image_id = $gallery_ids[0] ?? null;
if ($first_image_id) {
set_post_thumbnail($product_id, $first_image_id);
$count++;
}
}
return $count;
}
Hướng dẫn thêm code:
-
Vào file functions.php: Truy cập thư mục theme của bạn (thường là wp-content/themes/your-theme/functions.php) và dán code vào cuối file.
-
Tạo plugin tùy chỉnh (khuyến nghị): Tạo một file PHP mới (ví dụ: wc-update-thumbnail.php) trong thư mục wp-content/plugins/, thêm tiêu đề plugin và dán code vào. Sau đó, kích hoạt plugin từ khu vực quản trị WordPress.
Bước 2: Kiểm tra menu trong khu vực quản trị
Sau khi thêm code, đăng nhập vào khu vực quản trị WordPress và kiểm tra menu. Bạn sẽ thấy một mục mới có tên “Cập nhật ảnh đại diện” trong menu Sản phẩm của WooCommerce.
Bước 3: Chạy công cụ cập nhật
-
Truy cập Sản phẩm > Cập nhật ảnh đại diện trong khu vực quản trị.
-
Nhấn nút Cập nhật ngay.
-
Sau khi quá trình hoàn tất, bạn sẽ nhận được thông báo số lượng sản phẩm đã được cập nhật ảnh đại diện.
3. Cách hoạt động của đoạn code
Hãy cùng phân tích cách đoạn code hoạt động để bạn hiểu rõ hơn:
-
Thêm menu quản trị: Hàm add_action(‘admin_menu’, …) tạo một mục menu phụ trong khu vực quản trị WooCommerce, chỉ hiển thị cho người dùng có quyền manage_woocommerce (quản trị viên hoặc quản lý cửa hàng).
-
Giao diện nút cập nhật: Hàm nguyenlan_update_thumbnail_page() tạo một trang đơn giản với một nút bấm. Khi nhấn nút, nó kích hoạt quá trình cập nhật và hiển thị thông báo kết quả.
-
Xử lý cập nhật ảnh: Hàm nguyenlan_update_thumbnail_from_gallery():
-
Lấy tất cả sản phẩm WooCommerce đã xuất bản và có gallery hình ảnh.
-
Kiểm tra xem sản phẩm có ảnh đại diện chưa. Nếu đã có, bỏ qua.
-
Lấy ID của hình ảnh đầu tiên trong gallery và đặt nó làm ảnh đại diện.
-
Đếm số sản phẩm được cập nhật và trả về kết quả.
-
4. Lưu ý khi sử dụng
-
Sao lưu dữ liệu: Trước khi chạy công cụ, hãy sao lưu cơ sở dữ liệu để tránh mất dữ liệu trong trường hợp có lỗi.
-
Kiểm tra gallery hình ảnh: Đảm bảo các sản phẩm của bạn đã có gallery hình ảnh. Nếu không, code sẽ bỏ qua các sản phẩm đó.
-
Hiệu suất: Nếu cửa hàng của bạn có hàng nghìn sản phẩm, quá trình cập nhật có thể mất một chút thời gian. Hãy thử nghiệm trên môi trường staging trước khi áp dụng trên website chính thức.
-
Tùy chỉnh thêm: Bạn có thể sửa đổi code để chọn hình ảnh thứ hai hoặc thứ ba trong gallery thay vì hình đầu tiên, bằng cách thay đổi $gallery_ids[0] thành $gallery_ids[1] hoặc giá trị khác.
5. Lợi ích của việc sử dụng công cụ này
-
Tiết kiệm thời gian: Tự động hóa quá trình cập nhật ảnh đại diện thay vì làm thủ công.
-
Cải thiện SEO: Sản phẩm có ảnh đại diện sẽ hiển thị tốt hơn trong kết quả tìm kiếm và tăng tỷ lệ nhấp chuột.
-
Tăng trải nghiệm người dùng: Ảnh đại diện rõ ràng giúp khách hàng dễ dàng nhận diện sản phẩm.
6. Kết luận
Việc cập nhật ảnh đại diện cho sản phẩm WooCommerce từ gallery hình ảnh giờ đây trở nên dễ dàng hơn bao giờ hết với đoạn code này. Chỉ cần vài bước đơn giản, bạn có thể tiết kiệm hàng giờ làm việc thủ công và cải thiện chất lượng cửa hàng trực tuyến của mình. Nếu bạn gặp bất kỳ vấn đề nào khi triển khai, hãy để lại câu hỏi trong phần bình luận hoặc liên hệ với nhà phát triển để được hỗ trợ.
Hãy thử ngay hôm nay và nâng cấp cửa hàng WooCommerce của bạn!
