Mockup contents
Notes on the mockup
Everything we would change, and why, page by page. Each page starts with a short note on what it is and what to try. All wording on the pages is placeholder and will be written with you. The Why notes are written for Meraki and read top to bottom in about ten minutes; the Build notes under them are for the developer and say how each piece is made and which part of the project outline it comes from.
1 Why2 Build3 Both44 notes, 42 with a Why and 39 with a Build
Contents: Home, Marquees, Individual marquee, Additional Hire, Your Quote, On every page
Home
Open the page with the notes on
1WhyThis is the front page. Type a guest count in the box and press Find a size: the Marquees page opens showing only the sizes that fit. Then come back here and look at the page as a whole: the bits in dashed boxes are the bits waiting on you. All the wording on every page is placeholder; the final words will be written with you.
3WhyWhat you do, where you are and what it costs from. All three are true today and come from your site. The big photograph is not: it is the one marquee, dressed, at dusk, lit, that the whole site hangs off. Roughly half of this page is waiting on you: that photograph, three reviews, and one written-up wedding with its photos. Everything else on the page is built from what is already on your site. This is the biggest job on your side, and nothing we build makes up for it.
BuildFront page template. Headline, sub-line and the two facts are ACF fields on the page. From-price is read from the cheapest product in the Marquees category, not typed. Hero image: a single field, 3:2, output with srcset and width/height. Until the photograph exists the placeholder carries the logo's ridge line so the page reads as designed rather than empty.
Outline: §2.4 Page functions (Home, priorities 1, 3 and 4); §2.5 Imagery (Hero; Real weddings); Open questions for the client, 3 and 4
4WhyThe question every customer starts with, so it is the first thing they can do. Type 120 and the Marquees page opens showing only the sizes that seat 120, using the capacities you already have. Your site now lists thirteen marquees and leaves the customer to work it out.
BuildA plain GET form to the Marquees archive with guests and mode in the query string; the archive's filter reads them on load. No JavaScript needed here.
Outline: §2.4 Page functions (Home, priority 2); §3 Finding and choosing (Guest-count filter); §1 What problems does it solve, for the customer
5WhyThree reviews from people who hired from you, in their words. We do not have any yet and we will not write any: they come from wherever yours live now, Google, Facebook or emails, with the name and the date. Nothing on your site today shows that anyone has had a good experience, and for a couple spending this much that gap is the first thing they notice.
BuildThree ACF repeater rows on the front page (quote, name, date, source), or pulled from Google Business Profile if that is where they live. Rendered as placeholders until supplied; nothing invented.
Outline: §2.4 Page functions (Home, priority 3); §3 Trust and persuasion (Reviews; Testimonials); §2.1 Site owner's goals, 6; Open questions for the client, 4
7WhyOne real wedding, written up: the marquee you used, how many came, the venue, a few photographs and a line from the couple. This block is a template; the bracketed values are examples, not a real event. When you have one, it takes a few minutes to publish and needs no developer. It is the single most persuasive thing the site could carry, and the current site has nothing like it.
BuildA Real Wedding custom post type: title, date, marquee (relationship field to the product), guest count, venue, gallery, a quote and attribution. The front page shows the most recent, or one pinned with a checkbox. Marquee link is real: it goes to the product used.
Outline: §2.4 Page functions (Home, priority 4; Real Weddings); §3 Trust and persuasion (Real weddings); §2.2 Running the business (publish a real wedding); §2.5 Imagery (Real weddings); Open questions for the client, 3
8WhyFrom arriving to a confirmed date in four plain steps, so a nervous couple knows what happens next. The last one is new: you check the date against your diary before confirming, so the same weekend cannot be promised twice. The wording is a draft for you to change.
BuildBlock pattern, four ACF rows (heading, line). Draft copy. Step 4 describes the admin-side diary check in §2.3; the public availability calendar is Phase 2 and is not promised here.
Outline: §2.4 Page functions (Home, priority 5); §2.3 Phase 1 (Event date; Availability); §2.1 Site owner's goals, 3
9WhyYour phone, email, address and hours, right on the front page for the person who would rather ring. All real, from your site today.
BuildSame ACF options fields as the footer; one source, two places.
Outline: §2.4 Page functions (Home, priority 6; Contact)
Marquees
Open the page with the notes on
1WhyThis is the Marquees page: all thirteen sizes, with a box at the top for the number of guests. Type 100 and only the sizes that seat 100 stay; switch to Standing and the list changes again. Every figure comes from your site today; the wording is placeholder and will be written with you.
3WhyType a guest count, choose seated or standing, and only the marquees that hold that many stay on the page. 100 seated leaves six of the thirteen. It uses the capacities already on your site and nothing else. Today there is no such box: thirteen entries and a customer left to work it out. Of everything in the plan, this is the change most likely to bring in more enquiries.
BuildA GET form (guests, mode, sort) so the URL is shareable and the Home page can carry a number over; JavaScript intercepts it and filters in place. Capacities come from the two ACF fields on each product, the same ones shown on the product page. In WordPress this is a product archive template with a small script over the rendered cards, or a WP_Query with a meta_query on the capacity field for the no-script fallback. Sort by size and by price are the same order for this range, so one control.
Outline: §2.4 Page functions (Marquees, priority 1); §3 Finding and choosing (Guest-count filter); §2.2 Finding the right marquee; §1 What problems does it solve (Customers can't find the right size)
4WhyEvery size on one page: how many it holds, the price, a photograph, and Add to Your Quote. Prices and capacities are real. The photographs need to be the same shot of each marquee from the same angle, or the sizes stop comparing honestly; that is the set to brief a photographer on first. The Roundhouse has no price, so it says so and offers an Enquire button instead.
BuildCards are rendered from product data: name, seated and standing fields, regular price, featured image. No card markup is hand-typed (the 12 × 12m lesson). Twelve products in the Marquees category plus the Roundhouse, which is a product with no price and an enquiry link. The canopy is not a marquee and lives on Additional Hire.
Outline: §2.4 Page functions (Marquees, priority 2); §3 Finding and choosing (Capacity data on every card; Size comparison); §2.5 Imagery (Marquee product shots); Open questions for the client, 6
5Allowing for a dance floor and a barShow on the page
WhyA seated figure assumes tables and chairs and not much else. A dance floor, a bar and somewhere for the caterers each take space, so a wedding of 100 often needs the next size up. Your own page already says the 12 × 18m does 150 with room for a dance floor, DJ and bar; this says the same thing for every size. The wording is a draft for you to check.
BuildA block pattern the owner edits. Draft copy: the two general paragraphs are ours and should be checked against how Meraki actually advises; the 12 × 18m and 9 × 13.5m lines are lifted from the live product pages. Consider a per-product field later (a recommended guest count with a dance floor) so the filter can use it.
Outline: §2.4 Page functions (Marquees, priority 3); §3 Finding and choosing (Sizing guidance); §2.2 Finding the right marquee (someone unsure what I need)
7WhyFor someone who scrolled past the box at the top: type a guest count here and the list above narrows. Same box, second chance.
BuildBlock pattern shared with Additional Hire and FAQs. On this page it submits to the same filter.
Outline: §2.4 Repeated content (Enquiry prompt)
Individual marquee
Open the page with the notes on
1WhyThis is what a single marquee's page would look like, using the 12 × 12m. Try Add to Your Quote, then open Additional Hire from the top of the page: the matting and lighting prices will have filled themselves in. Every other size is listed further down, and the Roundhouse is at the bottom. The wording throughout is placeholder and will be written with you.
3WhyHome, Marquees, 12 × 12m: a customer can see where they are and get back to the full range in one tap. Google reads this line as well and uses it to understand how your site fits together.
Buildwoocommerce_breadcrumb() with its defaults filtered to use the site's own names (Marquees rather than the category slug), plus BreadcrumbList schema.
Outline: §2.4 Navigation principles (Breadcrumbs); §3 Technical foundations (SEO)
4WhyA photograph goes here, with three smaller ones under it. We would need the same four shots of every marquee, from the same angle each time, or the range ends up looking like a patchwork and the sizes stop being comparable. This is the biggest job on your side. Your current photos are close-ups of rope and poles: lovely, but they do not show anyone what they would be hiring.
BuildWooCommerce product featured image plus gallery images, output as real img elements with srcset at 400, 800, 1200 and 1600px, WebP with JPEG fallback, width and height set, lazy loading below the fold (§2.5 Imagery, Technical). The four shots per marquee: exterior dressed at dusk, exterior empty, interior dressed, interior empty, all 3:2 from the same angle.
Outline: §2.4 Page functions (Individual marquee, priority 1); §2.2 Finding the right marquee; §2.5 Imagery (Marquee product shots)
5WhyThe four things a customer needs before they decide, kept together: how many it holds, the price, the size and the button. It stays on screen while they scroll; on a phone the price and button sit at the bottom the whole time. On your site now the capacities are typed into the wording of each page, so nothing else can use them, which is why there is no way to search by guest count today.
BuildReplaces WooCommerce's single-product summary (the woocommerce_single_product_summary hooks in content-single-product.php). Seated and standing capacity, ridge height and floor area are ACF fields on the product, not description text; the same fields drive the guest-count filter on the Marquees index. Price is the product's regular price. Quantity and button are Woo's own add-to-cart form so cart fragments fire. Sticky on desktop; on mobile a fixed bar at the foot of the screen repeats the price and button. Product title is 40px, deliberately off the 52px scale step: the panel cannot take it.
Outline: §2.4 Page functions (Individual marquee, priorities 2 to 4)
6WhyHow many the marquee holds, seated and standing, for every size. A couple planning a sit-down meal for 100 can see straight away that the 9 × 13.5m does it and the 9 × 9m does not. You already have these numbers for every marquee; they are just typed into the text today.
BuildTwo ACF number fields on the product: seated capacity and standing capacity. Figures from each live product page. Icons echo the seated and dancing figures the live site already uses; one SVG symbol each, referenced with use.
Outline: §2.2 Finding the right marquee; §3 Finding and choosing (Capacity data on every card)
7WhyThe hire price, shown the same way here as in the quote, so there is no surprise at the end. Right now we do not know whether your £1,500 is with or without VAT: your price list says +VAT, the marquee pages say nothing. That is the first thing to settle, because it changes every figure on the site.
BuildShown exactly as the live product page shows it (£1,500). VAT basis unconfirmed: VERIFY, then set WooCommerce's tax options (prices entered inclusive or exclusive; display inclusive in shop and cart) to match. No template work depends on the answer.
Outline: §1 What problems does it solve (VAT invisible until the final step); §2.3 Phase 1 (Pricing display); §2.2 Building a quote
8WhyThe button says Add to Your Quote, and the quote is called Your Quote everywhere else too. The quantity lets someone take two of the same size for a linked setup. Your site uses eight different names for the same basket, which is confusing at exactly the moment someone is about to commit.
BuildWoo's add-to-cart form; button text set with the woocommerce_product_single_add_to_cart_text filter. Adding announces through a polite live region so screen reader users know it worked (§2.5 Accessibility, the quote builder). Quantity is Woo's quantity input, restyled as a stepper.
Outline: §2.4 Navigation principles (One word for the quote, everywhere); §2.2 Building a quote
9WhyThe measurements, and a floor plan drawn to scale from them. A planner or a venue can check the marquee fits the lawn before anyone drives out to look. The plan draws itself from the measurements, so it can never be out of date.
BuildTable from the product fields: width, length, ridge height, floor area, capacities. The floor plan is inline SVG generated from the width and length fields; it is not a client asset. The 3m grid is a drawing convention, not a claim about pole positions.
Outline: §2.2 Finding the right marquee (planner story); §2.1 External users' goals (Venues, planners and caterers)
10BuildWooCommerce product description field. Copy is from the live product page with typos corrected. The live 3 × 4.5m product page repeats the 12 × 12m text by mistake, so that marquee's line is taken from the live Marquees page instead.
11WhyYour side-on drawing of each marquee goes here; it is what a planner sends to a venue. Two questions for you: do the drawings stay as they are, or get redrawn to match each other? And does the dinosaur stay? He is on every technical drawing on your site, which is charming, but a couple looking at wedding marquees might not read it that way. Your call.
BuildACF image field on the product. §2.5 asks for the drawings redrawn with a consistent line weight and a human scale figure; the T-rex is open question 7. Not supplied: placeholder.
Outline: §2.4 Page functions (Individual marquee, priority 5); §2.5 Imagery (Elevation drawings); Open questions for the client, 7
12WhyWhat the price includes: delivery, putting it up and taking it down, walls and doors, and so on. A customer who can read this does not need to ring to ask, and does not get a surprise later. It is not written down anywhere on your site today, so these are questions for you rather than answers from us.
BuildA shared block (one list reused on every marquee) or a per-product ACF repeater if it varies by size. The list is a commitment about what the hire includes, so nothing is drafted: VERIFY with the client.
Outline: §2.4 Page functions (Individual marquee, priority 6); §2.3 Phase 1 (Content: what's included)
13Extras offered on the marquee's own pageShow on the page
WhyThree extras offered right here: matting, lights, and the dance floor that suits this size. Coir Matting is 20% of the marquee, so it cannot show a pound figure until a marquee is chosen; add the 12 × 12m and it turns into £300. Today a customer has to go to a separate page to find any of these.
BuildWoo cross-sells per product, or the simpler rule used here: always Coir Matting and Fairy Lights, plus the dance floor the live site recommends for this range (3 × 3m for the 6m marquees, 4 × 4m for 9m, 5 × 5m for 12m). Rows read from the same product data as the Additional Hire page.
Outline: §3 Finding and choosing (Suggested extras); §2.4 Page functions (Individual marquee, priority 7); §3 The quote builder (Honest pricing display)
14WhyThe size below, the size above, and the whole range. Someone who finds the 12 × 12m too big goes to the 9 × 18m in one tap rather than back to the list. Every size here comes straight from your list of marquees rather than being typed in by hand, so a button cannot quietly stop working the way the 12 × 12m one did for a while.
BuildNeighbours by menu order in the Marquees product category, rendered from product data. No product markup is hand-typed.
Outline: §2.4 Navigation principles (No dead ends); §3 Finding and choosing (Size comparison); Scope of change (Current state: what has already been fixed)
15WhyThe Roundhouse has no price, so it cannot go in the quote. It gets an Enquire button instead, so a customer who wants it has somewhere to go; on your site it is the one marquee with no button at all. If you would rather give it a price and put it in the quote like the others, that is a small change. Your call.
BuildShown as a product with no price and an Enquire button that opens the contact form with the product pre-filled. The alternative is a priced product in the quote builder like the others. Capacity figures from the live Marquees page.
Outline: §2.4 Navigation principles (No dead ends); Open questions for the client, 6
Additional Hire
Open the page with the notes on
1WhyThis is the Additional Hire page: everything on one page, nothing behind a tab. If you added the 12 × 12m on the marquee page, the percentage items now show prices in pounds. Take the marquee out of Your Quote (the button at the top) and watch them go back to percentages. The item descriptions are from your current site; the rest of the wording is placeholder.
3Extras priced as a share of the marqueeShow on the page
WhySome extras are a share of the marquee price: coir matting is 20%, fairy lights 10%. Until a marquee is chosen they say so; once one is in the quote, every one of them shows pounds, and if the marquee changes, so do they. On a 12 × 12m, matting is £300; add a 6 × 9m as well and it becomes £400. This works on your site today, since September's fix, and the new site keeps it.
BuildPercentage-priced extras calculate from the marquee subtotal and recalculate on every basket change. This works on the live site today, via a custom plugin written during the September 2026 remediation. The 2015 build cannot do it natively. The rebuild must implement this deliberately rather than assume it migrates: losing working pricing in a migration is how the original fault arose.
How: a product field, pricing basis = percent, with the rate. On the live site the rate is stored in the price field, so Coir Matting is literally a £20.00 product that the plugin reinterprets as 20 per cent; that is the 2015 convention and it needs a field of its own in the rebuild. A woocommerce_before_calculate_totals hook sets each percentage line's price to rate × the sum of lines in the Marquees category, on every recalculation, for any number of marquees at any quantity. With no marquee the line is £0.00 and checkout is blocked (§3 Guard rails). Rows on this page read the same figure from the cart fragment, so the page and the basket cannot disagree. Signed off against the §2.3 Migration table before launch.
Whether a 3 × 6m canopy on its own should count toward that subtotal is undecided: on the live site it is not in the Marquee category, so it does not. One line either way, but the client decides.
Outline: §3 The quote builder (Honest pricing display; Percentage pricing); §2.3 Phase 1 (Pricing display); §2.4 Page functions (Additional Hire, priority 3); Scope of change (Current state: what has already been fixed)
4BuildIn-page anchor list generated from the category terms. Not in the outline: a navigation aid for a page with 45 items on it, so it carries no Why note.
5WhyAll 45 extras on one page, in groups, with nothing to click open. Each one says how it is priced: a figure, a figure per item, or a share of the marquee. Your site has nine tabs, and a customer has to open each one to find out what is in it.
BuildProduct category archive override (archive-product.php, or a custom page template) that loops the categories in the outline's order and lists the products in each. Categories are Woo product categories the owner edits; each row is one product.
Live tabs merged: Chairs and Tables into Furniture; Sound and Games into Sound & Entertainment.
Hardstanding (able and unable to drill) and Soft Standing do not appear on the live Additional Hire page or price list; they exist as products and only surface at the basket. They are placed under Technical Installation here, and the client should say whether they belong there or under Flooring & Matting. Their one-line descriptions are draft copy for the client to replace.
Canopy is not in the outline's site map. It is shown as its own group because it is a live category, and it does not count toward percentage pricing.
Pitch In (§3 The quote builder) is left out of the mock: eight products, all £0.00 except one at minus £20, five of them sharing two names. The data needs sorting before anything is designed against it.
Every row has a 44px control with spacing (§2.5 Touch targets). Product names are the live product names, typos included (Chivari, Uplifters, Pully, Sounds System); correct them in the product data, not the template.
Outline: §2.4 Page functions (Additional Hire, priorities 1 and 2); §2.4 Site map (Additional Hire: categorised, open by default); §2.5 Accessibility considerations (Touch targets)
6WhyFor someone who got this far without choosing a marquee: type a guest count and go straight to the sizes that fit. Better than leaving them at the bottom of a long list with nowhere to go.
BuildBlock pattern. The form sends the guest count to the Marquees index as its filter (page 4, not in this round).
Outline: §2.4 Repeated content (Enquiry prompt)
Your Quote
Open the page with the notes on
1WhyThis is Your Quote: the basket, under the one name it has everywhere. Change a quantity, take something out, or take the marquee out altogether and watch the matting and lights drop to zero with a line saying why. The delivery and VAT lines are blank until two questions are answered; they are the two most important questions in this document. The wording is placeholder and will be written with you.
3WhyEvery item on its own line, with the quantity right there to change. The percentage items say what they are a percentage of, so £400 for matting is not a mystery: it reads 20% of your £2,000 marquee hire. On your site the customer sees the figure without the working.
BuildOverrides WooCommerce's cart template (woocommerce/cart/cart.php). The table markup is ours but Woo's form, nonces and quantity field names are kept, so its update-cart and remove actions work unchanged; quantity changes post through Woo's AJAX. Lines are grouped by product category (Marquees, then everything else). Percentage lines carry no quantity control: one per quote is assumed and needs confirming with the client.
Outline: §2.4 Page functions (Your Quote, priorities 1 and 2); §2.2 Building a quote (more than one marquee, change quantities; percentage extras show actual pounds)
4WhyDelivery worked out from the venue postcode and added to the quote, so the figure the customer sees is the figure on the invoice. Your site does this today, since September, measured from Fakenham. The new site keeps the same distance bands rather than inventing new ones.
BuildThe distance bands from Fakenham live in the remediation plugin on the current site and must be exported from its configuration, not reconstructed. The calculation was previously measuring from a blank store address and was corrected during remediation, so delivery figures quoted anywhere else are not authoritative. In the rebuild the bands become a WooCommerce shipping method (distance-banded rates) driven by this postcode field, re-verified against the plugin before launch (§2.3 Migration). Not calculated in this mock.
Outline: §2.2 Building a quote (delivery included in the total); §3 The quote builder (Delivery in the total); Scope of change (delivery now included, by distance from Fakenham)
5WhyIf the marquee is going on tarmac, concrete or sand it has to be anchored differently, and you charge 15%, 25% or 20% of the marquee for that. On a 12 × 12m that is £225, £375 or £300. On your site today those three items are not on the Additional Hire page or the price list; they exist only in the basket, so a customer cannot browse to them. This asks the question while the quote is being built.
BuildShown when a marquee is in the quote and no Technical Installation item is. The wording describes ground conditions, which is business policy: VERIFY with the client before it goes live. In the rebuild this could be one question (what will the marquee stand on?) with the three products behind it.
Outline: §3 The quote builder (Technical installation prompts); §2.4 Page functions (Your Quote, priority 5)
6WhyA quote cannot be sent without a marquee in it. Matting at 20% of nothing is nothing, so the button stays off and a line says why.
Buildwoocommerce_check_cart_items adds an error notice when the cart has extras but no Marquees-category line; the proceed button is disabled in the template and checkout refuses the cart server-side as well.
Outline: §3 The quote builder (Guard rails); §2.3 Migration (Percentage item with no marquee: priced at zero, checkout blocked)
7WhyMarquee, extras, delivery, VAT, total. What is shown here is what goes on the invoice, with nothing added at the last step. The VAT line is blank because we do not yet know whether your prices include it, and the answer changes every figure on the site. First question to settle.
BuildOverrides woocommerce/cart/cart-totals.php. VAT: the basis is unconfirmed (the live price list says +VAT, the product pages show plain prices), so no VAT figure is derived in this mock. VERIFY inclusive or exclusive, then configure WooCommerce tax display once. Delivery: see the delivery note. The total shown is before delivery.
Outline: §2.4 Page functions (Your Quote, priorities 3 and 4); §2.2 Building a quote (delivery, VAT); §3 The quote builder (VAT inclusive); §1 What problems does it solve (VAT invisible until the final step)
8WhyThe next step asks for the event date before anything else, and will not go without one. You check the date against your diary before confirming, so the same weekend cannot be promised twice. Your site lets a quote arrive with no date on it at all.
BuildWooCommerce checkout with fields customised through woocommerce_checkout_fields: event date (required, future only, a keyboard-operable picker that accepts typed input), venue address, access and ground notes. Payment gateways off: this is an enquiry, not a payment; deposits online are Phase 2. Not built in this round.
Outline: §2.4 Page functions (Submit Enquiry); §2.3 Phase 1 (Event date; Availability); §1 What problems does it solve (No availability control)
9WhyA copy of the quote the customer can send to whoever else is deciding, usually the other half or a parent who is paying. Today there is no way to send it on; they would have to write it out.
BuildNot native to WooCommerce. A small custom endpoint renders the cart as a printable page and emails it; no account needed, since customer accounts are Phase 2. Not built in this round.
Outline: §2.2 Building a quote (save or email my quote); §3 The quote builder (Email me my quote)
On every page
The top and bottom of the page, the three facts, and the quote at the side are the same on every page. Each is explained once here.
6WhyThree facts that reassure a nervous couple: your review score, how long you have been going, and that you are insured. They repeat on every page where someone is deciding. None of them are on your site today, so this box is a question: where do your reviews live, what year did you start, and what cover do you hold?
BuildBlock pattern fed by three ACF options fields. Rendered as a placeholder until the client supplies the figures: rating from the Google Business Profile API or typed by the owner with the date checked; year established; insurer and cover. Nothing here is typed by us. VERIFY all three.
Outline: §2.4 Repeated content (Trust strip); §2.1 Site owner's goals, 6; §3 Trust and persuasion
11WhyPress Your Quote at the top of any page and the quote slides in from the side, with every item and the total. A customer can change a quantity or take something out without leaving the page they are on. Your site has a side basket already, behind the small logo at the bottom left; this one opens from the total itself, which is where people look for it.
BuildNot the WooCommerce mini-cart widget: a theme template part whose contents arrive as a cart fragment, so it refreshes with every cart change. Quantity and remove controls call the Store API cart endpoints (wc/store/v1/cart/update-item and remove-item) and then refresh fragments. Percentage lines are priced server-side in the cart totals hook, so the drawer, the Your Quote page and checkout cannot disagree.
Keyboard: focus moves into the panel, Tab is trapped inside it, Escape closes it and focus returns to the button that opened it. A polite live region announces every change (§2.5 Accessibility, the quote builder).
Percentage items are fixed at one per quote in this mock. Confirm with the client whether two lots of, say, bunting should be possible.
Outline: §2.4 Repeated content (Quote drawer); §2.2 Building a quote; §3 The quote builder (Persistent quote drawer)