Kích thước ảnh sản phẩm WooCommerce: ba kích thước và cách đổi chúng thật sự

WooCommerce sinh ra ba kích thước ảnh cho mỗi ảnh sản phẩm bạn up lên, và chỉ hai trong số đó sửa được trong admin của WordPress. woocommerce_thumbnail là ảnh trong lưới danh mục, woocommerce_single là ảnh lớn trên trang sản phẩm, còn woocommerce_gallery_thumbnail là dải thumbnail nhỏ nằm bên dưới. Bạn đổi chúng ở Appearance > Customize > WooCommerce > Product Images — và nếu bảng đó chỉ hiện ô chọn cách crop mà không có ô chiều rộng nào, thì theme của bạn đã khoá cứng chiều rộng trong code một cách có chủ ý.

Ba kích thước

Tên kích thước	Xuất hiện ở đâu	Cách crop	Sửa được trong Customizer
woocommerce_thumbnail	Trang cửa hàng, lưới danh mục, sản phẩm liên quan, bán chéo	Mặc định crop cứng thành hình vuông	Chiều rộng và tỉ lệ
woocommerce_single	Ảnh chính trên trang sản phẩm đơn	Không crop — giữ nguyên tỉ lệ gốc	Chỉ chiều rộng
woocommerce_gallery_thumbnail	Dải nhỏ dưới ảnh sản phẩm chính	Crop cứng hình vuông	Không

Những kích thước này nằm chồng lên các kích thước chuẩn của WordPress. Một ảnh sản phẩm thường sẽ sinh ra thumbnail, medium, medium_large, large, ba kích thước của WooCommerce, và có thể thêm vài kích thước mà theme của bạn đăng ký qua add_image_size. Đó là rất nhiều file cho mỗi lần up, và đó là lý do nhập 300 sản phẩm mất lâu đến vậy.

Thumbnail của thư viện ảnh mới là thứ khiến người ta bất ngờ: nó không có ô điều khiển nào trong admin cả. Trên bản cài đặt mặc định, nó là một hình vuông nhỏ, trước nay là 100px, và nó là kích thước dễ trông mờ nhất trên màn hình retina vì file thật sự rất bé.

Các thiết lập thực ra nằm ở đâu

Appearance > Customize > WooCommerce > Product Images cho bạn ba ô điều khiển:

• Chiều rộng ảnh chính — chiều rộng của woocommerce_single. Chiều cao tự động, nên tỉ lệ gốc được giữ nguyên.
• Chiều rộng thumbnail — chiều rộng của woocommerce_thumbnail.
• Cách crop thumbnail — 1:1 (vuông, mặc định), Custom (bạn tự gõ tỉ lệ như 4:3), hoặc Uncropped (không crop).

Hãy để ý cái đang thiếu: không có ô chiều cao cho thumbnail của danh mục, vì chiều cao được suy ra từ tỉ lệ crop. Và không có gì cho thumbnail của thư viện ảnh cả.

Trước khi đổi bất cứ thứ gì, sẽ hữu ích nếu bạn thấy chính xác một file sẽ sinh ra những bản dẫn xuất nào — thả một ảnh sản phẩm thật vào công cụ kích thước ảnh WordPress và bạn có danh sách đầy đủ, gồm cả việc ảnh nguồn của bạn có đủ lớn để lấp đầy từng kích thước mà không cần phóng to hay không.

Vì sao ảnh danh mục của bạn trông sai

Thumbnail của danh mục crop cứng thành hình vuông. Crop cứng nghĩa là WooCommerce lấy một ô vuông ở giữa ảnh của bạn và vứt phần còn lại đi — nó không chừa viền đen, cũng không bóp méo. Một ảnh sản phẩm 2000x1200 sẽ thành một lát 1200x1200 cắt từ giữa, rồi mới thu nhỏ.

Điều đó ổn với một chai lọ chụp chính giữa và có lề quanh nó. Nhưng là thảm hoạ với:

• Sản phẩm dài (ván trượt, dây cáp, thanh treo rèm) — bạn chỉ thấy một phần ba ở giữa và không gì khác
• Bố cục lệch tâm — sản phẩm trôi ra mép khung và bị cắt
• Ảnh mà món hàng lấp đầy khung từ mép này sang mép kia — phần trên và dưới bị cắt mất
• Ảnh lifestyle với sản phẩm nằm ở một góc

Lời khuyên thường gặp là “chuyển cách crop sang Uncropped”. Cách đó có tác dụng, nhưng hãy sòng phẳng về cái giá: không crop nghĩa là mỗi thumbnail giữ tỉ lệ riêng của nó, nên một lưới trộn ảnh dọc và ngang sẽ trông lởm chởm, và các hàng không còn thẳng nhau trừ khi CSS của theme xử lý được chiều cao thay đổi. Phần lớn theme mặc định là ảnh vuông.

Cách sửa tốt hơn, nếu bạn kham được, nằm ở khâu nguồn: chuẩn hoá ảnh sản phẩm thành hình vuông với món hàng ở giữa và lề đều nhau. Khi đó một lần crop cứng hình vuông chẳng thay đổi gì và mọi thứ phía sau đều dự đoán được. Đổi thiết lập crop là cách chữa cháy; ảnh nguồn đồng nhất mới là giải pháp thật sự.

Khi theme khoá cứng chiều rộng

Nếu bảng Product Images của bạn chỉ có phần crop, thì theme đã khai báo chiều rộng cố định lúc nó đăng ký hỗ trợ WooCommerce:

add_theme_support( 'woocommerce', array(
    'single_image_width'    => 800,
    'thumbnail_image_width' => 400,
) );

Khi một theme truyền các giá trị đó, WooCommerce gỡ bỏ các ô chiều rộng khỏi Customizer và chỉ để lại phần tỉ lệ. Đây không phải lỗi và cũng không phải theme làm khó bạn — CSS bố cục sản phẩm của theme được dựng quanh đúng những con số pixel đó, và cho bạn đổi chúng sẽ làm vỡ lưới.

Bạn có thể ghi đè chúng từ functions.php của child theme bằng filter riêng cho từng kích thước:

add_filter( 'woocommerce_get_image_size_single', function ( $size ) {
    $size['width']  = 1000;
    $size['height'] = '';
    $size['crop']   = 0;
    return $size;
} );

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function ( $size ) {
    $size['width']  = 150;
    $size['height'] = 150;
    $size['crop']   = 1;
    return $size;
} );

Cùng khuôn mẫu đó dùng được cho woocommerce_get_image_size_thumbnail. Đây cũng là cách duy nhất để đổi thumbnail của thư viện ảnh, vì nó không có giao diện nào cả.

Nói thẳng về cái giá: ghi đè một chiều rộng bị khoá nghĩa là file mà WooCommerce sinh ra không còn khớp với thứ CSS của theme mong đợi. Thường thì ảnh chỉ co lại trong trình duyệt và trông vẫn ổn vì giờ nó lớn hơn khung chứa. Đôi khi theme có khung chiều cao cố định và bạn nhận được viền đen hoặc ảnh tràn ra ngoài. Hãy thử trên một sản phẩm trước khi tạo lại 2.000 cái.

Đổi kích thước đồng nghĩa với phải tạo lại

Mọi thiết lập kích thước chỉ ảnh hưởng tới ảnh up lên sau đó. Các sản phẩm đã có vẫn phục vụ những file được sinh ra lúc chúng được up lên, nên không có gì nhìn thấy được thay đổi cho tới khi bạn dựng lại chúng.

WooCommerce khởi động một tiến trình tạo lại chạy nền khi bạn lưu Customizer. Với danh mục nhỏ thì thế là đủ. Với danh mục lớn thì nó phụ thuộc vào việc WP-Cron chạy đều đặn, mà trên một cửa hàng ít truy cập thì thường là không, và bạn sẽ có một thư viện tạo lại được nửa chừng. Hãy tự chạy nó:

wp media regenerate --yes

Để chỉ dựng lại ảnh sản phẩm:

wp media regenerate --yes --post_type=product

Nếu bạn muốn dẹp tiến trình chạy nền sang một bên trong lúc làm thủ công:

add_filter( 'woocommerce_background_image_regeneration', '__return_false' );

Có hai điều mà việc tạo lại sẽ không làm. Nó không xoá các file cũ — thư mục uploads của bạn giữ lại mọi bản dẫn xuất mồ côi từ thiết lập trước, và nó sẽ phình ra. Và nó không thể tạo ra kích thước lớn hơn ảnh nguồn, vì WordPress không phóng to ảnh. Nếu bạn đặt chiều rộng ảnh chính là 1200 mà ảnh sản phẩm chỉ rộng 800px, sẽ không có file 1200px nào được tạo; trình duyệt nhận file 800px rồi kéo giãn nó, và srcset không có gì tốt hơn để đưa ra.

Kích thước nên up lên thật sự

Hãy nhắm tới ảnh nguồn vuông với kích thước khoảng gấp đôi chiều rộng lớn nhất bạn cấu hình — 1200x1200 cho ảnh chính 600px, 1600x1600 nếu theme của bạn dùng 800px. Như vậy phủ được màn hình retina 2x và cho WordPress đủ điểm ảnh để dựng mọi bản dẫn xuất mà không cần phóng to. Hãy giữ mọi sản phẩm cùng kích thước để lưới luôn đều.

Vẫn chưa xong?

Nếu các kích thước đã cấu hình đúng, bạn đã tạo lại rồi, mà một sản phẩm vẫn trông sai, hãy mở ảnh trong tab mới và đọc tên file. Một hậu tố kích thước không khớp với bất kỳ kích thước nào bạn cấu hình nghĩa là có thứ khác đã đăng ký nó. Không có hậu tố nào nghĩa là WooCommerce đã quay về dùng file kích thước full, mà điều đó gần như luôn có nghĩa là ảnh nguồn quá nhỏ so với kích thước bạn yêu cầu. Hãy đưa file nguồn đó qua công cụ kích thước ảnh và so cái WordPress lẽ ra phải sinh ra với cái trình duyệt thực sự tải về — khi hai thứ đó lệch nhau, thường có một plugin tối ưu ảnh hoặc một bộ resize ảnh của CDN đang nằm ở giữa.