wc-variation-gallery
Build or audit WooCommerce 11.0+ native variation gallery integrations. Covers the experimental `variation_gallery` feature flag and 5% canary rollout, variation `image` vs `gallery_image_ids`, `_product_image_gallery` storage, REST v3 variation payloads, classic product gallery
Install
npx skills add https://github.com/Lonsdale201/wp-agent-skills/tree/main/woocommerce/wc-variation-gallery
claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install lonsdale201-wp-agent-skills@llmmart
git clone https://github.com/Lonsdale201/wp-agent-skills.git
The skills CLI installs just this skill, for any of its supported agents. Claude Code installs the whole lonsdale201/wp-agent-skills collection as a plugin from our marketplace. Git is the plain clone.
Skill manifest
WooCommerce variation gallery
Use this skill when a plugin or theme needs to read, write, render, or audit WooCommerce native variation gallery images. This is separate from attribute swatches: swatches choose an attribute value; variation gallery controls the images shown after a variation is selected.
Source-verified status in 11.0.0
- Feature ID:
variation_gallery. - Feature option:
wc_feature_woocommerce_additional_variation_images_enabled. - Rollout: experimental. Explicit
yesornoin the option wins; when the option is absent, stores assigned to remote variant buckets 1–6 of 120 (5%) are enabled as a canary cohort. - Merged package slug:
woocommerce-additional-variation-images. - Native storage: variation
gallery_image_idsprop, stored in_product_image_galleryon theproduct_variationpost. - Primary image: still the variation image/thumbnail (
set_image_id(),_thumbnail_id, RESTimage). - Additional gallery images:
set_gallery_image_ids()/ RESTgallery_image_ids; these exclude the primary image. - Classic frontend data:
WC_Product_Variable::get_available_variation()returnsgallery_image_idsandgallery_images_htmlwhen the feature is enabled. - Legacy Additional Variation Images meta:
_wc_additional_variation_images; fallback is disabled by_wc_variation_gallery_legacy_fallback_disabled. - Migration completion option:
wc_variation_gallery_migration_completed_at.
Mental model
The admin UI shows one ordered gallery list for a variation, but storage is split:
Displayed ordered list: [ 101, 102, 103 ]
Primary image: 101 -> variation image (`_thumbnail_id`)
Gallery image IDs: 102,103 -> `_product_image_gallery`
Do not store the primary image again in gallery_image_ids. WooCommerce REST v3 removes the featured image from gallery_image_ids before saving.
Feature gate
Use WooCommerce's public feature API to decide whether storefront behavior should expect variation gallery swapping:
use Automattic\WooCommerce\Utilities\FeaturesUtil;
function myplugin_wc_variation_gallery_enabled(): bool {
return FeaturesUtil::feature_is_enabled( 'variation_gallery' );
}
Do not check only whether wc_feature_woocommerce_additional_variation_images_enabled equals yes. In WooCommerce 11.0 an absent option can still mean enabled for the 5% canary cohort. FeaturesUtil resolves the feature definition, including that cohort-derived default. Avoid importing Automattic\WooCommerce\Internal\VariationGallery\Package; it is an internal implementation surface.
CRUD and REST can write gallery data even when the feature is off, but core classic frontend will not generate gallery_images_html, the admin gallery UI will not load, and legacy fallback hooks will not be registered until the feature package initializes.
Read variation gallery data
Use CRUD, not raw post meta. Use default view context for display. Use edit context when you need the canonical core storage without display filters.
function myplugin_get_variation_gallery_ordered_ids( int $variation_id, string $context = 'view' ): array {
$variation = wc_get_product( $variation_id );
if ( ! $variation instanceof WC_Product_Variation ) {
return array();
}
$ids = array_merge(
array( (int) $variation->get_image_id( $context ) ),
array_map( 'intval', $variation->get_gallery_image_ids( $context ) )
);
return array_values( array_unique( array_filter( $ids ) ) );
}
For custom rendering, validate attachments before output:
$image_ids = array_values( array_filter(
myplugin_get_variation_gallery_ordered_ids( $variation_id ),
'wp_attachment_is_image'
) );
Write variation gallery data
Accept an ordered list from your UI/importer, put the first valid image into set_image_id(), and put the rest into set_gallery_image_ids().
function myplugin_set_variation_gallery_ordered_ids( int $variation_id, array $ordered_ids ): bool {
$variation = wc_get_product( $variation_id );
if ( ! $variation instanceof WC_Product_Variation ) {
return false;
}
$ordered_ids = array_values( array_filter( wp_parse_id_list( $ordered_ids ), 'wp_attachment_is_image' ) );
$primary_id = (int) ( $ordered_ids[0] ?? 0 );
$gallery_ids = array_values( array_unique( array_diff( $ordered_ids, array( $primary_id ) ) ) );
$variation->set_image_id( $primary_id );
$variation->set_gallery_image_ids( $gallery_ids );
$variation->save();
return true;
}
Variation CRUD clears relevant caches and queues the parent for deferred synchronization at shutdown. For bulk imports, keep using CRUD and let WooCommerce deduplicate touched parents. Call WC_Product_Variable::sync( $parent_id ) explicitly only when the current request must observe the rebuilt parent immediately; direct meta/SQL writes still require deliberate cache invalidation and synchronization.
REST v3 payload
Variation REST responses include gallery_image_ids. Writes must set the primary image separately:
PUT /wp-json/wc/v3/products/123/variations/456
Content-Type: application/json
{
"image": { "id": 101 },
"gallery_image_ids": [102, 103]
}
Rules:
gallery_image_idsis an array of attachment IDs, not image objects.- It excludes the primary image. If the request includes the current primary image in
gallery_image_ids, Woo removes it before saving. - REST writes call
set_gallery_image_ids()and mark legacy fallback disabled when legacy meta exists. - The response's
imagefield remains the primary variation image.
Classic frontend compatibility
Classic variable products still render templates/single-product/add-to-cart/variable.php. When the feature is enabled:
woocommerce_variable_add_to_cart()enqueueswc-add-to-cart-variationand attacheswindow.wc_variation_gallery_defaults[product_id]with the parent gallery HTML.- The 10.9.0
variable.phptemplate includes a per-form<script type="text/template" class="wc-product-gallery-default-template">reset snapshot. get_available_variation()includesgallery_images_html; the frontend JS replaces.woocommerce-product-gallerywith that HTML.- On reset or a variation without gallery HTML, the JS restores the parent gallery from the snapshot.
Theme/plugin compatibility rules:
- If overriding
single-product/add-to-cart/variable.php, keep the reset snapshot block from WooCommerce 10.9.0+. - Keep a standard
.woocommerce-product-galleryroot inside the.productcontainer; the JS searches for that node and replaces it. - Do not remove
wc-add-to-cart-variationevents or.variations_formdata attributes. - If a custom gallery binds JS to the gallery DOM, listen for
wc-product-gallery-before-destroy,wc-product-gallery-before-init, andwc-product-gallery-after-init. - Do not strip
gallery_images_htmlin thewoocommerce_available_variationfilter unless you intentionally disable gallery swapping.
Admin integration points
When enabled, Woo adds the classic editor UI after the old single image field with woocommerce_variation_after_upload_image. It persists on woocommerce_admin_process_variation_object.
Admin form fields:
- Unified ordered IDs input:
variable_gallery_image_ids[<loop>]. - Legacy primary image input kept in sync:
upload_image_id[<loop>]. - Admin script handle:
wc-admin-variation-gallery. - Admin style handle:
wc-admin-variation-gallery-styles.
If adding custom admin controls, update the same model: first ordered image is primary; remaining images are gallery IDs. Do not write _product_image_gallery directly from $_POST.
Legacy Additional Variation Images
The native feature preserves old data safely:
- Reads legacy
_wc_additional_variation_imagesonly when the core gallery is empty and the variation is not marked core-managed. - Migrates legacy IDs into
_product_image_galleryin batches of 250 through Action Scheduler groupwoocommerce-db-updates. - Keeps legacy meta for third-party readers; it sets
_wc_variation_gallery_legacy_fallback_disabledto stop fallback once core owns the variation.
Do not delete legacy meta as part of your integration. If your plugin imports or edits native gallery data on a variation that has legacy meta, save through CRUD/REST so Woo can mark fallback disabled.
Common mistakes
- Treating variation gallery as swatches. It is image-gallery data for selected variations, not an attribute selector UI.
- Saving all ordered IDs into
_product_image_gallery; the first ID belongs inimage/_thumbnail_id. - Directly updating
_product_image_galleryand missing CRUD validation, cache invalidation, and legacy fallback handling. - Assuming frontend gallery swapping works while
variation_galleryis disabled. - Overriding
variable.phpwithout the default-gallery reset snapshot. - Replacing
.woocommerce-product-gallerywith custom markup that lacks the expected root class. - Deleting
_wc_additional_variation_imagesduring migration; Woo intentionally keeps it.
Cross-references
Use wc-variations-data for variation CRUD/sync and wc-product-attribute-swatches for color/image attribute swatches.
References
- Official documentation: https://woocommerce.com/document/managing-product-variations/
- Verified source paths:
wp-content/plugins/woocommerce/src/Internal/VariationGallery/Package.phpwp-content/plugins/woocommerce/src/Internal/VariationGallery/ClassicVariationGalleryAdmin.phpwp-content/plugins/woocommerce/src/Internal/VariationGallery/LegacyVariationGalleryCompatibility.phpwp-content/plugins/woocommerce/src/Internal/VariationGallery/Migration.phpwp-content/plugins/woocommerce/src/Internal/Features/FeaturesController.phpwp-content/plugins/woocommerce/includes/class-wc-product-variable.phpwp-content/plugins/woocommerce/includes/rest-api/Controllers/Version3/class-wc-rest-product-variations-controller.phpwp-content/plugins/woocommerce/includes/data-stores/class-wc-product-variation-data-store-cpt.phpwp-content/plugins/woocommerce/includes/wc-template-functions.phpwp-content/plugins/woocommerce/templates/single-product/add-to-cart/variable.phpwp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.js
Files (wp-agent-skills)
-
SKILL.md 11.1 KB
--- name: wc-variation-gallery description: Build or audit WooCommerce 11.0+ native variation gallery integrations. Covers the experimental `variation_gallery` feature flag and 5% canary rollout, variation `image` vs `gallery_image_ids`, `_product_image_gallery` storage, REST v3 variation payloads, classic product gallery replacement/reset behavior, theme override compatibility, and Additional Variation Images legacy migration. Use when code mentions variation galleries, multiple variation images, `set_gallery_image_ids`, `gallery_images_html`, `gallery_image_ids`, `wc_feature_woocommerce_additional_variation_images_enabled`, `_wc_additional_variation_images`, or `wc-product-gallery-before-destroy`. metadata: wp-skills-author: "Soczó Kristóf" wp-skills-contact: "mailto:lonsdale201@hotmail.com" wp-skills-plugin: "woocommerce" wp-skills-plugin-version-tested: "11.0.0" wp-skills-php-min: "7.4" wp-skills-last-updated: "2026-08-05" --- # WooCommerce variation gallery Use this skill when a plugin or theme needs to read, write, render, or audit WooCommerce native variation gallery images. This is separate from attribute swatches: swatches choose an attribute value; variation gallery controls the images shown after a variation is selected. ## Source-verified status in 11.0.0 - Feature ID: `variation_gallery`. - Feature option: `wc_feature_woocommerce_additional_variation_images_enabled`. - Rollout: experimental. Explicit `yes` or `no` in the option wins; when the option is absent, stores assigned to remote variant buckets 1–6 of 120 (5%) are enabled as a canary cohort. - Merged package slug: `woocommerce-additional-variation-images`. - Native storage: variation `gallery_image_ids` prop, stored in `_product_image_gallery` on the `product_variation` post. - Primary image: still the variation image/thumbnail (`set_image_id()`, `_thumbnail_id`, REST `image`). - Additional gallery images: `set_gallery_image_ids()` / REST `gallery_image_ids`; these exclude the primary image. - Classic frontend data: `WC_Product_Variable::get_available_variation()` returns `gallery_image_ids` and `gallery_images_html` when the feature is enabled. - Legacy Additional Variation Images meta: `_wc_additional_variation_images`; fallback is disabled by `_wc_variation_gallery_legacy_fallback_disabled`. - Migration completion option: `wc_variation_gallery_migration_completed_at`. ## Mental model The admin UI shows one ordered gallery list for a variation, but storage is split: ```text Displayed ordered list: [ 101, 102, 103 ] Primary image: 101 -> variation image (`_thumbnail_id`) Gallery image IDs: 102,103 -> `_product_image_gallery` ``` Do not store the primary image again in `gallery_image_ids`. WooCommerce REST v3 removes the featured image from `gallery_image_ids` before saving. ## Feature gate Use WooCommerce's public feature API to decide whether storefront behavior should expect variation gallery swapping: ```php use Automattic\WooCommerce\Utilities\FeaturesUtil; function myplugin_wc_variation_gallery_enabled(): bool { return FeaturesUtil::feature_is_enabled( 'variation_gallery' ); } ``` Do not check only whether `wc_feature_woocommerce_additional_variation_images_enabled` equals `yes`. In WooCommerce 11.0 an absent option can still mean enabled for the 5% canary cohort. `FeaturesUtil` resolves the feature definition, including that cohort-derived default. Avoid importing `Automattic\WooCommerce\Internal\VariationGallery\Package`; it is an internal implementation surface. CRUD and REST can write gallery data even when the feature is off, but core classic frontend will not generate `gallery_images_html`, the admin gallery UI will not load, and legacy fallback hooks will not be registered until the feature package initializes. ## Read variation gallery data Use CRUD, not raw post meta. Use default `view` context for display. Use `edit` context when you need the canonical core storage without display filters. ```php function myplugin_get_variation_gallery_ordered_ids( int $variation_id, string $context = 'view' ): array { $variation = wc_get_product( $variation_id ); if ( ! $variation instanceof WC_Product_Variation ) { return array(); } $ids = array_merge( array( (int) $variation->get_image_id( $context ) ), array_map( 'intval', $variation->get_gallery_image_ids( $context ) ) ); return array_values( array_unique( array_filter( $ids ) ) ); } ``` For custom rendering, validate attachments before output: ```php $image_ids = array_values( array_filter( myplugin_get_variation_gallery_ordered_ids( $variation_id ), 'wp_attachment_is_image' ) ); ``` ## Write variation gallery data Accept an ordered list from your UI/importer, put the first valid image into `set_image_id()`, and put the rest into `set_gallery_image_ids()`. ```php function myplugin_set_variation_gallery_ordered_ids( int $variation_id, array $ordered_ids ): bool { $variation = wc_get_product( $variation_id ); if ( ! $variation instanceof WC_Product_Variation ) { return false; } $ordered_ids = array_values( array_filter( wp_parse_id_list( $ordered_ids ), 'wp_attachment_is_image' ) ); $primary_id = (int) ( $ordered_ids[0] ?? 0 ); $gallery_ids = array_values( array_unique( array_diff( $ordered_ids, array( $primary_id ) ) ) ); $variation->set_image_id( $primary_id ); $variation->set_gallery_image_ids( $gallery_ids ); $variation->save(); return true; } ``` Variation CRUD clears relevant caches and queues the parent for deferred synchronization at shutdown. For bulk imports, keep using CRUD and let WooCommerce deduplicate touched parents. Call `WC_Product_Variable::sync( $parent_id )` explicitly only when the current request must observe the rebuilt parent immediately; direct meta/SQL writes still require deliberate cache invalidation and synchronization. ## REST v3 payload Variation REST responses include `gallery_image_ids`. Writes must set the primary image separately: ```http PUT /wp-json/wc/v3/products/123/variations/456 Content-Type: application/json { "image": { "id": 101 }, "gallery_image_ids": [102, 103] } ``` Rules: - `gallery_image_ids` is an array of attachment IDs, not image objects. - It excludes the primary image. If the request includes the current primary image in `gallery_image_ids`, Woo removes it before saving. - REST writes call `set_gallery_image_ids()` and mark legacy fallback disabled when legacy meta exists. - The response's `image` field remains the primary variation image. ## Classic frontend compatibility Classic variable products still render `templates/single-product/add-to-cart/variable.php`. When the feature is enabled: - `woocommerce_variable_add_to_cart()` enqueues `wc-add-to-cart-variation` and attaches `window.wc_variation_gallery_defaults[product_id]` with the parent gallery HTML. - The 10.9.0 `variable.php` template includes a per-form `<script type="text/template" class="wc-product-gallery-default-template">` reset snapshot. - `get_available_variation()` includes `gallery_images_html`; the frontend JS replaces `.woocommerce-product-gallery` with that HTML. - On reset or a variation without gallery HTML, the JS restores the parent gallery from the snapshot. Theme/plugin compatibility rules: - If overriding `single-product/add-to-cart/variable.php`, keep the reset snapshot block from WooCommerce 10.9.0+. - Keep a standard `.woocommerce-product-gallery` root inside the `.product` container; the JS searches for that node and replaces it. - Do not remove `wc-add-to-cart-variation` events or `.variations_form` data attributes. - If a custom gallery binds JS to the gallery DOM, listen for `wc-product-gallery-before-destroy`, `wc-product-gallery-before-init`, and `wc-product-gallery-after-init`. - Do not strip `gallery_images_html` in the `woocommerce_available_variation` filter unless you intentionally disable gallery swapping. ## Admin integration points When enabled, Woo adds the classic editor UI after the old single image field with `woocommerce_variation_after_upload_image`. It persists on `woocommerce_admin_process_variation_object`. Admin form fields: - Unified ordered IDs input: `variable_gallery_image_ids[<loop>]`. - Legacy primary image input kept in sync: `upload_image_id[<loop>]`. - Admin script handle: `wc-admin-variation-gallery`. - Admin style handle: `wc-admin-variation-gallery-styles`. If adding custom admin controls, update the same model: first ordered image is primary; remaining images are gallery IDs. Do not write `_product_image_gallery` directly from `$_POST`. ## Legacy Additional Variation Images The native feature preserves old data safely: - Reads legacy `_wc_additional_variation_images` only when the core gallery is empty and the variation is not marked core-managed. - Migrates legacy IDs into `_product_image_gallery` in batches of 250 through Action Scheduler group `woocommerce-db-updates`. - Keeps legacy meta for third-party readers; it sets `_wc_variation_gallery_legacy_fallback_disabled` to stop fallback once core owns the variation. Do not delete legacy meta as part of your integration. If your plugin imports or edits native gallery data on a variation that has legacy meta, save through CRUD/REST so Woo can mark fallback disabled. ## Common mistakes - Treating variation gallery as swatches. It is image-gallery data for selected variations, not an attribute selector UI. - Saving all ordered IDs into `_product_image_gallery`; the first ID belongs in `image` / `_thumbnail_id`. - Directly updating `_product_image_gallery` and missing CRUD validation, cache invalidation, and legacy fallback handling. - Assuming frontend gallery swapping works while `variation_gallery` is disabled. - Overriding `variable.php` without the default-gallery reset snapshot. - Replacing `.woocommerce-product-gallery` with custom markup that lacks the expected root class. - Deleting `_wc_additional_variation_images` during migration; Woo intentionally keeps it. ## Cross-references Use `wc-variations-data` for variation CRUD/sync and `wc-product-attribute-swatches` for color/image attribute swatches. ## References - Official documentation: <https://woocommerce.com/document/managing-product-variations/> - Verified source paths: - `wp-content/plugins/woocommerce/src/Internal/VariationGallery/Package.php` - `wp-content/plugins/woocommerce/src/Internal/VariationGallery/ClassicVariationGalleryAdmin.php` - `wp-content/plugins/woocommerce/src/Internal/VariationGallery/LegacyVariationGalleryCompatibility.php` - `wp-content/plugins/woocommerce/src/Internal/VariationGallery/Migration.php` - `wp-content/plugins/woocommerce/src/Internal/Features/FeaturesController.php` - `wp-content/plugins/woocommerce/includes/class-wc-product-variable.php` - `wp-content/plugins/woocommerce/includes/rest-api/Controllers/Version3/class-wc-rest-product-variations-controller.php` - `wp-content/plugins/woocommerce/includes/data-stores/class-wc-product-variation-data-store-cpt.php` - `wp-content/plugins/woocommerce/includes/wc-template-functions.php` - `wp-content/plugins/woocommerce/templates/single-product/add-to-cart/variable.php` - `wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.js`
Comments (0)
Sign in to join the conversation.
Reviews (0)
No reviews yet.
No comments yet.