Purplish - Block Design Toolkit for WooCommerce -- WordPress 插件

开发者	shameemreza
更新时间	2026年11月6日 12:38
PHP版本:	7.4 及以上
WordPress版本:	7.1
版权:	GPLv2 or later
版权网址:	版权信息

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. [youtube https://www.youtube.com/watch?v=K9pyGo5XebQ] Built to stay out of your way

Works on the blocks you already use: Purplish adds a panel to WooCommerce's Product Gallery, Thumbnails, Add to Cart + Options, Variation Selector, Product Collection, On-Sale Badge, Product Reviews, Product Specifications, Product Filters, Mini-Cart and Accordion Group blocks, and to the Accordion, Details, Group, Columns, Heading, Cover, Image and Button 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. Pick Snap stack, Zoom from photo, Filmstrip, Cinema or Classic fade. 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.
Thumbnail shape: select the Thumbnails block inside the gallery for rounded or circle thumbnails.

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 18 effects for the whole collection. Cards can fan out like a hand, hang from a clothes line, or lie over each other like prints on a table.

Effects on hover: Spotlight, Color reveal, Fan deck, Expanded cards, Magnetic panel, Card folder, Bookmark and Roster. Effects in a carousel (a grid stays as it is): Deck, Arc, Spotlight carousel, Grow, Tilt, Depth and Overlap. Effects as cards scroll into view: Clothes line, Parallax and Zoom reveal. 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.
Liquid glass and spectrum ring: the add to cart button gets a frosted fill with a highlight that follows the mouse, and a rainbow ring that travels once around its edge on hover.
Googly eyes: one or two eyes inside the add to cart button follow the mouse and blink when it moves again after a pause.

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.
Accordion Group, Soft style: the same soft cards on WooCommerce's own accordion, with its icon in a round button that fills with the page color when open.
Details, Soft style: the block becomes a soft card, and a round plus turns into an x that fills with the page color when open.
Group, Take the page color: on product pages, the section's background becomes a soft version of the color the shopper picks.
Variation Selector, Grayed-out look: options that can't be bought get a diagonal line over the chip (swatches too), or they blur out.
On-Sale Badge, Shape and Corner: a pill, circle or price tag badge. On the gallery photo, it can sit in any corner.
Product Reviews, Review style: each review on its own soft card, or the review text in a chat bubble.
Product Specifications, Table style: every other row shaded, or each row on its own soft card.
Product Filters, Matching chips: the active filters take the look of a selected chip, and a chip fades into its selected color when picked.
Mini-Cart, Count pop: the item count pops with a ring in its own color, and the bag gives a small turn, each time something goes into the cart.
Image, Hover style: the gallery's 7 hover styles on any image block, from 3D tilt to Slow zoom.
Button, Looks: a glow ring, a band of light that sweeps across on hover, liquid glass and a spectrum ring, in any mix. Googly eyes, one or two, sit inside the button and follow the mouse.
Heading, Reveal on scroll: the heading rises into place or comes into focus as it scrolls into view.
Group and Columns, Entrance on scroll: the section fades up or zooms in as it scrolls into view, and columns come in one after another.
Cover, Scroll effect: the background slowly zooms or drifts with the scroll, or the cover opens from a small rounded pill to its full size as it comes into view.

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. Hanging Rail block A block of Purplish's own, in the Purplish group of the block inserter. It holds a heading, a short line and one Product Collection, so you pick the products the way you already do.

Products on a rope: the section holds still while the page scrolls, and the products slide along a rope that sags between them. Each card swings on its clip when the scrolling speeds up or stops, then settles.
Clip and rope: a wooden peg, a binder clip or a strip of tape, on a rope that sags a little or more.
Scroll length: short, medium or long, scaled to how many products there are.
Pattern: Hanging rail of new arrivals adds the block with a heading, a short line and your 8 newest products.

Visitors who turn on reduced motion see the products as a row they can scroll sideways, with the rope and clips still drawn. Story Deck block Each story is a group with a photo, a quote, the customer's name and, if you want, a button to the product. The photos become a deck of cards, and the top card's story sits beside it.

Flick through: visitors drag or swipe the top card away, or use the previous and next buttons or the arrow keys. After the last story the deck starts again.
Deck options: cards on the left or right, rounded or square, fanned like a hand of cards or flat. On phones the cards sit above the story.
Pattern: Customer stories deck adds the block with three sample stories, each with a Shop this button.

The deck never moves on its own. Visitors who turn on reduced motion switch stories with a short fade. Runway block It holds a heading, a short line and one Product Collection, so you pick the products the way you already do. Every product photo becomes a look, and the looks stand in one line that gets smaller and softer toward the back.

Walk the line: visitors drag or swipe, tap a look further back, or use the previous and next buttons or the arrow keys. After the last look the first one returns.
Product rail: the product cards sit beside the line and follow the look at the front. On phones they run under it as one row.
Runway options: looks from every product photo or the featured photo only, framed or cutout photos, the look number on or off, and photos that fly into the mini cart on add to cart.
Pattern: Runway lookbook adds the block with a heading, a short line and your 6 newest products.

The line never moves on its own, and a normal mouse wheel still scrolls the page past it. Visitors who turn on reduced motion step one look at a time with a short fade. Scroll Lookbook block It holds Cover blocks, one Product Collection and a Group. Each Cover is a shot: as visitors scroll, the camera moves from shot to shot, holds at each one and brings in that product's card on the side away from the subject.

Shots and cards: each Cover holds a video or a photo, and the first Product Collection gives the cards. Each card's button takes its product's Purplish color.
Scroll Lookbook options: a chapter list on or off, a timecode on or off, and a short, medium or long scroll for each stop.
Pattern: Scroll lookbook storefront adds the block with an opening shot, three shots, an empty hand-picked collection and a closing line, then four products after it.

The opening video plays once and stops within 5 seconds, and nothing loops. Visitors who turn on reduced motion get each shot with its card beside it as a plain page. For video that follows the scroll smoothly, encode it with a keyframe every few frames; the block panel gives an ffmpeg line for it. 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.

1.1.0

New: Hanging Rail block. Products hang from pegs, binder clips or tape on a rope and slide along it as the page scrolls. Comes with the Hanging rail of new arrivals pattern.
New: Story Deck block. Customer stories on a deck of cards that visitors flick through. Comes with the Customer stories deck pattern.
New: Runway block. Product photos stand in a line that fades into the distance, with the product cards beside it. Comes with the Runway lookbook pattern.
New: Scroll Lookbook block. A full-screen video or photo that plays as visitors scroll and stops at each product with its card. Comes with the Scroll lookbook storefront pattern.
New: Grayed-out look for options that can't be bought, a pill, circle or price tag sale badge in any corner, and rounded or circle gallery thumbnails.
New: Soft style for the Accordion Group and Details blocks, and soft card or chat bubble reviews and striped or card-style specifications.
New: Matching chips for active Product Filters, and a count pop on the Mini-Cart.
New: The gallery's 7 hover styles on any Image block, and a glow ring, light sweep, liquid glass, spectrum ring and googly eyes on any Button and on add to cart.
New: Scroll reveals for headings, scroll entrances for groups and columns, and slow zoom, parallax or pill reveal for covers.
New: Four more card effects on the Product Collection block: Bookmark, Roster, Depth and Overlap, for 18 in all.
New: Hooks and front-end events for developers, listed in the README on GitHub.
Fix: The gallery loupe sat away from the mouse on right-to-left sites.

1.0.0

New: Page color field on each variation and simple product: Automatic, Custom or Off.
New: Colors read from product photos in the background, adjusted into a button color, a sale price color and a page tint. Swatch colors come first.
New: The product page follows the color a shopper picks, on block and classic themes.
New: Parts that take the color: add to cart button, selected option, sale badge, sale price and page background tint.
New: Photo transition: Blur, Fade, Zoom, Slide, Flip, Wipe, Circle reveal, Color wash or None.
New: Purplish panel on WooCommerce's blocks in the Site Editor, and a settings section for classic themes.
New: Gallery options: hide thumbnails, rounded corners and frosted arrows on hover.
New: Gallery hover styles: 3D tilt, Zoom, Lift, Parallax, Glare, Loupe and Slow zoom.
New: Gallery full-screen styles: Snap stack, Classic fade, Zoom from photo, Filmstrip and Cinema.
New: Gallery slide styles: 3D media gallery, Circular slider, Reel slider and Image tunnel.
New: Product card options: button on the photo, button motion, an effect color and fourteen card effects.
New: Title and price rise, title focus, glow ring, halo after adding to cart, mesh background and color dots on options.
New: Soft style for the Accordion block, and Take the page color for Group blocks.

Purplish - Block Design Toolkit for WooCommerce

标签

下载

详情介绍:

安装:

屏幕截图:

常见问题:

更新日志: