How to Make an E-commerce Website with Claude Code and WordPress (Full Prompts)

This is a real client store: GSI Cricket, a cricket bat maker in Kashmir since 1950. Claude Code designed it, added all 26 products with their sizes and prices, built the category and product pages, the cart and checkout, and took it live on Hostinger. The WordPress conversion itself took about an hour, two at most.

And it isn’t a page-builder site. Every section is a normal WordPress block, so the client can change text, swap photos and move sections in the block editor. Below are the exact prompts I used, step by step, so you can build your own.

Watch the video · 14 min

Prefer YouTube? Watch it there and subscribe for new videos.Watch on YouTube

Step 1: give Claude the brief and get an outline

Put everything the client gave you in one folder: the logo, the product list with sizes and prices, any photos. Then open Claude Code in that folder. My client gave me almost nothing, just the business name, the logo, the products and their Instagram and YouTube. That’s enough: Claude researches the rest.

Fill in the words in capitals, and add a line for each homepage section you already have in mind.

📋 Prompt 1 — the brief — copy everything in the box below

@"YOUR PROJECT FOLDER"
BUSINESS NAME
One or two lines from the client: what they make or sell, since when, and where.

The logo is in the folder. The client has listed their product categories, and each product with its variations (sizes, prices), in the folder too.

Instagram: INSTAGRAM LINK
YouTube: YOUTUBE LINK
Google reviews: GOOGLE MAPS LINK

The client hasn't given anything else, so research the business and its competitors, and draft an outline for the website.

HOMEPAGE
Hero: one or two lines that say what they do, and a quick way into the products. BEST SELLER sells the most, so lead with it.
Then top picks, then categories, then real reviews from their Google page.

It's a WooCommerce shop. Every product needs Add to cart and Order on WhatsApp (WHATSAPP NUMBER).

Never invent facts about the business. Mark anything you couldn't confirm so I can check it with the client.

Read the outline properly. This is where you correct it: a headline that uses a town nobody outside the region knows, a section the client doesn’t need, an order you’d rather change. Reply in plain words until it’s right.

Step 2: the content file and the design prompt

When the outline is right, ask for two files. The content file holds every word of every page. The design prompt is what you paste into Claude Code to get the first design. I keep them separate so I can change the look without touching the copy.

📋 Prompt 2 — content file and design prompt — copy everything in the box below

The outline is approved. Write two files in this folder:

1. CONTENT.md: every section of the Homepage, one category page and one single product page, in order. For each section: the copy word for word, the layout, and which photo goes there (a real one from the folder, or one we still need).

2. DESIGN-PROMPT.md: a prompt I can paste into Claude Code to design those three pages from CONTENT.md. It will become a WordPress block theme with WooCommerce, so every section must be something WordPress can build and the client can edit.

Use the client's real facts only.

Here’s the design prompt in a form you can reuse for any shop. Claude writes a longer, client-specific one in Step 2, but if you want to skip that, this works on its own.

📋 Prompt 3 — the design prompt — copy everything in the box below

Design BUSINESS NAME, an online shop. It will be built as a WordPress block theme (Gutenberg) with ACF PRO and WooCommerce, so every section must be something WordPress can build and the client can edit.

Build a static HTML/CSS/vanilla JS prototype of three pages: the Homepage, a category page (CATEGORY) and a single product page (PRODUCT). Read CONTENT.md first: copy word for word, layout and images. The logo is in the folder.

Look and feel
- Premium, big and easy to use. Big split sections (50/50 or 60/40) with one large photo against confident type, alternating sides. On phones, text comes first after a photo. Never three sections in a row with the same layout.
- Colours from the logo. One accent colour for buttons, prices and active states. Write the contrast ratios into the CSS comments (WCAG AA).
- A display font with character and a clean body font, self-hosted.
- Restrained motion: scroll reveals and hover lifts. No loading screen, no smooth-scroll library. Respect prefers-reduced-motion.
- A menu with the main categories, breadcrumbs on inner pages, sticky filters on the category page, a sticky buy box on the product page, and a bar at the bottom on phones: Shop, Search, WhatsApp, Cart.
- Every product shows Add to cart and Order on WhatsApp side by side.

WordPress rules
- Every word is in the HTML: nothing in CSS content, in images, or added by JavaScript.
- Colours, type sizes, spacing and radii are tokens in :root. No hardcoded colours or pixel values in components.
- Each look is one class, so it can become a block style.
- Product grids, the category product list, the product gallery and the buy box come from WooCommerce. Mark them as WooCommerce templates; don't hardcode products.
- Header, footer and the phone bar are theme parts. Phone, address and social links appear once.
- Plain JavaScript only, one small deferred file per feature.
- If the block-theme-conversion skill is installed, follow its prototype-for-conversion.md so the conversion is one import.

Speed, SEO and accessibility
- Fast on phones: WebP images with width and height set, lazy-loaded below the fold.
- One H1 per page, with the page's focus keyword in the H1, the first paragraph, one H2 and one image alt.
- A skip link, visible focus, 44px tap targets, and no sideways scrolling at 320px wide.
- Check every page at 375, 768, 1024, 1280 and 1600 wide.

Show me the three pages, screenshots at 1440 and 390 wide, and a short note on the fonts, the colours and one decision per section.

Step 3: fix the first design, one section at a time

The first design is never the final one. On GSI the hero was too busy, two homepage sections repeated what the category pages already did, one button looked wrong, and the spacing between sections wasn’t even. That’s normal. Make a list, then fix it section by section, so nothing you already like gets changed along the way.

📋 Prompt 4 — change one section — copy everything in the box below

Page: HOME / CATEGORY / PRODUCT. Section: NUMBER AND NAME. Keep everything else exactly as it is.
What I want: YOUR IDEA, A LINK OR A SCREENSHOT.
Keep the copy word for word, the design tokens, and the WordPress block it maps to (or tell me if the change needs a different block, and why).
If there's more than one good way to do it, show me 2 or 3 options and say which you'd pick. Check the section at 390 and 1440 wide.

Then one pass over everything, for the small things your eye stops seeing:

📋 Prompt 5 — spacing and content check — copy everything in the box below

Check all three pages at phone, tablet and desktop widths:
- the space between sections, and between each heading and its text
- font sizes and line heights, and headlines that wrap badly
- buttons and links at least 44px tall on phones
- the copy: does it read naturally, with nothing that sounds like AI wrote it?
Fix each cause once, in the shared CSS, not section by section. List what you found and what you changed. Don't change the wording without asking me.

Step 4: set up Local WP and install the kit

I always build on my own computer first and only go live when everything works. In Local WP: Create a new site, give it a name (mine was gsi, so the address is gsi.local), keep the defaults. That’s the whole setup.

Then download the AI WordPress Kit (free, or pay what you want) and let Claude install it:

📋 Prompt 6 — install the kit — copy everything in the box below

Unzip the AI WordPress Kit from Downloads, copy skill/ to ~/.claude/skills/block-theme-conversion, then install theme.zip and blocks.zip on my Local WP site

Make sure ACF PRO is active. I always recommend it for sites like this, and I use it with a developer licence: if you build sites for clients, it’s worth it. If you want a free option, ask Claude to install Secure Custom Fields from WordPress.org instead. It runs everything in the kit.

Step 5: convert the design into WordPress

This is the step the kit is for. The skill turns each section of the design into a real block: core WordPress blocks where they fit, a block from the plugin where they don’t. It makes the child theme, builds the pages in code, and checks every page against the design.

📋 Prompt 7 — the conversion — copy everything in the box below

Use the block-theme-conversion skill to convert the prototype in PROTOTYPE FOLDER into WordPress on my Local site SITE.local. This is the first e-commerce conversion.

It's a WooCommerce shop: install WooCommerce and any other plugins it needs, create the categories and products from CONTENT.md, and build the homepage, category and product pages. Orders also come through WhatsApp, so it doesn't need a contact form plugin.

Build the policy pages as well (terms, refunds, shipping, privacy) as drafts for the client to confirm.

Make everything work on SITE.local, and check every page at phone, tablet and desktop widths.

On GSI that one prompt gave me the homepage, the policy pages, all categories and products, the menus, SEO titles, and the plugins installed. A few small things were off, like the step numbers not quite centred, and I listed those in one message to fix. Then test it like a customer: choose a size, add to cart, open the cart, go to checkout.

Open any page in the editor to see what the client gets: click a heading and type, drag a section up or down, swap a photo. No page builder.

Step 6: go live on Hostinger

My client had already picked Hostinger. I’m an affiliate, their support has been good, and they have an MCP server, so Claude Code can upload the site itself.

In Hostinger: Websites → Create website → WordPress, choose your domain, pick the server location, and choose Build from scratch. That gives you a fresh WordPress. Then connect Claude Code to your Hostinger account. In hPanel, search for API, create a new token, and run this in your terminal:

📋 Command — connect the Hostinger MCP — copy everything in the box below

claude mcp add hostinger -e HOSTINGER_API_TOKEN=YOUR_TOKEN -- npx -y @hostinger/mcp

Restart Claude Code, then:

📋 Prompt 8 — go live — copy everything in the box below

WordPress is installed on DOMAIN on Hostinger. Use the Hostinger tools to upload and install the parent theme, the child theme and the plugins from my Local site SITE.local, exactly as they are there. Then tell me what's left for me to click in wp-admin.

Don't change DNS, billing or anything outside this website without asking me first.

What was left for me took about two minutes:

1. Tools → [Site] Setup: tick Overwrite and click Run setup. This imports the photos, products, categories, pages and menus Claude built locally.
2. Settings → Reading: set the homepage to the static page Home, if it isn’t already.
3. Settings → Permalinks: choose Post name and save.

Using another host? Ask Claude Code to use your browser, or upload the theme and plugin zips by hand under Appearance → Themes and Plugins. I made my other sites live that way. And once the site is live, delete the API token in hPanel: it gives full access to your account.

Step 7: add payments

Use whichever gateway fits the client. GSI is in India, so they use Razorpay:

• Install Razorpay for WooCommerce from Plugins → Add New.
• In the Razorpay dashboard: Account & Settings → Website and app settings → API keys. Generate a key ID and key secret.
• Paste them into WooCommerce → Settings → Payments → Razorpay. Use test mode first and place one test order, then switch to live keys.

For cards anywhere else, Stripe works the same way (the WooCommerce Stripe plugin), and so does PayPal. Each is a plugin and a pair of keys.

Step 8: SEO and a phone check

Claude installed Yoast SEO and wrote a title and description for every page, category and product. I sometimes use Rank Math instead; either is fine. Last, open the site on a real phone: the menu, search, a product, the cart. It should all work the way it did on Local, because it’s the same site.

Why I build this way

I’ve tried a lot of ways to turn an AI design into WordPress over the last year: conversion plugins, page builders, ACF templates. This one is my favourite. The design stays what Claude made, and the client still gets a site they can edit themselves. I’ll go through why, and what the other ways got wrong, in the next video.

Get the kit: the skill, theme and blocks I used here are free on Gumroad: AI WordPress Kit. It’s a starter, so after each site, ask Claude to add what went wrong to the skill. That’s how mine got good.

Affiliate disclosure: the Hostinger link above is an affiliate link. If you buy through it, I earn a small commission at no extra cost to you. Questions? Comment on the video on my YouTube channel.