How an AI agent redesigned a WooCommerce homepage end-to-end — without opening Elementor.

The problem

The homepage was the standard "Astra + Elementor + Essential Addons + UAEL" stack you see on a thousand small-business WooCommerce sites. Symptoms:

• Generic template aesthetic — every section was an icon-box-heading-text-button bundle, no visual identity.
• Decorative shape dividers everywhere — green tilts, dark arrows, opacity-fans, mountain waves. Each section ended in a different geometric shape pointing into the next. 2023 maximalism.
• Broken category widget — the UAEL uael-woo-categories rendered an empty whitespace where eight WooCommerce categories should have been.
• Sitewide SEO gaps — 16 of 17 pages missing an Open Graph image; 14 of 17 missing a custom Rank Math title; cart, checkout and account pages were indexed.
• Floating fancy-text bug — the FAQ heading was rendering "Pog Vprašanja" instead of "Pogosta vprašanja" because a UAEL fancy-heading widget was stuck mid-typing animation on every page load.

The approach

The customer didn't hire a designer or developer. An AI agent (Claude, via the Claude Code CLI) connected to the AGRO ŽNIDARIČ WordPress site through the AgenticWP MCP server — a single subprocess speaking the Model Context Protocol. From there, every change was a structured tool call. No editor sessions, no FTP, no copy-paste between browser tabs.

What AgenticWP exposes that mattered here

• update_elementor_element — surgically replace a single widget's settings or its full element JSON, preserving its ID. Triggers Elementor's Document::save() so HTML and CSS stay in sync.
• patch_css — atomically write or remove a named CSS block inside astra-settings.custom-css. Idempotent. Roll back any block in one call.
• update_postmeta_multi — set Rank Math meta on many pages in one batched call. The 16-page SEO sweep ran as a single tool invocation.
• find_products / wc_rest_call — fetch real product hero photos for the carousel directly from WooCommerce, no manual image hunting.
• flush_cache — flush object, Elementor and Astra CSS caches together so changes go live without an admin login.

What got built

1. Hero with a JS-driven category carousel

Replaced the static three-button hero with a 360 × 460 floating window aligned to the boxed content's right edge, vertically centered. Inside: an 8-slide carousel of all WooCommerce categories with real product photos, autocycling every five seconds, pause-on-hover, and ‹ / › buttons plus eight clickable dots. All controlled by a 25-line inline IIFE — no external JS, no jQuery dependency.

2. Section-by-section redesign

Each of the ten homepage sections got a tailored CSS block under a unique name (homepage-2026-bestsellers, homepage-2026-section5, homepage-2026-faq, …). Removable independently. Highlights:

• Trust strip — flat icon-boxes turned into a row of equal-height white cards that lift on hover, with green-gradient circular icons and clamped 2-line titles.
• Best sellers — empty 0-star ratings hidden, sale badge re-enabled with a green→teal gradient pill, ink-black "buy" pills that turn green on hover.
• About-us — kept the existing image rotation animation (1.2° / -1.6°) but added a floating "AL-KO POOBLAŠČENI SERVIS" credibility badge with a pulsing green dot at the bottom-left of the image stack.
• Buying guide — broken white-on-white text fixed by switching the section to a clean light card with green check-circles, mid-grey body, and ink headlines.
• Service section — restructured as a semantic <ul> with custom SVG-mask checkmarks, a green recommendation note and an amber warning callout, plus a dark gradient CTA slab with green pill button.
• Testimonials — three white cards on a green→deep-green gradient bg with dot-pattern overlay, gradient avatar circles with auto-generated initials (M / A / P), 5-star ratings, and Google's actual brand-gradient G icon.
• FAQ accordion — green→teal gradient circular toggle, sweeping diagonal stripe shimmer on row hover, dark→green text transition.
• Final CTA — full-bleed cinematic photo with gradient overlay, glass contact card with masked SVG icons (location / phone / mail / clock), unified pill button trio.

3. Custom 8-icon SVG iconset for the categories grid

The original UAEL category widget rendered nothing. AgenticWP update_elementor_element swapped the widget for an HTML widget containing eight clickable cards. Each card has a custom inline SVG icon — riding tractor, robotic mower with WiFi arcs, battery push mower with lightning bolt, mulcher, chainsaw, hedge trimmer, brushcutter, crossed wrench. Duotone style, currentColor stroke + 18% accent fill, 64×64 viewBox. The agent wrote them as a coordinated set, then verified the WooCommerce permalink prefix (/kategorija-izdelka/, not the default /product-category/) by hitting one URL and confirming HTTP 200.

4. Service section as a conversion driver

The "Pooblaščeni AL-KO servis" section was the homepage's strongest selling point but visually buried — bracketed by a green tilt divider and an opacity-fan divider, with white-on-light heading text that fought the background. AgenticWP rebuilt it as a clean white section with a green-eyebrow heading, a semantic <ul> service list with green-circle SVG-mask checkmarks, an amber warranty warning callout, and a floating "✓ CERTIFICIRANO" pill on the AL-KO Partner badge image. The CTA at the bottom was upgraded to a dark-ink → teal gradient slab with a green-pill "Servisni obrazec →" button.

5. Final CTA — full-bleed cinematic photo

The bottom call-to-action was a generic photo with three competing buttons stacked vertically. AgenticWP turned it into a full-bleed cinematic CTA with a dark gradient overlay (so the gardener photo stays readable on the right), a glassy contact card with masked SVG icons for location / phone / mail / clock, and a unified pill button trio (one primary green, two glass-ghost). A small "AGRO ŽNIDARIČ · MARIBOR" brand stamp sits at the bottom-right of the section.

6. Sitewide SEO cleanup in one batched call

One update_postmeta_multi invocation handled sixteen Rank Math meta updates across the site:

• noindex robots tag on six utility pages: cart, checkout, my-account, YITH compare, cookie policy, Leanpay info — they were leaking authority for nothing.
• Custom Rank Math titles on eight previously-default pages: privacy, blog index, service order form, warranty, contact, terms, shop, blog.
• Open Graph image propagated to ten pages that were sharing without a preview image.

7. LocalBusiness JSON-LD schema

Inserted as an Elementor HTML widget on the homepage — a complete @type: Store structured-data block with PostalAddress, OpeningHoursSpecification, AutoRepair department, currenciesAccepted, paymentAccepted (including Leanpay), and the AL-KO authorized service signal. Verified live with curl | grep '@type":"Store"'.

The numbers

What "one focused session" actually means in production:

• 10 of 11 homepage sections redesigned (the 11th — a brands carousel — was hidden after the customer decided three product-photo crops weren't real logos).
• ~110 KB of custom CSS shipped to astra-settings.custom-css across 30+ named blocks, every one removable individually with patch_css mode=remove block=<name>.
• 16 SEO meta fields updated in a single batched MCP tool call.
• Eight inline SVGs generated to spec — duotone, 64×64, on-brand color tokens — with no external icon library dependency.
• Zero plugins installed. The site's existing stack (Astra, Elementor, EA Lite, UAEL, RankMath, LiteSpeed) handled everything.

What the AgenticWP guardrails caught

Two moments where the product's deliberate "no" list stopped a half-finished idea before it shipped:

• The brands strip stayed broken-by-design. The customer's three "logos" were product-photo crops with brand wordmarks. The agent could have downloaded SVG logos from the open web — but those are trademarks. The agent flagged this and pushed back: "either source proper logo files or hide the section." Customer chose to hide. Result: no fake-trademark exposure.
• No PHP edits, ever. When the FAQ heading rendered as "Pog Vprašanja", the obvious workaround was to disable the UAEL fancy-heading PHP filter via a functions.php snippet. AgenticWP doesn't expose a code-edit endpoint. The agent solved it cleanly: update_elementor_element swapped the broken widget for a static heading widget with the same ID. No code path was touched.