Description

BrikFront adds fast, ready-designed sections and store features to a WooCommerce store built with the block editor. The sections take their colors, fonts, spacing and corners from your store’s style, so they fit your theme, and each one loads its small stylesheet only on the pages that use it.

Start from a store demo, add sections from the block inserter, and turn on only the store features you need. Every section shows all of its content without JavaScript, and saved pages keep working after every update: a block stores its settings, and the plugin draws it when the page opens.

Getting started

Install and activate WooCommerce, then BrikFront.
To begin with a finished store, open BrikFront > Demos, pick a demo and press Import. Before anything changes, the screen lists what the demo adds and what stays as it is. Undo import puts everything back.
To add a section to a page, open the page in the editor, press + (the block inserter) and pick a block from the BrikFront group.
To add store features such as the side cart, wishlist, quick view or variation swatches, open BrikFront > Modules and switch them on. Each card has a Settings panel for its options; Module look sets an accent color and corners for all modules.
Messages sent through a Form block are listed under BrikFront > Form entries. When the Newsletter popup module is on, sign-ups are listed under BrikFront > Subscribers.

Sections (blocks)

Hero slider. Full-width slides with a photo, text and buttons. The first photo loads first and is never lazy-loaded, and phones can get their own photo. Slides pause on hover, on focus and in a hidden tab. A pause button is included, and “reduce motion” is respected. Without JavaScript, the slides become a strip you can swipe.
Product slider. A row of products that slides, from WooCommerce’s own Product Collection (newest, best sellers, on sale, a category or hand-picked products). Set the number of cards per device and show part of the next card at the edge. Choose arrows below the row, next to the heading or on both sides, dots or a progress line, and an optional autoplay that stops as soon as the shopper takes over. Without JavaScript, the row still scrolls and snaps to each card.
Tabs and option bands. Classic tabs, or a row of option bands (for example “what to wear, by temperature”). They work without JavaScript: the server draws the chosen panel.
Testimonials. Customer quotes with their stars, as cards, a sliding row or one big quote, with the store’s real average rating if you want it.
Shop the look. Photos with points on the products in them. A point opens the product’s name, price and link, and each photo can list its pieces with prices and a total.
Product finder. A quiz, a size finder, a pet food planner or a set builder, then the products that fit.
Announcement bar, scrolling text and mega menu. A line or a few rotating lines across the top of the store, a band of words or logos that slides across the page, and a menu item that opens a wide panel of links with a picture.
Facts and documents. Label and value rows for a kit list, specs or big numbers, and a list of files to download (manuals, safety sheets) with each file’s type and size.
Contact and quote form. Name, email, phone, message, choices and a consent box with a link to your privacy policy, in one or two columns. Messages arrive by email (Reply-To is the sender) and are kept under BrikFront > Form entries, with read and unread status, CSV export, WordPress’s personal data export and erase, and a retention period next to WooCommerce’s. On a product page, the form adds the product, its SKU and the options the shopper chose, so it works as a “request a quote” or product enquiry form. Spam is stopped without a captcha or an outside service: a hidden trap field, a time check and a limit per visitor. It works without JavaScript and on cached pages, and it loads only on pages that have a form.
Buy button. A product’s price and add to cart button anywhere on a page.
Product card look. A look for WooCommerce’s Product Collection block: an image shape from the style set, Sale, New and Sold out badges, and a second photo on hover that phones never download.
Blocks for products and modules. Product badges and a short product spec line for product cards and product pages, and Wishlist, Compare, Share and WhatsApp buttons you can place anywhere.
Style sets. Colors, type, spacing and corners come from the site’s style set (theme.json), so the sections follow your store’s look instead of carrying their own.

Store demos

Start from one of 20 ready-made stores under BrikFront > Demos, among them fashion, jewelry, skincare, perfume, electronics, food, furniture, garden, sports, toy, baby, health, art, music, coffee, gaming and pet stores.

The whole store. The demo’s colors and fonts, home, about and contact pages, its header with the announcement bar, its footer and menu, the layouts of the shop, category, product, cart and checkout pages, the front page and the modules the demo uses. Header, footer and page layouts need a block theme; if the BrikFront theme is installed, you can switch to it in the same step.
Sample products when you want them. A new store gets the demo’s sample products in categories (some with color and size options) and their “goes with it” suggestions in the cart. If the store has no shipping yet, it also gets the demo’s shipping (free over an amount, otherwise a flat rate). A store that already has products can choose, and a store with orders never gets sample products: the demo’s product lists show your own products, and its category links go to your own categories. Your products, orders, customers and shipping settings are not touched.
Your own photos, or none to clean up. Without sample products, your own photos and categories fill the design. With them, pictures are colored stills in the demo’s colors, noted in your Media Library.
One-click undo. Undo removes everything the import added and puts back every setting it changed. A demo product that has already been ordered stays, with its pictures.

Store features (modules)

BrikFront brings together store features that usually need one small plugin each. Turn on only the ones you want under BrikFront > Modules. A module that is off loads nothing: no code, no styles, no requests. If your theme or another plugin already does the same thing, the Modules page says so, and where two would clash (two quick views, two sales popups), BrikFront’s stays off. A button that names the other plugin can turn it off for you, and the module’s card turns it back on; nothing is turned off unless you press it.

Product page

Photo and video reviews. A star summary with filters, review titles, a Helpful button, and customer photos and videos without their location data.
Variation swatches. Color, image and button swatches instead of dropdowns, on product pages and as color dots on product cards.
Video in the gallery. Product videos from YouTube, Vimeo or your media library, played from a button on the product photo. Nothing loads from YouTube or Vimeo until the shopper presses play.
Size guide. A size chart in centimeters and inches, with how to measure, for all products, chosen categories or one product.
Custom product tabs. Extra tabs shared by all products or by chosen categories, and tabs for a single product.
Sticky add to cart. A bar with the price and the add to cart button stays in view as shoppers scroll down.
Add to cart without reload. Ajax add to cart on the product page for simple and variable products, with a short notice instead of a page reload.
Buy now. A buy now button next to add to cart that goes straight to checkout with the product.
Quantity buttons. Plus and minus buttons around the quantity field on product and cart pages.
Sale countdown. A countdown timer to the end of a product’s sale, from the sale dates you set.
Share buttons. WhatsApp, Facebook, X, Pinterest, email and copy link, with link previews.

Shop and category lists

Quick view and quick add. Shoppers open a product in a window, pick its options and add it to the cart without leaving the list.
Product badges. Sale, New and Sold out badges on product photos.
Load more. A “Load more products” button or infinite scroll instead of page numbers.

Cart

Side cart. A light cart drawer, or a short note under the cart icon, that opens without leaving the page, with quantities, a free shipping bar, a discount code field, suggestions and checkout.
Free shipping bar. Shows how much more to spend for free shipping, read from your shipping settings.

Whole store

Wishlist. Shoppers save products with a heart, as guests or signed in, and share their list.
Compare. A comparison table of the products a shopper picked, with the differences marked.
Recently viewed products. The products a shopper looked at last, in a row on the product page.
Live search. Ajax product search with product and category suggestions while shoppers type.
WhatsApp chat and order on WhatsApp. A click-to-chat button on every page, and “Order on WhatsApp” on products and the cart with the order details filled in.
Mobile bottom bar. Home, shop, search, account, cart and a link of your own at the bottom of phone screens.
Newsletter popup. A polite email popup, shown once, with a consent box and an optional coupon code. Sign-ups are listed under BrikFront > Subscribers (search, CSV export, WordPress’s personal data export and erase). BrikFront sends no email itself; an email tool can pick up each new address from the brikfront_newsletter_subscribed action.
Recent sales notice. A sales popup for social proof, from real recent orders only, with the buyer’s name shortened (“Anna K.”). A store without recent orders shows nothing.
Catalog mode. Hide prices and add to cart for everyone or for visitors who are not signed in, in the whole store or in chosen categories.
Age verification. An age check before the store or chosen categories.
Back to top. A round button that takes shoppers back to the top of long pages.
Speed. Loads WooCommerce, Contact Form 7 and Stripe files only on the pages that need them, so pages show sooner.

BrikFront works with block themes and with classic themes such as Astra, Blocksy, Kadence and Flatsome. It requires WooCommerce.

Credits

The demo fonts ship with the plugin and are served from your own site: Albert Sans, Anton, Archivo, Barlow, Barlow Condensed, Bricolage Grotesque, Chakra Petch, Dela Gothic One, DM Mono, DM Sans, Familjen Grotesk, Figtree, Fragment Mono, Funnel Display, Funnel Sans, Gabarito, Geist Mono, Host Grotesk, IBM Plex Mono, Instrument Sans, Inter, Inter Tight, JetBrains Mono, Jost, Lexend, Michroma, Mona Sans, Nunito, Nunito Sans, Onest, Public Sans, Sofia Sans, Sofia Sans Condensed, Sora, Syne, Unbounded and Urbanist, all under the SIL Open Font License 1.1 (each license is in the demo’s fonts folder). The setup guide’s handwritten notes use Caveat, also under the SIL Open Font License 1.1 (assets/fonts/caveat/OFL.txt).

The WhatsApp, Facebook, X, Pinterest and Telegram marks on the share and WhatsApp buttons are drawn from Simple Icons 16.36.0 (https://simpleicons.org), released under CC0 1.0. Each mark is a trademark of its company.

External services

BrikFront sends nothing to an outside service on its own: no tracking, no license check, no calls home, and no fonts or scripts from other servers. Two modules can connect a shopper’s browser to another service, only when the store turns them on and only when the shopper asks for it:

YouTube and Vimeo (Video in the gallery module). When the store adds a product video from YouTube or Vimeo and a shopper presses its play button, the video player loads from YouTube’s privacy-enhanced address (www.youtube-nocookie.com) or from Vimeo (player.vimeo.com). Nothing loads from them before that press. As with any embedded video, the player receives the video’s ID, the page’s address and the shopper’s browser details, such as the IP address. YouTube: Terms of Service, Google Privacy Policy. Vimeo: Terms of Service, Privacy Policy.
WhatsApp (WhatsApp chat and order on WhatsApp module). The chat and “Order on WhatsApp” buttons are links to wa.me. A shopper who presses one opens WhatsApp with the store’s number and a message filled in (for an order: the products, their options and quantities, coupons and the total); nothing is sent before the press, and the shopper sends the message. WhatsApp: Terms of Service, Privacy Policy.

The share buttons (Share buttons module) are plain links: pressing one opens WhatsApp, Facebook, X, Pinterest, Telegram or an email app with the product’s name and address, and nothing is sent before that.

The setup guide (BrikFront > Modules > Setup guide) offers BrikPanel, our free admin plugin from WordPress.org, in its last step. Only when you press “Install and activate BrikPanel”, WordPress’s own plugin installer gets BrikPanel’s details from WordPress.org (api.wordpress.org) and downloads it from downloads.wordpress.org, exactly as Plugins > Add New does, with what WordPress sends for any plugin install (the plugin’s name, your WordPress version and language, and your site’s address); then the same press activates it. Nothing is asked before that press, and nothing is installed from anywhere else. WordPress.org: Privacy Policy.

Source code

All of BrikFront’s code is in the plugin and readable. A few files are built from a source file that ships next to them:

Block editor scripts. Each blocks/<block>/index.js is built from blocks/<block>/edit.jsx and the files it imports from blocks/_shared/. The same build writes the index.asset.php beside it and blocks/blocks-manifest.php (every block’s block.json as PHP).
Minified styles and scripts. Every name.min.css and name.min.js is built from name.css or name.js in the same folder (in blocks/, modules/, assets/css/, assets/kit/ and assets/front/). All other scripts and styles are used as written.
Build tool. esbuild 0.25.10, run by tools/build.mjs. The build script ships with the plugin, together with tools/package.json and tools/package-lock.json. To rebuild with Node.js 18 or newer: open the tools folder, run npm ci, then node build.mjs. node build.mjs --check lists any built file that does not match its source.
Third-party code. None. The demo fonts, the setup guide’s handwriting font and the brand marks of the share buttons are listed under Credits, with their license.

Blocks

This plugin provides 29 blocks.

Compare button The Compare module's check wherever you put it: on the product page, on a product card or for one product on any page. Two picked products bring the tray and the comparison table.
Share buttons The Share module's row wherever you put it: on a product it shares that product, anywhere else the page it is on. Plain links to each network, Copy link, and the phone's own share menu.
Testimonials What customers say, in their own words: cards side by side, a row that slides, or one big quote with the others under it. Can show the store's own rating and, with the Product reviews module, its real WooCommerce reviews.
Announcement bar One line across the top of the store, or a few that take turns: shipping, returns, a new product.
Product badges Sale, New and Sold out badges on a product card or product page, from the product's real data.
Buy button A product's price and its add to cart button anywhere on a page; for a product with options, one chosen option (such as a flavour and a size).
WhatsApp button The WhatsApp module's button wherever you put it: on a product it orders that product (with the options the shopper chose), on the cart page it sends the cart, anywhere else it starts a chat about the page.
Product slider A row of products that slides: arrows, dots or a progress line, and an optional autoplay. The products come from a WooCommerce Product Collection inside; without JavaScript the row still scrolls.
Wishlist button The Wishlist module's heart wherever you put it: on the product page, on a product card or for one product on any page. As a link it opens the shopper's wishlist, with a counter.
Product spec line A short line about the product over its name (an ingredient, a material, a size), from the product's own Spec line field.
Documents A list of files to download: manuals, quick starts, safety sheets, warranty terms. Each shows its kind and size.
Tabs A section of options: classic tabs (one panel at a time), bands (every panel open, the chosen one highlighted), a story, a timeline of steps or round pictures rolling across a sentence. Works without JavaScript.
Facts Label and value rows: a kit list, specs, big numbers, or a conversation with products in it.
Recently viewed The products a shopper looked at last, newest first, in a row that slides: on any page, such as the home page, the cart or the product page. It fills from the shopper's own browser, so it shows once they have looked at a product.
Scrolling text A band of words, logos or icons that slides across the page: materials, promises, brands. Each item is a paragraph, an image or an icon inside; anyone can pause it.
Shop the look Photos with points over the products in them: a point opens the product's name, price and link. Shows each photo's pieces as a priced list with the total, a row of looks that slides, or numbered details beside one photo.
Hero slider Full-width slides with a photo, text and buttons. The first photo loads first and nothing waits for a script.
Product finder A short quiz with big answers, a size finder from one measurement, a portion planner, a set builder, a product hung at its true size on a drawn wall, products in a row under a lamp, a plan worked out from how much is used, choices that narrow a product grid, or one product's options as keys to press. Works without script: every question and result is on the page.
Form A contact or quote request form: name, email, phone, message, choices and a consent box, in one or two columns. Messages arrive by email and in BrikFront > Form entries; on a product page the form adds the product and the chosen options.
Finder result One result of a product finder: its name, a line about it and what it shows (usually a product list).
Look photo One photo of a Shop the look section, with its points: its crop, its label ("Look 01") and its name.
Document One file of a documents list: its name and a short note; its kind and size come from the file.
Testimonial One customer's words: the quote, a short title, their name, where they live or what they bought, and their stars; or one of the store's reviews, drawn from the review itself.
Mega menu item A menu item that opens a wide panel: columns of links and a picture card. On phones its links sit in the menu like any submenu.
Slide One slide: a photo (with an optional phone photo, and a second photo beside it on wide screens) and the text on it.
Finder question One question of a product finder and its answers. An answer can point to a result: the result most answers point to is shown.
Point on the photo A point over a product in the photo. It opens the product's name, price and a link. Without a product, it opens a short note.
Form field One field of a BrikFront form: name, email, phone, message, website, number, date, a choice or a consent box.
Tab One option: its title, a short line under it and what it shows.

Installation

Install and activate WooCommerce.
Install BrikFront from Plugins > Add New, or upload the zip under Plugins > Add New > Upload Plugin, and activate it.
A setup guide opens: pick a demo look, turn on the store features you want and, if you like, add the free BrikPanel dashboard. Until you finish it or press Skip setup, it opens again on the Dashboard and on BrikFront’s screens.
To start from a ready-made store later, open BrikFront > Demos, pick a demo and press Import. Undo import puts everything back.
To add a section, edit a page, press + (the block inserter) and pick a block from the BrikFront group.
To add store features, open BrikFront > Modules, switch on the ones you want and open Settings on a module’s card for its options.

FAQ

Does BrikFront send data anywhere?

No. BrikFront makes no outside requests on its own. The setup guide asks WordPress.org only when you press its “Install and activate BrikPanel” button, as Plugins > Add New does (see External services). A product video you add from YouTube or Vimeo loads from there only when the shopper presses play (YouTube from its no-cookie address).

Will importing a demo change my products?

No. In a store that already has products or orders, a demo brings its look, pages, header, footer and store page layouts around your own products; it adds sample products only if you tick the box, and never in a store with orders. Your products, orders and customers are not touched, your own pages keep their content, and Undo puts back every setting, header, footer and layout the import changed.

Where do a demo’s fonts go?

Into WordPress’s Font Library, like any font you add in the Site Editor; with a block theme you can see and remove them under Appearance > Editor > Styles > Typography. Undo removes only the fonts the demo added.

Does a demo import work on shared hosting?

Yes. The import runs in short steps, so host time limits do not stop it. It can also run from WP-CLI as an administrator, for example wp brikfront demo import vaune --user=admin (also list, plan, status and undo).

What happens to my pages if I remove BrikFront?

Your pages stay. BrikFront’s sections are not shown until it is active again. Removing the plugin deletes its own settings, the messages kept under BrikFront > Form entries and signed-in shoppers’ wishlists; export the messages first (Export CSV) if you need them.

Your newsletter list (BrikFront > Subscribers) stays: it is your list, and it is there again if you install BrikFront later. Product reviews are WooCommerce’s and always stay; the titles, photos and videos shoppers added to them stay too. To delete the list and those review extras as well, add define( 'BRIKFRONT_REMOVE_ALL_DATA', true ); to wp-config.php before you delete the plugin.

Can shoppers add photos and videos to their reviews?

Yes, with the Product reviews module (BrikFront > Modules). Shoppers add up to five photos and one video of up to 30 seconds and 25 MB, or your server’s upload limit if it is smaller. Videos are not converted: MP4 or MOV in H.264 and WebM are accepted because every browser plays them, and an HEVC video (an iPhone’s “High Efficiency” format) is refused with a note on how to send one. A phone’s browser makes the photos smaller before sending them, and draws the video’s cover. Photos are saved again without their location or camera details; a video keeps its picture and sound while its location and device details are taken out, and it plays only when pressed. Shoppers can add them on the product page and on WooCommerce’s “Review your order” page. Reviews with photos or a video wait for your approval, and the Reviews screen shows them in a photos column. Reviewer names show as “Anna K.”, and a “How reviews are published” note is written from your WooCommerce settings. You can change all of this in the module’s settings.

I use another reviews plugin. Do my reviews’ photos come along?

Yes. The photos, videos and titles that Customer Reviews for WooCommerce, Revopic or WoodMart keep on your WooCommerce reviews show in BrikFront’s reviews section as clean copies, without their location data; that plugin’s own files and data are not changed. Reviews are WooCommerce’s own, so they all stay. The Modules page also counts the sample reviews a demo import added and deletes them, and only them, in one click. WordPress’s Export and Erase Personal Data tools reach product reviews and their photos and videos. For stores in Türkiye, “Reject and notify” on the Reviews screen emails a reviewer the reason their review was not published.

Do modules slow my store down?

A module that is off loads nothing. A module that is on loads only what the page shows, and its larger parts (a window, a drawer) only when a shopper first opens them.

Where do form messages go?

To the site’s admin email, or to the addresses set on the form, and to BrikFront > Form entries. Only administrators and shop managers see the entries. Mail goes through WordPress, so an SMTP plugin you use sends it too.

How does the form stop spam without a captcha?

A hidden field that people never see but bots fill in, a check that the form was not sent within two seconds of being opened, a limit of 30 messages an hour per visitor, and messages posted from other sites are refused. Optionally, a form can refuse messages with too many links.

Does it work without JavaScript?

Yes. Every section shows all of its content without JavaScript; scripts only add motion and controls.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“BrikFront Page Builder for WooCommerce: Wishlist, Quick View, Variation Swatches & Side Cart” is open source software. The following people have contributed to this plugin.

Brksoft

Translate “BrikFront Page Builder for WooCommerce: Wishlist, Quick View, Variation Swatches & Side Cart” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.1.0

New: a setup guide after activation. It helps you pick a demo look, turn on store features and, if you like, add the free BrikPanel dashboard.
New: when another plugin already does a module’s job, a button that names it can turn that plugin off, and the module’s card turns it back on.
New: a demo imported without sample products uses your own products, categories and photos, and your store’s real reviews when there are enough good ones.
New: “Keep my home page” when you import a demo.
Improved: on phones, the BrikFront theme’s product tabs open one under another.
Fixed: semi-transparent colors set in the editor were dropped inside BrikFront blocks.
Fixed: a hero slide whose words do not fit now grows instead of cutting them off.

1.0.0

First release: 20 store demos with one-click import and undo, 17 blocks (hero slider, product slider, tabs and option bands, testimonials, shop the look, product finder, contact and quote form, facts, documents and more), product card look, style sets, and 28 modules (side cart, wishlist, compare, quick view, variation swatches, live search, WhatsApp, sticky add to cart and more).

Description

Getting started

Sections (blocks)

Store demos

Store features (modules)

Credits

External services

Source code

Blocks

Installation

FAQ

Does BrikFront send data anywhere?

Will importing a demo change my products?

Where do a demo’s fonts go?

Does a demo import work on shared hosting?

What happens to my pages if I remove BrikFront?

Can shoppers add photos and videos to their reviews?

I use another reviews plugin. Do my reviews’ photos come along?

Do modules slow my store down?

Where do form messages go?

How does the form stop spam without a captcha?

Does it work without JavaScript?

Reviews

Contributors & Developers

Interested in development?

Changelog

1.1.0

1.0.0

Meta

Ratings

Contributors

Support