WooCommerce View in Room

WooCommerce View in Room is a focused 2D room-preview plugin for WooCommerce photography, painting, poster, print, and wall-art products.

It displays a separate "See It in Your Space" card on WooCommerce single-product pages with product imagery. The card mirrors the currently active WooCommerce product image inside a configured room scene and opens an accessible larger modal preview.

Features

• Per-product enable/disable setting. If no product-specific choice has been saved, products with a featured, gallery, or variation image can render dynamically.
• Global and product-specific room-background image settings using Media Library attachment IDs.
• Product image, gallery image, and variation image synchronization.
• Automatic placement before add to cart, after add to cart, or at the end of the product summary.
• [woocommerce_view_in_room] and [woocommerce_view_in_room product_id="123"] shortcodes.
• Accessible modal with Escape close, overlay close, focus trapping, and focus restoration.
• Scoped CSS and JavaScript.
• No Base64 images, no remote image copying, no AR, no 3D, no external APIs.

Installation

1. Upload woocommerce-view-in-room-1.0.0.zip in Plugins -> Add New -> Upload Plugin.
2. Activate the plugin.
3. Make sure WooCommerce is active.
4. Go to WooCommerce -> Settings -> Products -> View in Room and select a default room-background image.

Global Settings

Open WooCommerce -> Settings -> Products -> View in Room.

Configure:

• Global default room background.
• Default card heading, description, and button label.
• Default artwork left/top position, width, height, and fit mode.
• Default frame colour and thickness.
• Automatic placement and hook position.
• Delete plugin data on uninstall.

If no global background is set, products can still use a product-specific override.

Product Settings

Edit a WooCommerce product and open the Product data -> View in Room tab.

Set:

• Enable View in Room to force the card on, disable it to hide the card, or leave it untouched to render dynamically for products with images.
• Optional room-background override.
• Optional artwork left/top position, width, height, fit mode, frame colour, frame thickness, heading, description, and button label overrides.

The product must have a featured image or gallery image.

Shortcode

Use the current product:

[woocommerce_view_in_room]

Use a specific product:

[woocommerce_view_in_room product_id="123"]

For Elementor, Divi, Gutenberg, and custom three-column product layouts, place the shortcode in the desired column. The plugin does not force a three-column WooCommerce layout because that would conflict with many themes.

Testing

Simple product test:

1. Add a featured image and at least one gallery image.
2. Enable View in Room on the product.
3. Configure a room background.
4. View the product page.
5. Confirm the room card shows the featured image.
6. Click gallery thumbnails and arrows. The artwork in the room card should change immediately.
7. Open the modal and confirm it shows the same current image.

Variable product test:

1. Add variation images to variations.
2. Enable View in Room on the parent product.
3. Select a variation on the frontend.
4. Confirm the room card artwork changes to the variation image.
5. Reset the variation. The room card should return to the active parent/gallery image.

CSS Customization

Useful selectors:

• .wcvir-room-card
• .wcvir-room-card-title
• .wcvir-room-scene
• .wcvir-room-background
• .wcvir-room-artwork
• .wcvir-button
• .wcvir-modal
• .wcvir-dialog

CSS custom properties on .wcvir-room-card:

• --wcvir-art-x
• --wcvir-art-y
• --wcvir-art-width
• --wcvir-frame-color
• --wcvir-frame-thickness
• --wcvir-card-border
• --wcvir-card-muted

Known Compatibility Limitations

• This is a 2D room preview only. It does not provide camera AR, WebXR, 3D model previews, customer room upload, or image downloads.
• Automatic placement depends on standard WooCommerce hooks. Use the shortcode for exact theme or page-builder column placement.
• Gallery synchronization targets the standard WooCommerce gallery and common slider state classes. A scoped MutationObserver fallback handles many custom themes, but heavily customized galleries may need theme-specific integration.
• The room background must be chosen from the WordPress Media Library. The plugin intentionally does not include or create merchant-owned room imagery.

Changelog

1.0.0

• Initial release with product settings, global settings, automatic placement, shortcode, gallery/variation synchronization, room preview card, accessible modal, and uninstall cleanup.

1.0.1

• Hardened artwork frame positioning so the gallery image always covers the fixed wall frame.

1.0.2

• Updated room card text and button colors to #9d968a.

1.0.3

• Overrode theme button hover color with #9d968a.

1.0.4

• Fixed modal room artwork sizing so the selected image covers the popup frame.

1.0.5

• Expanded modal artwork coordinates to cover the full wall-frame area.