WooCommerce Product Image Size: Ang Tatlong Size at Paano Talaga Ito Baguhin

Tatlong image size ang ginagawa ng WooCommerce para sa bawat product photo na ina-upload mo, at dalawa lang doon ang maeedit sa WordPress admin. Ang woocommerce_thumbnail ay ang image sa catalog grid, ang woocommerce_single ay ang malaking image sa product page, at ang woocommerce_gallery_thumbnail ay ang maliit na hanay ng thumbnails sa ilalim nito. Binabago mo ito sa Appearance > Customize > WooCommerce > Product Images — at kung may cropping dropdown ang panel na iyon pero walang kahon para sa lapad, sinadya ng theme mo na i-lock ang mga lapad sa code.

Ang tatlong size

Pangalan ng size	Saan ito lumalabas	Cropping	Maeedit sa customizer
woocommerce_thumbnail	Shop page, category grids, related products, cross-sells	Hard-crop sa parisukat bilang default	Lapad at ratio
woocommerce_single	Pangunahing image sa single product page	Uncropped — nananatili ang orihinal na aspect ratio	Lapad lang
woocommerce_gallery_thumbnail	Maliit na hanay sa ilalim ng pangunahing product image	Hard-crop na parisukat	Hindi

Nakapatong ito sa mga standard na size ng WordPress. Karaniwang gumagawa ang isang product photo ng thumbnail, medium, medium_large, large, ang tatlong WooCommerce size, at posibleng dagdag pa na nirehistro ng theme mo sa pamamagitan ng add_image_size. Napakaraming file kada upload, at iyan ang dahilan kung bakit ang tagal ng import ng 300 produkto.

Ang gallery thumbnail ang nakakagulat sa marami: wala itong kahit anong kontrol sa admin. Sa default na install, maliit itong parisukat, 100px ayon sa kasaysayan, at ito ang pinakamalamang na magmukhang malabo sa retina screen dahil talagang maliit ang pisikal na file.

Saan talaga nakalagay ang mga setting

Tatlong kontrol ang ibinibigay ng Appearance > Customize > WooCommerce > Product Images:

• Lapad ng pangunahing image — ang lapad ng woocommerce_single. Awtomatiko ang taas, kaya napapanatili ang orihinal na aspect ratio.
• Lapad ng thumbnail — ang lapad ng woocommerce_thumbnail.
• Thumbnail cropping — 1:1 (parisukat, ang default), Custom (nagta-type ka ng ratio gaya ng 4:3), o Uncropped.

Pansinin kung ano ang wala: walang field para sa taas ng catalog thumbnail, dahil galing sa cropping ratio ang taas. At wala talagang kahit ano para sa gallery thumbnail.

Bago ka magbago ng kahit ano, malaking tulong na makita kung anong mga derivative ang gagawin ng isang file — i-drop mo ang totoong product photo sa WordPress image sizes tool at makukuha mo ang buong listahan, kasama kung sapat ba ang laki ng source mo para punan ang bawat size nang walang upscaling.

Bakit mukhang mali ang catalog images mo

Hard-crop sa parisukat ang catalog thumbnail. Ibig sabihin ng hard crop, kinukuha ng WooCommerce ang gitnang parisukat ng larawan mo at itinatapon ang natitira — hindi ito nagle-letterbox, at hindi ito nangingipit. Ang 2000x1200 na product shot ay nagiging 1200x1200 na hiwa mula sa gitna, tapos pinapaliit.

Ayos lang iyon para sa boteng nakasentro at may margin sa paligid. Trahedya naman ito para sa:

• Mahahabang produkto (ski, kable, curtain rod) — gitnang bahagi lang ang makikita mo
• Komposisyong hindi nakasentro — napupunta sa gilid ng frame ang produkto at nahihiwa
• Larawang puno ang frame mula gilid hanggang gilid — naputol ang itaas at ibaba
• Lifestyle shots na nasa sulok ang produkto

Ang karaniwang payo ay “palitan mo ang cropping papuntang Uncropped.” Umuubra iyon, pero maging tapat tayo sa gastos: ang uncropped ay nangangahulugang bawat thumbnail ay may sariling aspect ratio, kaya ang grid ng magkakaibang orientation ay nagmumukhang gulo-gulo, at hindi na nagpapantay ang mga row maliban kung kayang hawakan ng CSS ng theme mo ang iba’t ibang taas. Parisukat ang inaasahan ng karamihan ng theme.

Ang mas mabuting ayos, kung kaya mo, ay nasa pinagmulan: gawing pamantayan ang parisukat na product photo na nakasentro ang item at pantay ang padding. Sa ganoon, wala nang epekto ang parisukat na hard crop at nahuhulaan na ang lahat ng kasunod. Ang pagbabago ng crop setting ay workaround; ang pare-parehong source images ang tunay na solusyon.

Kapag naka-lock ng theme ang mga lapad

Kung cropping lang ang inaalok ng Product Images panel mo, nagdeklara ang theme mo ng fixed na lapad noong nirehistro nito ang suporta sa WooCommerce:

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

Kapag ipinasa ng theme ang mga halagang iyon, inaalis ng WooCommerce ang mga kontrol sa lapad mula sa customizer at ratio na lang ang natitira. Hindi ito bug at hindi ito pambabastos ng theme — nakabuo ang product layout CSS ng theme sa paligid ng eksaktong pixel na lapad na iyon, at masisira ang grid kung papayagan kang baguhin ito.

Puwede mo itong i-override mula sa functions.php ng child theme gamit ang per-size na filter:

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

Gumagana rin ang parehong pattern para sa woocommerce_get_image_size_thumbnail. Ito rin ang tanging paraan para baguhin ang gallery thumbnail, dahil wala itong UI.

Sabihin natin nang tapat ang tunay na gastos: kapag ni-override mo ang naka-lock na lapad, hindi na tutugma ang file na ginagawa ng WooCommerce sa inaasahan ng CSS ng theme. Kadalasan, nagsi-scale lang ang image sa browser at maganda pa rin ang itsura dahil mas malaki na ito kaysa sa kahon. Minsan naman, may fixed-height na container ang theme at magkakaroon ka ng letterboxing o overflow. Mag-test sa isang produkto bago ka mag-regenerate ng 2,000.

Ang pagpapalit ng size ay nangangahulugang pag-regenerate

Bawat size setting ay nakakaapekto lang sa bagong upload. Patuloy na naghahain ang mga umiiral na produkto ng mga file na ginawa noong na-upload sila, kaya walang makikitang pagbabago hangga’t hindi mo sila binubuo ulit.

Nagsisimula ang WooCommerce ng background regeneration kapag ni-save mo ang customizer. Sapat na iyon sa maliit na catalog. Sa malaki, nakadepende ito sa maaasahang pagputok ng WP-Cron, na sa mababa ang trapikong tindahan ay madalas hindi nangyayari, kaya napupunta ka sa kalahating regenerate na library. Ikaw na lang ang magpatakbo nito:

wp media regenerate --yes

Para buuin ulit ang product images lang:

wp media regenerate --yes --post_type=product

Kung gusto mong wala nang background job habang mano-mano mong ginagawa ito:

add_filter( 'woocommerce_background_image_regeneration', '__return_false' );

May dalawang bagay na hindi gagawin ng regeneration. Hindi nito binubura ang mga lumang file — nananatili sa uploads directory mo ang bawat naulilang derivative mula sa dating setting, at lalaki ito. At hindi ito makakagawa ng size na mas malaki kaysa sa source mo, dahil hindi nag-a-upscale ang WordPress. Kung 1200 ang itinakda mong lapad ng pangunahing image pero 800px lang ang lapad ng mga product photo mo, walang 1200px na file na magagawa; 800px na file ang matatanggap ng browser at uunatin nito, at wala nang mas maganda pang maiaalok ang srcset.

Ang size na dapat mong i-upload

Puntiryahin ang parisukat na source images sa humigit-kumulang doble ng pinakamalaking naka-configure mong lapad — 1200x1200 para sa 600px na pangunahing image, 1600x1600 kung 800px ang gamit ng theme mo. Sakop niyan ang 2x retina displays at nabibigyan nito ang WordPress ng sapat na pixel para buuin ang bawat derivative nang walang upscaling. Panatilihing pare-pareho ang dimensyon ng bawat produkto para pantay ang grid.

Hindi pa rin umuubra?

Kung tama ang pagkaka-configure ng mga size, nag-regenerate ka na, at mali pa rin ang itsura ng isang produkto, buksan ang image sa bagong tab at basahin ang filename. Ang dimension suffix na hindi tumutugma sa kahit anong size na na-configure mo ay ibig sabihin may ibang nagrehistro nito. Kapag walang suffix, bumalik ang WooCommerce sa full-size na file, at halos palaging ibig sabihin niyan ay maliit ang source para sa hiningi mong size. Ipasa mo ang source file na iyon sa image sizes tool at ihambing kung ano dapat ang ginagawa ng WordPress laban sa aktuwal na kinarga ng browser — kapag hindi sila tugma, kadalasan may optimizer plugin o CDN image resizer sa pagitan.