Ukuran Gambar Produk WooCommerce: Tiga Ukuran dan Cara Mengubahnya

WooCommerce membuat tiga ukuran gambar untuk setiap foto produk yang Anda upload, dan hanya dua di antaranya yang bisa diubah dari admin WordPress. woocommerce_thumbnail adalah gambar di grid katalog, woocommerce_single adalah gambar besar di halaman produk, dan woocommerce_gallery_thumbnail adalah deretan thumbnail kecil di bawahnya. Pengaturannya ada di Appearance > Customize > WooCommerce > Product Images — dan kalau panel itu hanya menampilkan dropdown cropping tanpa kotak lebar, berarti tema Anda memang sengaja mengunci lebarnya di kode.

Tiga ukuran itu

Nama ukuran	Di mana muncul	Cropping	Bisa diubah di customizer
woocommerce_thumbnail	Halaman toko, grid kategori, produk terkait, cross-sell	Hard crop jadi persegi secara bawaan	Lebar dan rasio
woocommerce_single	Gambar utama di halaman produk tunggal	Tanpa crop — rasio aspek asli dipertahankan	Lebar saja
woocommerce_gallery_thumbnail	Deretan kecil di bawah gambar produk utama	Hard crop persegi	Tidak

Ketiganya berdiri di atas ukuran standar WordPress. Satu foto produk biasanya menghasilkan thumbnail, medium, medium_large, large, tiga ukuran WooCommerce tadi, dan mungkin tambahan lain yang didaftarkan tema Anda lewat add_image_size. Itu banyak sekali file per upload, dan itulah sebabnya impor 300 produk terasa lama sekali.

Gallery thumbnail adalah yang paling sering mengejutkan orang: ukuran ini sama sekali tidak punya kontrol di admin. Pada instalasi bawaan, ukurannya persegi kecil, secara historis 100px, dan inilah ukuran yang paling mungkin terlihat kurang tajam di layar retina karena file fisiknya memang benar-benar mungil.

Di mana pengaturannya sebenarnya berada

Appearance > Customize > WooCommerce > Product Images memberi Anda tiga kontrol:

• Main image width — lebar woocommerce_single. Tingginya otomatis, jadi rasio aspek aslinya dipertahankan.
• Thumbnail width — lebar woocommerce_thumbnail.
• Thumbnail cropping — 1:1 (persegi, bawaan), Custom (Anda mengetik rasio seperti 4:3), atau Uncropped.

Perhatikan apa yang tidak ada: tidak ada kolom tinggi untuk thumbnail katalog, karena tingginya diturunkan dari rasio cropping. Dan tidak ada apa pun untuk gallery thumbnail.

Sebelum mengubah apa pun, ada baiknya melihat persis turunan mana saja yang akan dihasilkan sebuah file — masukkan foto produk asli ke tool ukuran gambar WordPress dan Anda mendapat daftar lengkapnya, termasuk apakah sumber Anda cukup besar untuk mengisi setiap ukuran tanpa perlu diperbesar.

Kenapa gambar katalog Anda terlihat salah

Thumbnail katalog melakukan hard crop menjadi persegi. Hard crop berarti WooCommerce mengambil potongan persegi dari tengah foto Anda dan membuang sisanya — tidak dibingkai letterbox, dan tidak dipipihkan. Foto produk 2000x1200 menjadi irisan 1200x1200 yang diambil dari bagian tengah, lalu diperkecil.

Itu tidak masalah untuk botol yang difoto tepat di tengah dengan margin di sekelilingnya. Tapi jadi bencana untuk:

• Produk memanjang (ski, kabel, rel gorden) — Anda hanya melihat sepertiga bagian tengahnya
• Komposisi yang tidak di tengah — produk bergeser ke tepi frame lalu terpotong
• Foto yang objeknya memenuhi frame sampai ke tepi — bagian atas dan bawah terpotong
• Foto gaya hidup dengan produk berada di sudut

Saran yang umum beredar adalah “ubah cropping ke Uncropped.” Itu memang berhasil, tapi jujurlah soal harganya: uncropped berarti setiap thumbnail mempertahankan rasio aspeknya sendiri, sehingga grid berisi foto dengan orientasi campuran jadi terlihat tidak rapi, dan barisnya tidak lagi sejajar kecuali CSS tema Anda menangani tinggi yang bervariasi. Kebanyakan tema mengasumsikan bentuk persegi.

Perbaikan yang lebih baik, kalau Anda sanggup, ada di sumbernya: seragamkan foto produk dalam format persegi dengan objek di tengah dan padding merata. Dengan begitu hard crop persegi tidak mengubah apa pun dan semua yang di bawahnya jadi bisa diprediksi. Mengubah pengaturan crop itu solusi tambal; gambar sumber yang konsisten adalah solusi sebenarnya.

Ketika tema mengunci lebarnya

Kalau panel Product Images Anda hanya menawarkan cropping, berarti tema Anda mendeklarasikan lebar tetap saat mendaftarkan dukungan WooCommerce:

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

Saat sebuah tema mengirimkan nilai itu, WooCommerce menghapus kontrol lebar dari customizer dan hanya menyisakan rasio. Ini bukan bug dan bukan tema yang sengaja menyusahkan — CSS layout produk tema itu dibangun di sekitar lebar piksel yang persis itu, dan membiarkan Anda mengubahnya akan merusak grid-nya.

Anda bisa menimpanya dari functions.php milik child theme dengan filter per-ukuran:

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;
} );

Pola yang sama berlaku untuk woocommerce_get_image_size_thumbnail. Ini juga satu-satunya cara mengubah gallery thumbnail, karena ukuran itu tidak punya antarmuka sendiri.

Harga sebenarnya, dikatakan terus terang: menimpa lebar yang terkunci berarti file yang dihasilkan WooCommerce tidak lagi cocok dengan yang diharapkan CSS tema. Biasanya gambarnya hanya menyesuaikan skala di browser dan tetap terlihat baik karena kini lebih besar dari kotaknya. Kadang temanya punya kontainer dengan tinggi tetap dan Anda mendapat letterbox atau overflow. Uji pada satu produk sebelum meregenerasi 2.000.

Mengubah ukuran berarti harus regenerate

Setiap pengaturan ukuran hanya berlaku untuk upload baru. Produk yang sudah ada tetap menyajikan file yang dibuat saat produk itu di-upload, jadi tidak ada yang berubah secara kasat mata sampai Anda membangunnya ulang.

WooCommerce menjalankan regenerasi di latar belakang saat Anda menyimpan customizer. Pada katalog kecil itu sudah cukup. Pada katalog besar, prosesnya bergantung pada WP-Cron yang berjalan andal, yang di toko dengan trafik rendah sering kali tidak terjadi, dan Anda berakhir dengan media library yang setengah jadi. Jalankan sendiri saja:

wp media regenerate --yes

Untuk membangun ulang gambar produk saja:

wp media regenerate --yes --post_type=product

Kalau Anda ingin menyingkirkan proses latar belakang selama mengerjakannya manual:

add_filter( 'woocommerce_background_image_regeneration', '__return_false' );

Dua hal yang tidak dilakukan regenerasi. Proses ini tidak menghapus file lama — direktori uploads Anda menyimpan setiap turunan yatim dari pengaturan sebelumnya, dan ukurannya akan terus bertambah. Dan proses ini tidak bisa membuat ukuran yang lebih besar dari sumbernya, karena WordPress tidak memperbesar gambar. Kalau Anda menetapkan lebar gambar utama 1200 tapi foto produk Anda lebarnya 800px, tidak ada file 1200px yang dibuat; browser menerima file 800px lalu meregangkannya, dan srcset tidak punya pilihan yang lebih baik.

Ukuran yang sebaiknya Anda upload

Targetkan gambar sumber persegi dengan ukuran sekitar dua kali lebar terbesar yang Anda konfigurasikan — 1200x1200 untuk gambar utama 600px, 1600x1600 kalau tema Anda memakai 800px. Itu menutupi layar retina 2x dan memberi WordPress cukup piksel untuk membangun setiap turunan tanpa perlu memperbesar. Pertahankan dimensi yang sama untuk semua produk supaya grid-nya tetap rapi.

Masih bermasalah?

Kalau ukurannya sudah diatur dengan benar, Anda sudah melakukan regenerate, dan sebuah produk masih terlihat salah, buka gambarnya di tab baru dan baca nama filenya. Akhiran dimensi yang tidak cocok dengan satu pun ukuran yang Anda konfigurasikan berarti ada hal lain yang mendaftarkannya. Tanpa akhiran sama sekali berarti WooCommerce jatuh ke file ukuran full, yang hampir selalu berarti sumbernya terlalu kecil untuk ukuran yang Anda minta. Jalankan file sumber itu lewat tool ukuran gambar dan bandingkan apa yang seharusnya dihasilkan WordPress dengan apa yang benar-benar dimuat browser — ketika keduanya berbeda, biasanya ada plugin optimizer atau resizer gambar CDN yang duduk di antaranya.