WordPress and WooCommerce

Custom products, views, and variations

Build a reusable designer configuration and assign it to one or more WooCommerce products or variations.

Product construction 25 min

Install free plugin Download ZIP

Guide overview

Create the reusable product

Open Asuka Designer > Custom products and create a new entry. New products intentionally contain no default view.

Add every 2D side or 3D scene, then configure elements, editable areas, markers, variations, parameters, pricing rules, and customer permissions.

Name the product for administrators.

Add and verify views.

Reusable 2D custom product in the WordPress product builder. — Add and review every product view before assigning the configuration to WooCommerce.

Choose the customer template and theme.

Designer template module placement in WordPress administration. — Templates decide where customer tools appear on desktop and mobile.

Publish only after the storefront preview is complete.

Publication validation checks for a WordPress custom product. — Resolve blocking checks before exposing the product to customers.

Link WooCommerce

Use the Asuka Designer panel on the WooCommerce product edit screen. A simple product can use one configuration; each WooCommerce variation can point to a different custom product.

On the storefront, the designer replaces the product image area and reuses the native quantity and add-to-cart flow.

Save the product link.

Asuka Designer assignment panel on a WooCommerce product. — Link one reusable custom product or map a different configuration to each variation.

Test every commerce variation.

Variation builder for configurable product parts in WordPress. — Test every product and commerce variation before publishing.

Add a design to the cart.

WooCommerce product page with AsukaDesigner, product options, quantity, and add-to-cart controls. — A linked WooCommerce product keeps the designer and native purchase controls in one product page.

Open Edit customization from the cart.