Title: Composite Products – Conditional Images Author: WooCommerce Published: 2020 年 2 月 13 日 Last modified: 2026 年 6 月 17 日 --- 搜索插件 ![](https://ps.w.org/composite-products-conditional-images-for-woocommerce/assets/ banner-772x250.png?rev=3243262) ![](https://ps.w.org/composite-products-conditional-images-for-woocommerce/assets/ icon-256x256.png?rev=3243262) # Composite Products – Conditional Images 作者：[WooCommerce](https://profiles.wordpress.org/woocommerce/) [下载](https://downloads.wordpress.org/plugin/composite-products-conditional-images-for-woocommerce.2.0.3.zip) * [详情](https://cn.wordpress.org/plugins/composite-products-conditional-images-for-woocommerce/#description) * [评价](https://cn.wordpress.org/plugins/composite-products-conditional-images-for-woocommerce/#reviews) * [安装](https://cn.wordpress.org/plugins/composite-products-conditional-images-for-woocommerce/#installation) * [开发进展](https://cn.wordpress.org/plugins/composite-products-conditional-images-for-woocommerce/#developers) [支持](https://wordpress.org/support/plugin/composite-products-conditional-images-for-woocommerce/) ## 描述 Free mini-extension for [WooCommerce Composite Products](https://woocommerce.com/products/composite-products/) that allows you to create dynamic, multi-layer Composite Product images that respond to option changes. The mini-extension leverages [Scenarios](https://docs.woocommerce.com/document/composite-products/composite-products-advanced-configuration/) to conditionally layer additional images over the main Composite Product image. ### Documentation The plugin introduces a new “Overlay Image” Scenario Action that lets you: * Choose an image from your Media library. * Define **conditions** for layering this image over the main Composite Product image. This approach makes it possible to utilize either **swapping** or **compositing** techniques to conditionally modify the main product image. For more information and examples, check out the plugin’s repository on [GitHub](https://github.com/woocommerce/woocommerce-composite-products-conditional-images). **Important**: The code in this plugin is provided “as is”. Support via the WordPress. org forum is provided on a **voluntary** basis only. If you have an active subscription for WooCommerce Composite Products, please be aware that WooCommerce Support may not be able to assist you with this experimental plugin. #### Image Swapping If you have previously worked with Variable Products and Variation Images, chances are you are already familiar with this technique. Here’s the idea behind image swapping: The main product image is **swapped** with an image that depicts the chosen options as soon as the configuration of the Composite Product is complete. Instead of replacing the product images, the same effect can be achieved by covering the main product image with a fully opaque (non-transparent) image. #### Image Compositing **Compositing** is the combination of multiple layers of images into a single image. The final composition creates the illusion that all stacked images are parts of the same scene. For this technique to work, each layered image must include: * some **transparent** areas that allow lower layers of the stack to be seen; * some **opaque** areas that introduce new elements in the scene by covering the layers below; and * possibly, some **semi-trasparent** areas that introduce new elements while partially allowing the layers below to be seen. **Note**: When multiple **Overlay Image** Scenarios exist, each adds its own image to the main product image stack. The layering order of these conditional images depends on the relative position of their Scenarios: If Scenario A is positioned higher than Scenario B under **Product Data > Scenarios**, then the image added by Scenario A will appear higher in the stack than the image added by Scenario B. #### Swapping vs Compositing The **Swapping** technique is a viable choice if the number of Component Options is relatively low, as it requires you to **capture one picture** and **create one Scenario** for every possible configuration. Its main advantage over the **Compositing** technique is that it allows you to obtain a natural-looking result, even if you don’t have advanced image processing skills. The **Compositing** technique is often a better choice if the number of possible configurations is high, as it requires you to create one “compositable” image for each Component Option. However, specialized knowledge and tools are required to produce a natural-looking result. For this reason, the Compositing technique is often preferred when 3D product models are available, as 3D modelling software can speed up the production of “compositable” images. #### Limitations 1. The product image cannot be opened in a lightbox once the mini-extension has stacked additional images over it. 2. The image zooming feature included with WooCommerce is not compatible with the swapping/compositing techniques introduced by the mini-extension. When a Composite Product includes Scenarios with the **Overlay Image** Scenario Action, the image zooming feature of the Composite Product is disabled. 3. The plugin works with themes that declare support for the `wc-product-gallery-slider` feature. ## 屏幕截图 [⌊A Composite Product with a dynamic, multi-layer product image.⌉⌊A Composite Product with a dynamic, multi-layer product image.⌉[ A Composite Product with a dynamic, multi-layer product image. [⌊Using Scenarios to create conditional image layers.⌉⌊Using Scenarios to create conditional image layers.⌉[ Using Scenarios to create conditional image layers. ## 安装 Composite Products – Conditional Images: 1. Requires the official [WooCommerce Composite Products](https://woocommerce.com/products/composite-products/) extension. Before installing this plugin, please ensure that you are running the latest versions of both **WooCommerce** and **WooCommerce Composite Products**. 2. Only works with themes that declare support for the `wc-product-gallery-slider` feature. ## 评价 ![](https://secure.gravatar.com/avatar/16afe43c11424ac9bb05201a3037e86305ef5552ce8404e7671c6623386c024c? s=60&d=retro&r=g) ### 󠀁[Exactly what I was looking for!](https://wordpress.org/support/topic/exactly-what-i-was-looking-for-580/)󠁿 [artcohr](https://profiles.wordpress.org/artcohr/) 2023 年 9 月 15 日 This is an awesome plugin and exactly what I was looking for. I was using another image layering plugin with variable products, but this did not work with components. And this one does perfectly. If you are using flatsome, but sure to activate the default image gallery in the advanced options. Thanks and keep up the good work! ![](https://secure.gravatar.com/avatar/3a895690d262791bc2ea10cf64fa7f410032b240ac114d8d59d937458ed54318? s=60&d=retro&r=g) ### 󠀁[Crashes the website – not updated](https://wordpress.org/support/topic/crashes-the-website-not-updated/)󠁿 [zyqux](https://profiles.wordpress.org/zyqux/) 2021 年 11 月 8 日 I use Flatsome and it was crashing my site after installation. However, I visited the support thread here on WordPress and found out that I needed to activate the default WooCommerce image gallery. In the future, I would be happy to see support for Flatsome theme too. Good job! [ 阅读所有2条评价 ](https://wordpress.org/support/plugin/composite-products-conditional-images-for-woocommerce/reviews/) ## 贡献者及开发者 「Composite Products – Conditional Images」是开源软件。 以下人员对此插件做出了贡献。 贡献者 * [ WooCommerce ](https://profiles.wordpress.org/woocommerce/) * [ Automattic ](https://profiles.wordpress.org/automattic/) * [ SomewhereWarm ](https://profiles.wordpress.org/somewherewarm/) 「Composite Products – Conditional Images」插件已被翻译至 2 种本地化语言。 感谢[所有译者](https://translate.wordpress.org/projects/wp-plugins/composite-products-conditional-images-for-woocommerce/contributors) 为本插件所做的贡献。 [帮助将「Composite Products – Conditional Images」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/composite-products-conditional-images-for-woocommerce) ### 对开发感兴趣吗? 您可以[浏览代码](https://plugins.trac.wordpress.org/browser/composite-products-conditional-images-for-woocommerce/)， 查看[SVN仓库](https://plugins.svn.wordpress.org/composite-products-conditional-images-for-woocommerce/)， 或通过[RSS](https://plugins.trac.wordpress.org/log/composite-products-conditional-images-for-woocommerce/?limit=100&mode=stop_on_copy&format=rss) 订阅[开发日志](https://plugins.trac.wordpress.org/log/composite-products-conditional-images-for-woocommerce/)。 ## 更新日志 #### 2.0.3 * Fix – Removed an obsolete REST API scenario schema modification that corrupted the Composite Products scenario actions schema, causing the Products endpoint to reject writes for all scenario action types other than ‘overlay_image’. #### 2.0.2 * Fix – Fixed script dependencies when using block themes. #### 2.0.1 * Tweak – Updated author links. #### 2.0.0 * Important – New: PHP 7.4+ is now required. * Important – New: WooCommerce 8.2+ is now required. * Important – New: WordPress 6.2+ is now required. * Important – New: Composite Products 10.0+ is now required. #### 1.3.0 * Feature – Declared compatibility with the new High-Performance order tables. * Feature – Introduced compatibility with the new block-based Single Product Template. #### 1.2.6 * Fix – Fixed an issue that prevented the ‘Overlay Image’ action options from rendering correctly. #### 1.2.5 * Fix – Make sure that the order of composited images is always following the order of Scenarios. #### 1.2.4 * Fix – Improved Scenario Action styles when using Composite Products v8.0. #### 1.2.3 * Fix – Declared compatibility with the latest WooCommerce and WordPress versions. * Fix – Added support for Composite Products v8.0. #### 1.2.2 * Fix – Declared WooCommerce 4.2 compatibility. #### 1.2.1 * Fix – Declared WooCommerce 4.0 compatibility. #### 1.2.0 * Tweak – Renamed plugin to comply with WordPress.org guidelines. #### 1.1.1 * Fix – Added support for creating ‘overlay_image’ scenarios via the REST API. * Tweak – Declared support for WordPress 5.3 and WooCommerce 3.9. #### 1.1.0 * Fix – Compatibility with Composite Products 5.0+. Older versions of Composite Products are no longer supported. #### 1.0.2 * Fix – Resolve issue with Composite Products that do not have a product image set. #### 1.0.1 * Fix – Resize stacked images when the viewport width changes. * Tweak – Adjust overlay image width based on main ‘img’ width. #### 1.0.0 * Initial Release. ## 额外信息 * 版本 **2.0.3** * 最后更新：**4 月前** * 活跃安装数量 **200+** * WordPress 版本 ** 6.2 或更高版本 ** * 已测试的最高版本为 **7.0.7** * PHP 版本 ** 7.4 或更高版本 ** * 语言 * [English (UK)](https://en-gb.wordpress.org/plugins/composite-products-conditional-images-for-woocommerce/)、 [English (US)](https://wordpress.org/plugins/composite-products-conditional-images-for-woocommerce/) 和 [German](https://de.wordpress.org/plugins/composite-products-conditional-images-for-woocommerce/). * [翻译成简体中文](https://translate.wordpress.org/projects/wp-plugins/composite-products-conditional-images-for-woocommerce) * 标签 * [composite](https://cn.wordpress.org/plugins/tags/composite/)[conditional](https://cn.wordpress.org/plugins/tags/conditional/) [image](https://cn.wordpress.org/plugins/tags/image/)[layers](https://cn.wordpress.org/plugins/tags/layers/) [woocommerce](https://cn.wordpress.org/plugins/tags/woocommerce/) * [高级视图](https://cn.wordpress.org/plugins/composite-products-conditional-images-for-woocommerce/advanced/) ## 评级 5 星（最高 5 星）。 * [ 2 条 5 星评价 ](https://wordpress.org/support/plugin/composite-products-conditional-images-for-woocommerce/reviews/?filter=5) * [ 0 条 4 星评价 ](https://wordpress.org/support/plugin/composite-products-conditional-images-for-woocommerce/reviews/?filter=4) * [ 0 条 3 星评价 ](https://wordpress.org/support/plugin/composite-products-conditional-images-for-woocommerce/reviews/?filter=3) * [ 0 条 2 星评价 ](https://wordpress.org/support/plugin/composite-products-conditional-images-for-woocommerce/reviews/?filter=2) * [ 0 条 1 星评价 ](https://wordpress.org/support/plugin/composite-products-conditional-images-for-woocommerce/reviews/?filter=1) [您的评价](https://wordpress.org/support/plugin/composite-products-conditional-images-for-woocommerce/reviews/#new-post) [查看全部评论](https://wordpress.org/support/plugin/composite-products-conditional-images-for-woocommerce/reviews/) ## 贡献者 * [ WooCommerce ](https://profiles.wordpress.org/woocommerce/) * [ Automattic ](https://profiles.wordpress.org/automattic/) * [ SomewhereWarm ](https://profiles.wordpress.org/somewherewarm/) ## 支持 有话要说吗？是否需要帮助？ [查看支持论坛](https://wordpress.org/support/plugin/composite-products-conditional-images-for-woocommerce/)