Multiple custom WooCommerce product page styles on one shop

Does every product in your store need the same product page? Not always! And I have the perfect example to show you!

Blanc Salváge is Stacy Terry’s font foundry. She sells fonts, mockups and premade brands to designers, and her shop runs on WooCommerce with a Showit design around it. I built that shop, and two of its product pages are the reason for this post: the classic font page, and the brand new page for ROGUE, her premade brand collection. They look nothing alike…

Two products, two very different jobs

A font page has a clear job: let you test the type, see it in use, pick a license and check out. A premade brand collection has to do more convincing first. You are asking a designer to buy a whole brand, so the page has to show what is in it, how it works and what it looks like customized, before the add to cart button even makes sense. This second one is actually a hybrid between a product page and a sales page, but we’re still keeping e-commerce focus throughout.

So it’s all the same store, header, footer, all the goodies, but they are different pages, because they are doing different work!

The font page is built for testing and checking out

Take La Roue, her condensed serif. The title, a one-line pitch, the license dropdown and the add to cart button all sit at the top, so a designer who already knows they want it can buy it without scrolling.

Scroll down and the page does the rest of the work: the story behind the font, a type tester where you can type your own words in all three weights, the feature list next to a real mockup, a sign-up for a discount code, pairing ideas and kind words from other designers. The type tester is the star, because it answers the biggest question on any font page: what will MY words look like in this?

Fonts, mockups and textures each have their own page template with custom fields behind it (so every new font arrives with the same layout and the same questions already answered). That is what keeps a catalog easy to browse.

The ROGUE page is built to make the case

ROGUE is a different kind of product. It is a premade beauty brand: logos, two licensed fonts, 22 images and three documents a designer can use with their own clients. That NEEDS a sales page, and Stacy wanted it as a real product in her shop, so I built it as both. It is a WooCommerce product, laid out like a sales page, in Gutenberg blocks using WooBuilder Blocks.

Here is the order it goes in: a hero with the collection’s tagline, a short case for why designers pick up a premade brand, a band of numbers, the six pieces inside, how the three documents work together, the same logos customized into two different brands (as designed, then customized!), real-world mockups, the package options, two designers’ words about building with it, and a questions section. Every block is a real block for Woo, so the page can be rearranged without touching a single line of code!

Because it is a real product, it shows up in the shop like everything else, and Stacy can duplicate the page for her next premade brand and swap in the new pieces.

How different product pages still feel like one shop

They share the header, the footer and the fonts (that part is on purpose, we want brand cohesiveness!). We want to make sure that everything still feels like it’s coming from the same family because it is. This is not the first time that I’ve done it. You can check out clients like Jen Wagner, where she had physical merch plus all of her digital products, and we definitely need different approaches for different pages. So in this case for Stacy, even on a page that behaves like a sales page, you are looking at her fonts, in her black.

If you are still working out how WooCommerce fits into a Showit site at all, my guide to selling with WooCommerce on a Showit website is the place to start.

For the shop owner reading this

If your shop sells more than one kind of thing, look at each product page and ask what it has to do. Most shops will be able to have a single product style, and it’s okay. But whenever the products are too different and we need different sections for them, we can definitely rely on having different custom pages. A quick buy needs the button early. A bigger purchase needs proof, a closer look inside and answers to the questions before the button. When one template has to do both jobs, one of them ends up working harder than the other…

That is the kind of shop I build: Showit design on the front, WooCommerce behind it, and product pages shaped around what each product needs to do. I’d love to help you map out yours! Take a look at my Showit shop builds and see if it fits!