WooCommerce Store Design: How to Build Product Pages and a Checkout That Sell

By Shane Snyman, JWD Website Design Updated 25 September 2026

A WooCommerce store can have great products, fair prices and a working payment gateway, and still not sell. Usually the problem is design: shoppers cannot find what they want, the product page leaves questions unanswered, or the checkout is a struggle on a phone.

This guide is about designing a WooCommerce store that sells. It covers how to structure your categories, what a strong product page needs, how to handle product photos, and how to make the cart and checkout as easy as possible, especially on mobile.

It is not a guide to what WooCommerce costs or how to set it up. For that, read our complete WooCommerce guide for South Africa. If you are still choosing a platform, see WooCommerce vs Shopify in South Africa, and for the bigger picture on platforms, payments and shipping, our e-commerce website design guide.

Start With How Shoppers Find Products

Before you think about colours and fonts, think about how someone gets from your home page to the product they want. If that journey is confusing, nothing else on the page matters.

Keep your categories simple

Group products the way your customers think, not the way your stock room is organised. A shopper looks for “women’s running shoes”, not “Supplier B, range 4”.
Keep it shallow. Two levels (for example Clothing, then Jackets) is easy to follow. Four levels deep is where people get lost.
Avoid near-empty categories. A category with one product feels like a dead end. Merge small groups until you have more stock.
Give each category a short intro so shoppers, and search engines, know what they are looking at.

Put your main categories in the menu, in plain words.
Add a search bar if you have more than a handful of products, and make sure it is easy to find on mobile.
Use filters (size, colour, price) only where they genuinely help. A filter with one option in it is noise.

Design Product Pages That Answer Every Question

In a physical shop, a customer can pick a product up and ask you about it. Online, the product page has to do that job. Every unanswered question is a reason to leave.

What every product page needs

A clear product name that says what it is, not just a code.
The price, easy to see, including what it is for (per item, per pack, per metre).
Good photos, covered in the next section.
A short description near the top with the key facts a buyer needs to decide.
Detail further down: sizes, materials, dimensions, what is in the box, care instructions.
Stock status, so no one gets excited about something that is sold out.
Delivery information, or a clear link to it. “How long will it take and what will it cost?” is one of the first things a shopper wants to know.
One obvious Add to Cart button that stands out from everything else on the page.

Make variations painless

If a product comes in sizes or colours, WooCommerce handles these as product variations. From a design point of view:

Make it obvious that a choice is needed before adding to cart.
Show the photo of the colour the shopper picked, where you have one.
Include a size guide link right next to the size options, not hidden in another menu.

Build trust on the page

Shoppers buying from a store for the first time want reassurance. Useful touches include your returns policy in plain words, the payment options you accept, real reviews where you have them, and a way to contact you with a question.

Product Photos: The Biggest Design Decision in Your Store

Online, your photos are the product. Shoppers cannot touch or try anything, so the photos have to show it properly.

Be consistent. The same background, lighting and angle across a category makes the whole store look professional and makes products easy to compare.
Show more than one angle, plus a close-up of details like texture, stitching or labels.
Show scale. A photo of the product in use, or next to a familiar object, answers “how big is it?”
Use the same shape for all product images (square works well) so category grids line up neatly.
Compress your images so pages load quickly, especially for shoppers on mobile data.

You do not need a studio. A phone camera, natural light from a window and a plain background get you a long way, as long as every photo is taken the same way.

The Cart: Keep Shoppers Moving

The cart is where a shopper decides whether to carry on. Design it to reassure, not to distract.

Show a clear summary: product photo, name, variation, quantity and price.
Make it easy to change quantities or remove an item.
Show delivery costs as early as you can. A surprise at the last step is one of the quickest ways to lose a sale.
Keep one clear button to continue to checkout.

Checkout: Remove Every Bit of Friction

By the time someone reaches checkout, they want to buy. The job of the design is to get out of the way.

Offer guest checkout. WooCommerce has a setting that lets customers place orders without creating an account. Forcing an account on a first-time buyer is a common reason people leave. You can still offer to create an account during checkout.
Ask only for what you need. Every extra field is one more thing to type on a phone.
Show the payment options clearly, with familiar names shoppers recognise.
Keep the order summary visible, so buyers can see what they are paying for.
Make errors helpful. If a field is wrong, say which one and why, right next to it.

Design for the Phone First

Many of your shoppers will browse and buy on a phone, so test every part of the store on one before you launch.

Buttons big enough to tap with a thumb
Text you can read without zooming
Product photos that can be swiped through
A menu and search that are easy to reach
Checkout forms that bring up the right keyboard (numbers for a phone number, email layout for an email address)

The simplest test is the best one: buy something from your own store on your own phone, start to finish. Anything that annoys you will annoy your customers too.

Before You Launch: A Quick Design Checklist

Can a new visitor find a specific product in three clicks or fewer?
Does every product page have a clear price, good photos, delivery info and an obvious Add to Cart button?
Are product photos consistent in style and shape?
Can a shopper see delivery costs before the final step?
Can someone check out without creating an account?
Have you completed a real test order on a phone?

How JWD Builds WooCommerce Stores

Our WordPress e-commerce website is R7,000 and is built on WooCommerce. It includes a branded design, setup of 10 products loaded with your images, descriptions, prices and stock details, products organised into categories, and a cart and checkout. Card payments go through Yoco by default, or PayFast, Peach Payments or Paystack if you prefer. You supply your product details and open a merchant account with the payment gateway in your own business name. The theme and plugins are agreed with you before we start, and paid third-party themes, licences and plugins are not included.

If you would rather not use WordPress, we also build stores on a custom CMS for R8,500. Our guide to static vs WordPress vs custom CMS explains the difference.

Frequently Asked Questions

What makes a WooCommerce product page convert?

Answering the shopper’s questions before they have to ask: a clear name and price, good photos from several angles, the key facts near the top, stock status, delivery information and one obvious Add to Cart button. Anything a shopper has to go looking for is a reason to leave.

How should I organise categories in my online store?

Group products the way your customers search for them, keep it to about two levels deep, and avoid categories with only one or two products. Give each category a short intro so shoppers know what they are looking at.

Do I need professional product photography?

Not necessarily. Consistency matters more than expensive equipment. The same background, lighting and angle for every product in a category, with a few angles and a close-up of each, makes a store look professional even when shot on a phone.

Should my WooCommerce store allow guest checkout?

For most small stores, yes. WooCommerce lets customers place orders without an account, and making a first-time buyer register before they can pay adds friction at the worst possible moment. You can still offer account creation as an option during checkout.

Ready to build a store that sells? Get a free quote or see all our website packages to compare options.