Most of us have an idea of how we’d like our shop to look. Getting that idea onto the screen can take rather longer.
I’ve just tested a new way to do it: give AI a mockup, ask it to recreate the design using HTML and CSS, and include real WooCommerce product blocks inside the layout.
My test looked like a slightly unhinged laboratory, complete with “scientifically wantable” stamps and a warning not to lick the product.
But the images, price and add-to-cart form? All real WooCommerce.
No extra plugin. No custom theme development. Just a layout I could paste into the product template.
The small change that opens up a lot
WordPress 7.1 added support for editable blocks inside the Custom HTML block.
That gives us an interesting combination. HTML and CSS control the design, while the blocks inside supply the product information and purchasing functionality.
So we can ask AI to create a layout with much more freedom over its structure, spacing, colours and decorative details. The product title, gallery, price and purchase options still come from WooCommerce.
And because we’re editing a template, the same design can work across different products without manually replacing their details.
Here’s the workflow
You’ll need WooCommerce, a block theme, and an editor version with support for inner blocks in Custom HTML. I tested this on WordPress.com.
1. Start with a mockup
Create a design with an AI image tool, sketch something yourself, or use a screenshot as a reference. It helps to have a clear visual target.
2. Give it to AI
Attach the mockup to your chat and paste the prompt below. It asks AI to recreate the design while keeping the working parts connected to WooCommerce.
3. Open your product template
Go to Appearance → Editor → Templates → Single Product, then switch to the template’s Code editor.
Copy the original code somewhere before changing it, so you can restore it easily.
4. Paste in your new layout
Replace the existing product section with the generated code. Keep your header and footer if you want them.
The prompt produces a complete Custom HTML block, including its opening and closing block comments, ready for the template’s Code editor.
5. Save and test a real product
Visit an actual product page. Check the images and price, try any size or colour options, and add the product to your basket. Check the mobile layout too.
If something looks wrong, send AI a screenshot and ask it to adjust the code.
The exact prompt
Attach your mockup and copy this:
Create a WooCommerce Single Product template layout that closely
matches the attached mockup.
I will paste your output into the WordPress Site Editor’s template
Code editor. My site supports the WordPress 7.1 feature that allows
real inner blocks inside a Custom HTML block.
Return one complete, copy-and-paste code snippet, wrapped in:
<!-- wp:html -->
...
<!-- /wp:html -->
Design requirements:
- Recreate the mockup’s layout, colours, typography, spacing and feel.
- Use custom HTML and CSS for the surrounding design.
- Use one root wrapper with a unique class.
- Include one <style> element, with every CSS selector scoped to
that wrapper.
- Make the layout responsive, with stacked columns on mobile.
- Avoid horizontal overflow.
- Use no JavaScript, external libraries or custom PHP.
- Maintain readable contrast and visible keyboard focus styles.
- Do not include a site header or footer.
WooCommerce requirements:
Use real nested WordPress/WooCommerce blocks for dynamic product
content. Insert their block comments directly inside the HTML
where each element belongs.
Use these exact blocks:
Product gallery:
<!-- wp:woocommerce/product-image-gallery /-->
Product title:
<!-- wp:post-title {"level":1,"__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->
Product price:
<!-- wp:woocommerce/product-price {"isDescendentOfSingleProductTemplate":true} /-->
Product short description:
<!-- wp:post-excerpt {"excerptLength":100,"__woocommerceNamespace":"woocommerce/product-query/product-summary"} /-->
Purchase form:
<!-- wp:woocommerce/add-to-cart-form /-->
Also include store notices:
<!-- wp:woocommerce/store-notices /-->
Do not hardcode product names, prices, product images, stock
information or product descriptions. They must come from the
current product.
Keep the real WooCommerce add-to-cart form so that quantity,
variations and purchasing continue to work. Do not replace it
with a decorative button or a hardcoded add-to-cart link.
Do not use placeholder tokens such as {{product_price}},
shortcodes, or anything requiring an additional plugin.
You may add static decorative text to match the mockup, but do
not invent reviews, discounts, delivery promises or product claims.
Return only the complete code.
Make it yours
The first result doesn’t have to be the finished design. Ask for bigger product photography, a calmer colour palette, a more compact mobile layout, or something that better fits your brand.
Keep telling AI to preserve the real WooCommerce blocks as it makes those changes.
I’m not claiming a new design will automatically sell more products. But being able to try a distinctive product page in minutes makes experimentation much easier.
And your shop probably deserves a little more personality. Even if you decide against the laboratory.
Leave a Reply