Elements for the whole customer journey: shop grid, filters, categories, product page, mini cart, cart, checkout, thank-you page and account. You design them like any other element, and standard WooCommerce runs underneath. Most of them run live on this page.
From the first browse to the order confirmation, every storefront screen becomes an element you can style, including the pages WooCommerce normally locks away.
Grid, filters, categories, product page, cart, mini cart, checkout, thank-you and account.
Filtering, sorting, add to basket and cart quantities update without a full page reload.
Set a colour swatch on an attribute once and it shows in the filters, the grid and the product page.
Each one is a native Breakdance element with full design controls. Where a page can safely run it, a live demo sits under the description, using the real products in our demo shop.
Live demo on this page
Lay out products in a responsive grid, list or swipeable slider, with the card features shoppers expect.
The first grid uses the standard card with sale % badges, favourites, variation swatches and a Quick view button that slides up when you hover a card. The second is the same element in slider mode with the minimal card and the icon add-to-basket button. Add a product and the mini cart opens.
A full facet toolkit that filters the product grid in place, without reloading the page.
Search, pick a category, drag the price range or show sale items only. The grid, the count and the sort order update without a page reload. For every facet type, see the Phox Facets demo and the Filter Panel demo.
-10%
Send shoppers into the right section with tiles in a grid or carousel.
Both use the same element and read the categories, images and product counts straight from WooCommerce. The first has the name below a square image with the lift hover. The second puts the name over a landscape image with the zoom hover.
Build the single-product layout in Breakdance, with the conversion features shoppers look for.
This is Naturo Dog Food from the demo shop, loaded with the element's Product ID setting, so it works on any page. Pick a size, click the main image to zoom, switch tabs, then add it to your basket.
Natural selection of premium dog food
No description available.
| Size | M, L |
|---|
Shoppers can check their basket without leaving the page, and it updates the moment something is added.
Click the basket icon in this mock header to slide the cart open. It also opens by itself whenever you add a product from the demos above. Change quantities or remove items right inside it. The element can also run as a floating button in a corner of the screen instead of sitting in a header.
Live totals, gentle upsells and reassurance, all on one tidy page.
The Cart element below shows your basket from this visit. It is empty until you add a product from one of the demos above, then it refreshes. Change a quantity, remove an item or add a cross-sell and the totals update in place.
Your basket is empty. Add a product from one of the demos above and it appears here.
Browse the demo shop
Clean, guided and reassuring, and built on standard WooCommerce so your payment gateways keep working.
Checkout needs a real basket and a payment step, so it is not run on this page. The screenshot shows the element in use.
The order-received screen is usually hard to edit. With this element you design it like any other page.
This page only appears after a real order, so it is shown as a screenshot.
Replace the default account screens with a branded, friendly dashboard.
The dashboard shows a signed-in customer's own orders and details, so it is shown as a screenshot. The Login Form below is live.
Put a login form in a header, a popup or a members page, styled to match the rest of your site.
This is the real sign-in for phox-elements.com accounts, so you can use it to reach your account.
The full WooCommerce collection comes with Phox Elements, alongside 150+ other premium elements for Breakdance.
Get Phox Elements
