Abhishek Kumar

RenderWhen for Blocks adds conditional visibility to every block in the WordPress block editor. Decide who sees what, and when, with a panel that reads exactly how you’d say it out loud:
<blockquote>
Show this block when the user is logged in. 
 Show this block when the date is between March 1 and March 31. 
 Show this block when the device is mobile.
</blockquote>
RenderWhen is built around two ideas that set it apart from other visibility plugins:
<ul>
<li>Server-side rendering only. When a block is hidden by a condition, it is not rendered into the page output at all. No CSS <code>display: none</code>, no DOM bloat, no leaked content in view-source. Search engines, screen readers, and your page weight all benefit.</li>
<li>Public Conditions API. The three built-in conditions are registered through the same public API your plugin or theme can use to add your own. No hacks, no internal-only code paths.</li>
</ul>
In the editor, a subtle dashed border marks every block that carries a visibility rule, so a rule-bearing block never disappears from the published page as a surprise. A “Preview as audience” sidebar lets you simulate a logged-out visitor, a specific role, or a different device class right in the editor — blocks whose rule would hide them fade out with a clear badge, no save-and-reload cycle required.
<h4>Built-in conditions (v1.0)</h4>
<ul>
<li>User state — show to logged-in users, logged-out users, or specific roles</li>
<li>Date range — show between two datetimes, timezone-aware</li>
<li>Device type — show on desktop, tablet, or mobile</li>
</ul>
<h4>Designed for</h4>
<ul>
<li>Agencies and freelancers building client sites who want a clean, predictable visibility tool</li>
<li>Developers who need an extension point, not another walled garden</li>
<li>Anyone who cares about page weight and SEO hygiene</li>
</ul>
<h4>What this plugin deliberately does NOT do</h4>
It does one thing well rather than ten things adequately. Out of scope in v1.0:
<ul>
<li>Multi-condition AND/OR groups (planned for v1.1)</li>
<li>URL / cookie / referrer / geolocation conditions</li>
<li>WooCommerce, ACF, or membership integrations</li>
<li>A settings dashboard</li>
</ul>
If you need those today, <a href="https://wordpress.org/plugins/conditional-blocks/" rel="ugc">Conditional Blocks</a> and <a href="https://wordpress.org/plugins/block-visibility/" rel="ugc">Block Visibility</a> are excellent and well-established choices.
<h4>For developers</h4>
Register a custom condition in three steps. Implement the interface, add it to the registry, ship.
<pre><code>add_action( 'renderwhen_register_conditions', function ( $registry ) {
 $registry->register( new My_Plugin\\Conditions\\Country_Condition() );
} );
</code></pre>
Your condition class implements <code>RenderWhen\Conditions\Interface_Condition</code>:
<pre><code>namespace My_Plugin\Conditions;

use RenderWhen\Conditions\Interface_Condition;

class Country_Condition implements Interface_Condition {
 public function get_id(): string {
 return 'country';
 }

 public function get_label(): string {
 return __( 'Visitor country', 'my-plugin' );
 }

 public function get_schema(): array {
 return array(
 'type' => 'object',
 'properties' => array(
 'countries' => array(
 'type' => 'array',
 'items' => array( 'type' => 'string' ),
 ),
 ),
 );
 }

 public function evaluate( array $settings, array $context ): bool {
 $current = my_plugin_detect_country();
 return in_array( $current, $settings['countries'] ?? array(), true );
 }
}
</code></pre>
The full set of public filters:
<ul>
<li><code>renderwhen_register_conditions</code> — register your conditions here</li>
<li><code>renderwhen_evaluate_{condition_id}</code> — last-mile override of any condition’s result</li>
<li><code>renderwhen_render_block_hidden</code> — fires when a block is hidden, useful for cache busters and SEO tools</li>
<li><code>renderwhen_device_type</code> — swap in your own device detection</li>
</ul>
The plugin is developed openly on GitHub. Issues, PRs, and architecture discussions welcome: https://github.com/abhishekfdd/renderwhen

RenderWhen for Blocks

Show or hide any block when conditions match. Developer-first API and true server-side rendering — hidden blocks never reach the browser.

Automattic

WooCommerce

Manos (a11n)

SomewhereWarm

Free mini-extension for <a href="https://woocommerce.com/products/composite-products/" rel="nofollow ugc">WooCommerce Composite Products</a> that allows you to create dynamic, multi-layer Composite Product images that respond to option changes. The mini-extension leverages <a href="https://docs.woocommerce.com/document/composite-products/composite-products-advanced-configuration/" rel="nofollow ugc">Scenarios</a> to conditionally layer additional images over the main Composite Product image.
<h3>Documentation</h3>
The plugin introduces a new “Overlay Image” Scenario Action that lets you:
<ul>
<li>Choose an image from your Media library.</li>
<li>Define conditions for layering this image over the main Composite Product image.</li>
</ul>
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 <a href="https://github.com/woocommerce/woocommerce-composite-products-conditional-images" rel="nofollow ugc">GitHub</a>.
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.
<h4>Image Swapping</h4>
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.
<h4>Image Compositing</h4>
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:
<ul>
<li>some transparent areas that allow lower layers of the stack to be seen;</li>
<li>some opaque areas that introduce new elements in the scene by covering the layers below; and</li>
<li>possibly, some semi-trasparent areas that introduce new elements while partially allowing the layers below to be seen.</li>
</ul>
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.
<h4>Swapping vs Compositing</h4>
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.
<h4>Limitations</h4>
<ol>
<li>The product image cannot be opened in a lightbox once the mini-extension has stacked additional images over it.</li>
<li>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.</li>
<li>The plugin works with themes that declare support for the <code>wc-product-gallery-slider</code> feature.</li>
</ol>

Composite Products – Conditional Images

Free mini-extension for WooCommerce Composite Products that allows you to create dynamic, multi-layer Composite Product images that respond to option  …

RenderWhen for Blocks vs Composite Products – Conditional Images