{"id":19,"date":"2026-06-14T18:39:42","date_gmt":"2026-06-14T18:39:42","guid":{"rendered":"https:\/\/demo.alovio.org\/woo\/live-demos\/"},"modified":"2026-06-14T19:09:50","modified_gmt":"2026-06-14T19:09:50","slug":"live-demos","status":"publish","type":"page","link":"https:\/\/demo.alovio.org\/woo\/","title":{"rendered":"Live demos"},"content":{"rendered":"<div class=\"alc-launch\">\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');\n  \/* This page is a launcher, not a shop screen \u2014 hide Storefront's header, footer, page title\n     and handheld bar, and paint the page coal. Scoped to this page (the style only loads here). *\/\n  #masthead, #colophon, .storefront-handheld-footer-bar, header.entry-header{ display:none !important; }\n  body{ background:#0c0a09 !important; }\n  .alc-launch{ --coal:#0c0a09; --panel:#15100e; --line:#2c2420; --ash:#a8a29e; --ink:#fafaf9; --f1:#f97316; --f2:#fbbf24;\n    background:var(--coal); color:var(--ink); font-family:'Space Grotesk',system-ui,sans-serif;\n    width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:22px 22px 72px; }\n  .alc-launch *{ box-sizing:border-box; }\n  \/* never let the theme underline our links (Storefront sets a:hover underline) *\/\n  .alc-launch a, .alc-launch a:hover, .alc-launch a:focus{ text-decoration:none !important; }\n  \/* launcher's own clean header (replaces the hidden Storefront one) *\/\n  .alc-top{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;\n    max-width:1040px; margin:0 auto 30px; padding-bottom:18px; border-bottom:1px solid var(--line); }\n  .alc-brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.2rem; color:var(--ink); }\n  .alc-brand .dot{ width:12px; height:12px; border-radius:50%; background:linear-gradient(135deg,var(--f1),var(--f2)); box-shadow:0 0 10px var(--f1); }\n  .alc-nav{ display:flex; gap:20px; align-items:center; font-weight:600; font-size:.95rem; flex-wrap:wrap; }\n  .alc-nav a{ color:var(--ash); }\n  .alc-nav a:hover{ color:var(--ink); }\n  .alc-nav a.cta{ color:#fff; background-image:linear-gradient(135deg,var(--f1),var(--f2)); padding:8px 15px; border-radius:10px; }\n  .alc-wrap{ max-width:1040px; margin:0 auto; }\n  .alc-kicker{ font:600 .78rem\/1 'JetBrains Mono',monospace; letter-spacing:.22em; text-transform:uppercase; color:var(--f1); margin-bottom:14px; }\n  .alc-launch h1{ font-size:clamp(2rem,5vw,3rem); font-weight:700; letter-spacing:-.5px; margin:0 0 12px; color:var(--ink); }\n  .alc-launch h1 .fl{ background:linear-gradient(120deg,var(--f1),var(--f2)); -webkit-background-clip:text; background-clip:text; color:transparent; }\n  .alc-lede{ color:var(--ash); font-size:1.05rem; max-width:60ch; margin:0 0 36px; }\n  .alc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:720px; }\n  @media(max-width:560px){ .alc-grid{ grid-template-columns:1fr; } }\n  .alc-card{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:15px; padding:22px 20px 20px; overflow:hidden;\n    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; min-height:176px; display:flex; flex-direction:column; }\n  .alc-card:hover{ transform:translateY(-4px); border-color:#5a3a1e; box-shadow:0 18px 38px -20px rgba(249,115,22,.55); }\n  .alc-card__tag{ font:600 .68rem\/1 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--f2); margin-bottom:11px; }\n  .alc-card h3{ font-size:1.22rem; font-weight:700; margin:0 0 7px; color:var(--ink); }\n  .alc-card p{ color:var(--ash); font-size:.92rem; margin:0; flex:1; }\n  .alc-actions{ display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; opacity:0; transform:translateY(6px); transition:opacity .16s ease,transform .16s ease; }\n  .alc-card:hover .alc-actions{ opacity:1; transform:none; }\n  @media(hover:none){ .alc-actions{ opacity:1; transform:none; } }\n  .alc-actions a{ flex:1 1 0; min-width:0; text-align:center; font-weight:600; font-size:.85rem; padding:9px 8px; border-radius:9px; white-space:nowrap; }\n  .alc-actions .u{ background-image:linear-gradient(135deg,var(--f1),var(--f2)); color:#fff; }\n  .alc-actions .a{ background:transparent; color:var(--ink); border:1px solid var(--line); }\n  .alc-actions .a:hover{ border-color:var(--f1); color:var(--f2); }\n  .alc-foot{ margin-top:34px; color:#57514d; font-size:.85rem; }\n<\/style>\n<header class=\"alc-top\">\n  <span class=\"alc-brand\"><span class=\"dot\"><\/span> Alovio \u00b7 WooCommerce<\/span><\/p>\n<nav class=\"alc-nav\">\n    <a href=\"\/woo\/\">Demos<\/a><br \/>\n    <a href=\"\/woo\/shop\/\">Shop<\/a><br \/>\n    <a class=\"cta\" href=\"https:\/\/alovio.org\/store\">Store \u2197<\/a><br \/>\n  <\/nav>\n<\/header>\n<div class=\"alc-wrap\">\n<div class=\"alc-kicker\">\/\/ alovio for woocommerce<\/div>\n<h1>Every plugin, <span class=\"fl\">live.<\/span><\/h1>\n<p class=\"alc-lede\">A real WooCommerce store running the Alovio plugins. Open each one as a <b>user<\/b> (the storefront experience) or as the <b>admin<\/b> (the builder).<\/p>\n<div class=\"alc-grid\">\n<div class=\"alc-card\">\n<div class=\"alc-card__tag\">Checkout<\/div>\n<h3>Checkout Fields<\/h3>\n<p>Custom checkout fields with free conditional logic \u2014 show, hide or require by cart, role, shipping or country.<\/p>\n<div class=\"alc-actions\">\n        <a class=\"u\" href=\"\/woo\/checkout\/\">View as user<\/a><br \/>\n        <a class=\"a\" href=\"\/woo\/?demo_admin=clcf-checkout-fields\">View as admin<\/a>\n      <\/div>\n<\/p><\/div>\n<div class=\"alc-card\">\n<div class=\"alc-card__tag\">Product page<\/div>\n<h3>Product Options<\/h3>\n<p>Extra fields &amp; paid add-ons with a live, currency-formatted options total and free conditional logic.<\/p>\n<div class=\"alc-actions\">\n        <a class=\"u\" href=\"\/woo\/product\/forge-hoodie\/\">View as user<\/a><br \/>\n        <a class=\"a\" href=\"\/woo\/?demo_edit=13\">View as admin<\/a>\n      <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p class=\"alc-foot\">Sandbox \u2014 explore freely, everything resets hourly.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Alovio \u00b7 WooCommerce Demos Shop Store \u2197 \/\/ alovio for woocommerce Every plugin, live. A real WooCommerce store running the Alovio plugins. Open each one as a user (the storefront experience) or as the admin (the builder). Checkout Checkout Fields Custom checkout fields with free conditional logic \u2014 show, hide or require by cart, role, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-19","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.alovio.org\/woo\/wp-json\/wp\/v2\/pages\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.alovio.org\/woo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.alovio.org\/woo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.alovio.org\/woo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.alovio.org\/woo\/wp-json\/wp\/v2\/comments?post=19"}],"version-history":[{"count":5,"href":"https:\/\/demo.alovio.org\/woo\/wp-json\/wp\/v2\/pages\/19\/revisions"}],"predecessor-version":[{"id":24,"href":"https:\/\/demo.alovio.org\/woo\/wp-json\/wp\/v2\/pages\/19\/revisions\/24"}],"wp:attachment":[{"href":"https:\/\/demo.alovio.org\/woo\/wp-json\/wp\/v2\/media?parent=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}