Purplish – Block Design Toolkit for WooCommerce

Description

Open a few WooCommerce stores on block themes and you’ll see the same add to cart button, the same gallery and the same product cards, whatever they sell. The blocks are good. They all start out looking alike, though.

Purplish is a block design toolkit for WooCommerce. It gives those blocks, and the patterns you build from them, the design options they don’t have on their own. Select a block in the Site Editor, open the Purplish panel, and decide how it looks and moves. You need no page builder and no custom CSS, and nothing of WooCommerce’s gets replaced.

Think of a product page that takes the color of the variation a shopper picks, a gallery that tilts toward the mouse or slides in like a film reel, or a shop page where product cards fan out and hang from a clothes line. That’s the kind of store Purplish is for.

Built to stay out of your way

• Works on WooCommerce’s own blocks: Purplish adds a panel to the Product Gallery, Add to Cart + Options, Product Collection, Accordion and Group blocks. It replaces nothing.
• Each template keeps its own look: your choices are saved on the block in the template, so two templates can look different.
• Off means off: deactivate Purplish and your store looks exactly as WooCommerce draws it.
• Loads only where it’s used: the color script loads on variable products only, and each effect loads only on pages that use it.
• Your photos stay on your server: no outside requests, no tracking and no account to sign up for.
• Quiet admin: no banners, notices or upsells.

Product page colors

When a shopper picks another color on a WooCommerce product page, the photo changes and nothing else does. The button, the sale badge and the price look the same for the orange sweater and the navy one.

With Purplish, the page follows the color. Pick blue, and the add to cart button, the selected option and the sale badge turn blue. Pick orange, and they turn orange. Each variation has a Page color setting:

• Automatic: the default. Purplish finds the product in the photo, not the wall behind it, and takes its color. If the color attribute has a swatch color, that comes first.
• Custom: pick a color or type a hex code. Purplish uses it exactly as you set it.
• Off: the variation keeps your theme’s colors.

A color taken straight from a photo is often too dark or too pale for a button. Purplish keeps the hue and adjusts it for each use: a button color with readable black or white text, a deeper shade for the sale price and a pale tint for the background. Simple products get one color for the whole page.

You pick what takes the color: the add to cart button, the selected option and the sale badge (all three on by default), the sale price and a soft background tint. The page opens in the default variation’s color, so there’s no flash of your theme’s colors first.

When the color changes, the photo changes with a transition: Blur (the default), Fade, Zoom, Slide, Flip, Wipe, Circle reveal, Color wash or None.

Product gallery

Select the Product Gallery block and choose how the photos behave:

• Hover style: 3D tilt leans the photo toward the mouse, Zoom magnifies the spot under it, and Loupe shows a round magnifier. Lift, Parallax, Glare and Slow zoom add softer motion. Any hover style replaces WooCommerce’s own hover zoom, and touch screens skip it.
• Full-screen style: the view that opens when a shopper clicks the photo. Snap stack is tinted to the page color, Zoom from photo grows out of the photo, Filmstrip adds small photos along the bottom, Cinema uses a dark screen, and Classic fade keeps it plain. It needs the gallery’s “Open pop-up when clicked” setting.
• Slide style: how the next photo comes in. 3D media gallery turns like a cube, Circular slider swings like a wheel, Reel slider runs like film, and Image tunnel comes out of the distance.
• Layout: hide the thumbnail strip, round the photo’s corners, and add frosted arrows that show on hover.

Product cards

On shop and collection pages, select the Product Collection block:

• Add to cart on the photo: a small frosted button sits on the photo, and the title and price share one line. It shows on hover, and always on touch screens.
• Button motion: a bag icon slides in on hover, and the button fills and pops after adding to cart.
• Effect color: one color for the button fill and the card effects. On a product page with a variation color, the variation color wins.
• Card effect: one of 14 effects for the whole collection.

Effects on hover:

• Spotlight: the card under the mouse grows while the rest blur and fade back.
• Color reveal: the photos sit in a color wash until the mouse brings one to full color.
• Fan deck: the cards rest slightly tilted. The one under the mouse straightens and its neighbors lean away.
• Expanded cards: each photo shows as a narrow band and opens to full size under the mouse.
• Magnetic panel: a soft panel in the effect color slides under the card.
• Card folder: each card sits in a soft folder with a tab, and the photo lifts out.

Effects in a carousel (a grid stays as it is):

• Deck: the cards at the edges turn away, and the one under the mouse faces you.
• Arc: the cards sit on a curve, highest in the middle.
• Spotlight carousel: the middle card is full size and the rest fade back.
• Grow: cards grow as they reach the middle.
• Tilt: cards lean as they travel across.

Effects as cards scroll into view:

• Clothes line: each card hangs from a peg and swings as it comes in, or when the mouse touches it.
• Parallax: the photo moves slower than its card.
• Zoom reveal: each card grows in as it appears.

Small details

On the Add to Cart + Options block:

• Title and price rise: after the photo changes, the title and price rise into place. Or pick Title comes into focus, and the title sharpens into view.
• Glow ring: a soft ring in the page color around the add to cart button.
• Halo: a ring leaves the button and fades each time a product goes into the cart.
• Mesh background: soft blobs of the color sit over the background tint and move each time the color changes.
• Color dots: each color option shows a dot in its own color, like Orange or Blue. Sizes, and options that come in several colors, get no dot.

On other blocks:

• Accordion, Soft style: each item becomes a soft card, and the plus turns into an x that fills with the page color when the item is open.
• Group, Take the page color: on product pages, the section’s background becomes a soft version of the color the shopper picks.

Nothing moves on its own. Every effect plays on a hover, a scroll, a color change or an add to cart, then stops. Visitors who turn on reduced motion on their device get the colors without the animation.

Block and classic themes

Purplish is built for block themes and tested with the free Purple theme. On a block theme, every option sits in a Purplish panel on the block it changes, in the Site Editor.

Classic themes get a smaller set under WooCommerce > Settings > Products > Purplish: the page colors (except the selected option, since classic themes show a dropdown), the photo transition, the title and price rise, and three gallery options: hide thumbnails, rounded corners and the hover style.

Why I made it

Purplish started with one small idea from a chat on X: let the product page take the color of the variation a shopper picks. Building it showed me how much more WooCommerce’s blocks can do with a few good options, so I kept going. The Purplish website runs on WooCommerce, the Purple theme and Purplish itself.

Shameem Reza

Source code

The code is on GitHub. The readable source of the scripts ships in assets/src, next to the built files in build. To build them, run npm ci and npm run build.

Privacy

Purplish doesn’t collect, store or send personal data. It sets no cookies and makes no outside requests.

Credits

Thanks to Luigi Teschio for the idea, from a discussion on X: set each variation’s color by hand, or read it from the photo.