Testing a New Produc
Clean WordPress/WooCommerce theme foundation
v16.2 CSS preserved directly
v16.2 JS preserved directly
v16.2 reference HTML included
front-page.php uses the v16.2 baseline as master UI
WooCommerce product card template
Shop/category archive template
Single product template using v16.2-style structure
Plugin compatibility placeholder
PHP syntax check passed
- Color: Red, Yellow, Red
Click any tab above to view the information.
Description
/*
Digitnet Store compact order confirmation/status mockup
Goal:
- Keep all important order information.
- Reduce visual noise by showing essentials first.
- Move secondary information into clean expandable sections.
- Keep class prefix "dn-" to avoid WooCommerce/theme conflicts.
WooCommerce mapping notes:
- mockOrder.number -> $order->get_order_number()
- mockOrder.date -> wc_format_datetime( $order->get_date_created() )
- mockOrder.payment -> $order->get_payment_method_title()
- mockOrder.items -> $order->get_items()
- activeStateKey -> $order->get_status()
- Remove .dn-mock-tools on live customer pages.
*/
Digitnet Store compact order confirmation/status mockup
Goal:
- Keep all important order information.
- Reduce visual noise by showing essentials first.
- Move secondary information into clean expandable sections.
- Keep class prefix "dn-" to avoid WooCommerce/theme conflicts.
WooCommerce mapping notes:
- mockOrder.number -> $order->get_order_number()
- mockOrder.date -> wc_format_datetime( $order->get_date_created() )
- mockOrder.payment -> $order->get_payment_method_title()
- mockOrder.items -> $order->get_items()
- activeStateKey -> $order->get_status()
- Remove .dn-mock-tools on live customer pages.
*/
:root{
--dn-red:#ff3c20;
--dn-red-dark:#d92f17;
--dn-navy:#071b36;
--dn-text:#101828;
--dn-muted:#667085;
--dn-soft:#f6f8fc;
--dn-line:#e6eaf1;
--dn-white:#fff;
--dn-green:#16a34a;
--dn-blue:#0b4aa2;
--dn-warning:#f59e0b;
--dn-danger:#dc2626;
--dn-shadow:0 14px 34px rgba(16,24,40,.08);
}
*{box-sizing:border-box}
body{
margin:0;
background:#f4f6fb;
color:var(--dn-text);
font-family:Inter,Arial,Helvetica,sans-serif;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.dn-theme-shell{
min-height:100vh;
display:flex;
flex-direction:column;
}
.dn-theme-header{
background:#fff;
border-bottom:1px solid var(--dn-line);
}
.dn-theme-header-inner{
max-width:1040px;
margin:0 auto;
padding:13px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
}
.dn-header-logo img{
width:132px;
display:block;
}
.dn-header-actions{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
color:#475467;
font-size:13px;
font-weight:800;
}
.dn-header-actions a:hover{color:var(--dn-red)}
.dn-order-page{
width:100%;
max-width:1040px;
margin:0 auto;
padding:22px 16px 42px;
flex:1;
}
.dn-breadcrumb{
display:flex;
align-items:center;
gap:7px;
flex-wrap:wrap;
margin-bottom:12px;
color:var(--dn-muted);
font-size:12px;
}
.dn-breadcrumb strong{color:var(--dn-red)}
.dn-confirmation-card{
background:#fff;
border:1px solid var(--dn-line);
border-radius:22px;
box-shadow:var(--dn-shadow);
overflow:hidden;
}
.dn-confirmation-top{
display:grid;
grid-template-columns:1fr auto;
gap:18px;
align-items:center;
padding:24px;
background:
radial-gradient(circle at 92% 18%,rgba(255,60,32,.10),transparent 28%),
linear-gradient(135deg,#fff,#fff7f5);
border-bottom:1px solid var(--dn-line);
}
.dn-status-pill{
display:inline-flex;
align-items:center;
gap:8px;
width:max-content;
min-height:30px;
padding:6px 11px;
border-radius:999px;
background:#ecfdf3;
color:#0f6848;
font-size:12px;
font-weight:950;
}
.dn-status-pill.info{background:#eef5ff;color:#1f4fd8}
.dn-status-pill.warning{background:#fff7ed;color:#8a5200}
.dn-status-pill.error{background:#fef2f2;color:#b3261e}
.dn-confirmation-title{
margin:12px 0 8px;
color:var(--dn-navy);
font-size:28px;
line-height:1.1;
letter-spacing:-.03em;
}
.dn-confirmation-text{
margin:0;
max-width:650px;
color:#475467;
font-size:14px;
line-height:1.6;
}
.dn-status-mark{
width:74px;
height:74px;
border-radius:50%;
display:grid;
place-items:center;
background:#fff;
color:var(--dn-green);
border:3px solid var(--dn-green);
font-size:34px;
font-weight:950;
box-shadow:0 12px 26px rgba(22,163,74,.15);
}
.dn-status-mark.info{color:var(--dn-blue);border-color:var(--dn-blue);box-shadow:0 12px 26px rgba(11,74,162,.14)}
.dn-status-mark.warning{color:var(--dn-warning);border-color:var(--dn-warning);box-shadow:0 12px 26px rgba(245,158,11,.14)}
.dn-status-mark.error{color:var(--dn-danger);border-color:var(--dn-danger);box-shadow:0 12px 26px rgba(220,38,38,.14)}
.dn-quick-facts{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0;
border-bottom:1px solid var(--dn-line);
background:#fff;
}
.dn-fact{
padding:16px 18px;
border-right:1px solid var(--dn-line);
}
.dn-fact:last-child{border-right:0}
.dn-fact span{
display:block;
margin-bottom:6px;
color:#98a2b3;
font-size:10px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}
.dn-fact strong{
display:block;
color:var(--dn-navy);
font-size:15px;
line-height:1.3;
}
.dn-fact.total strong{color:var(--dn-red);font-size:17px}
.dn-compact-body{
display:grid;
grid-template-columns:minmax(0,1fr) 292px;
gap:20px;
padding:22px;
}
.dn-progress-card,
.dn-side-card,
.dn-accordion-card{
background:#fff;
border:1px solid var(--dn-line);
border-radius:18px;
}
.dn-progress-card{
padding:18px;
margin-bottom:16px;
}
.dn-section-title{
margin:0 0 7px;
color:var(--dn-navy);
font-size:16px;
line-height:1.3;
}
.dn-section-note{
margin:0 0 15px;
color:#475467;
font-size:13px;
line-height:1.55;
}
.dn-line-progress{
height:7px;
border-radius:999px;
background:#edf0f5;
overflow:hidden;
margin-bottom:14px;
}
.dn-line-progress span{
display:block;
width:0;
height:100%;
background:var(--dn-red);
border-radius:999px;
transition:width .3s ease;
}
.dn-steps{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
}
.dn-step{
position:relative;
text-align:center;
}
.dn-step-dot{
width:28px;
height:28px;
margin:0 auto 6px;
border-radius:50%;
display:grid;
place-items:center;
background:#e4e7ec;
color:#667085;
font-size:11px;
font-weight:950;
}
.dn-step.active .dn-step-dot{
background:var(--dn-red);
color:#fff;
}
.dn-step-label{
color:#667085;
font-size:10px;
font-weight:950;
line-height:1.25;
}
.dn-step.active .dn-step-label{color:var(--dn-red)}
.dn-mini-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-top:16px;
}
.dn-mini-info{
padding:11px;
border-radius:14px;
background:#fbfcff;
border:1px solid var(--dn-line);
}
.dn-mini-info span{
display:block;
margin-bottom:5px;
color:#98a2b3;
font-size:10px;
font-weight:950;
text-transform:uppercase;
letter-spacing:.05em;
}
.dn-mini-info strong{
display:block;
color:var(--dn-navy);
font-size:12px;
line-height:1.35;
}
.dn-actions{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-bottom:16px;
}
.dn-btn{
min-height:42px;
padding:10px 12px;
border:0;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:12px;
font-weight:950;
cursor:pointer;
}
.dn-btn.primary{background:var(--dn-red);color:#fff}
.dn-btn.primary:hover{background:var(--dn-red-dark)}
.dn-btn.dark{background:var(--dn-navy);color:#fff}
.dn-btn.light{background:#fff;color:var(--dn-navy);border:1px solid var(--dn-line)}
.dn-accordion-list{
display:grid;
gap:10px;
}
.dn-accordion-card{
overflow:hidden;
}
.dn-accordion-card summary{
list-style:none;
cursor:pointer;
padding:15px 17px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
color:var(--dn-navy);
font-size:14px;
font-weight:950;
}
.dn-accordion-card summary::-webkit-details-marker{display:none}
.dn-accordion-card summary::after{
content:"+";
width:24px;
height:24px;
border-radius:50%;
display:grid;
place-items:center;
flex:0 0 auto;
background:#fff0ed;
color:var(--dn-red);
font-weight:950;
}
.dn-accordion-card[open] summary{
border-bottom:1px solid var(--dn-line);
}
.dn-accordion-card[open] summary::after{content:"–"}
.dn-accordion-body{
padding:16px 17px 17px;
}
.dn-item-list{
display:grid;
gap:10px;
}
.dn-item-row{
display:grid;
grid-template-columns:58px 1fr auto;
gap:12px;
align-items:center;
padding:10px;
border:1px solid var(--dn-line);
border-radius:14px;
background:#fbfcff;
}
.dn-item-img{
width:58px;
height:58px;
border-radius:12px;
background:#f1f4f8;
display:grid;
place-items:center;
overflow:hidden;
}
.dn-item-img img{
width:100%;
height:100%;
object-fit:contain;
padding:6px;
}
.dn-item-name{
color:var(--dn-navy);
font-size:13px;
font-weight:950;
line-height:1.35;
}
.dn-item-meta{
margin-top:4px;
color:var(--dn-muted);
font-size:11px;
line-height:1.45;
}
.dn-item-price{
min-width:82px;
color:var(--dn-red);
text-align:right;
font-size:13px;
font-weight:950;
}
.dn-two-col{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.dn-address-box{
min-height:126px;
padding:14px;
border:1px solid var(--dn-line);
border-radius:14px;
background:#fbfcff;
}
.dn-address-box h3{
margin:0 0 8px;
color:var(--dn-navy);
font-size:13px;
}
.dn-address-box p{
margin:0;
color:#475467;
font-size:12px;
line-height:1.65;
}
.dn-summary-list{
display:grid;
gap:0;
}
.dn-summary-row{
display:flex;
justify-content:space-between;
gap:18px;
padding:11px 0;
border-bottom:1px solid var(--dn-line);
font-size:13px;
}
.dn-summary-row span{color:#475467}
.dn-summary-row strong{text-align:right;color:var(--dn-navy)}
.dn-summary-total{
display:flex;
justify-content:space-between;
gap:18px;
padding-top:14px;
color:var(--dn-navy);
font-size:18px;
font-weight:950;
}
.dn-summary-total strong{color:var(--dn-red)}
.dn-side-card{
padding:16px;
position:sticky;
top:16px;
}
.dn-side-total{
padding:14px;
border-radius:16px;
background:#fff7f5;
border:1px solid #ffd1c9;
margin-bottom:12px;
}
.dn-side-total span{
display:block;
margin-bottom:4px;
color:#8a5200;
font-size:11px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}
.dn-side-total strong{
display:block;
color:var(--dn-red);
font-size:24px;
line-height:1.1;
}
.dn-side-meta{
display:grid;
gap:10px;
margin-bottom:13px;
}
.dn-side-line{
display:flex;
justify-content:space-between;
gap:12px;
font-size:12px;
}
.dn-side-line span{color:#667085}
.dn-side-line strong{color:var(--dn-navy);text-align:right}
.dn-help{
border-radius:14px;
padding:12px;
background:#ecfdf3;
border:1px solid #c7f0d8;
color:#0f6848;
font-size:12px;
line-height:1.55;
}
.dn-mock-tools{
margin-top:16px;
}
.dn-mock-tools details{
border:1px dashed #ccd4df;
border-radius:16px;
background:#fff;
overflow:hidden;
}
.dn-mock-tools summary{
padding:12px 14px;
cursor:pointer;
font-size:12px;
font-weight:950;
color:var(--dn-navy);
}
.dn-mock-inner{
padding:0 14px 14px;
}
.dn-select{
width:100%;
height:40px;
border:1px solid var(--dn-line);
border-radius:12px;
color:var(--dn-navy);
background:#fff;
font-weight:800;
padding:0 12px;
}
.dn-theme-footer{
margin-top:auto;
background:#071b36;
color:#d0d5dd;
}
.dn-theme-footer-inner{
max-width:1040px;
margin:0 auto;
padding:18px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
font-size:12px;
}
.dn-theme-footer strong{color:#fff}
@media(max-width:900px){
.dn-compact-body{
grid-template-columns:1fr;
}
.dn-side-card{
position:static;
}
}
@media(max-width:720px){
.dn-theme-header-inner{
align-items:flex-start;
flex-direction:column;
}
.dn-confirmation-top{
grid-template-columns:1fr;
padding:20px;
}
.dn-status-mark{
width:62px;
height:62px;
font-size:28px;
}
.dn-confirmation-title{
font-size:24px;
}
.dn-quick-facts{
grid-template-columns:repeat(2,1fr);
}
.dn-fact:nth-child(2){border-right:0}
.dn-fact:nth-child(1),.dn-fact:nth-child(2){border-bottom:1px solid var(--dn-line)}
.dn-compact-body{
padding:16px;
}
.dn-mini-grid,
.dn-actions,
.dn-two-col{
grid-template-columns:1fr;
}
.dn-item-row{
grid-template-columns:52px 1fr;
}
.dn-item-price{
grid-column:2;
min-width:0;
text-align:left;
}
}
@media(max-width:460px){
.dn-order-page{padding:16px 10px 34px}
.dn-quick-facts{grid-template-columns:1fr}
.dn-fact{border-right:0;border-bottom:1px solid var(--dn-line)}
.dn-fact:last-child{border-bottom:0}
.dn-steps{gap:6px}
.dn-step-label{font-size:9px}
}
✓ Payment received securely
Order Confirmed
Your order has been received successfully. We have sent the order details to your email and your items are now being prepared.
Delivery Progress
Your order has been received and is being prepared for dispatch.
Items in your order
Billing & shipping details
Billing Address
jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
Shipping Address
Payment summary
Mockup status preview controls
const orderStates = { confirmation: { label: "Order Confirmation", tone: "success", icon: "✓", kicker: "✓ Payment received securely", heroTitle: "Order Confirmed", heroText: "Thank you. Your order has been received successfully and your items are now being prepared.", delivery: "Your order has been received and is being prepared for dispatch.", progress: 15, step: 1, tracking: "Tracking will be generated once shipped.", actions: [ { label:"Track Order", href:"/track-order/?order_id=29397" }, { label:"View Order", href:"/my-account/view-order/29397/" }, { label:"Continue Shopping", href:"/shop/" } ] },
received: { label: "Order Received", tone: "info", icon: "🧾", kicker: "Order received", heroTitle: "We’re Preparing Your Order", heroText: "Your order is being processed. We will update you once the package moves to the next stage.", delivery: "Your order is currently being processed at our fulfillment center.", progress: 30, step: 2, tracking: "Tracking will be available once shipped.", actions: [ { label:"View Order", href:"/my-account/view-order/29397/" }, { label:"Track Order", href:"/track-order/?order_id=29397" }, { label:"Contact Support", href:"mailto:hello@digitnetstore.com" } ] },
transit: { label: "Order In Transit", tone: "info", icon: "🚚", kicker: "Package in transit", heroTitle: "Your Order Is On The Way", heroText: "Your package has left our warehouse and is moving through the delivery network.", delivery: "Your package has left our warehouse and is currently in transit.", progress: 60, step: 3, tracking: "Tracking number available.", actions: [ { label:"Track Shipment", href:"/track-order/?order_id=29397" }, { label:"View Order", href:"/my-account/view-order/29397/" }, { label:"Contact Support", href:"mailto:hello@digitnetstore.com" } ] },
outForDelivery: { label: "Out For Delivery", tone: "info", icon: "📦", kicker: "Arriving today", heroTitle: "Out For Delivery", heroText: "The courier has your package and is scheduled to deliver it today.", delivery: "The courier is delivering your package today.", progress: 85, step: 3, tracking: "Courier has package.", actions: [ { label:"Track Shipment", href:"/track-order/?order_id=29397" }, { label:"View Order", href:"/my-account/view-order/29397/" }, { label:"Contact Delivery Support", href:"mailto:hello@digitnetstore.com" } ] },
delivered: { label: "Delivered", tone: "success", icon: "✓", kicker: "Delivery confirmed", heroTitle: "Delivered Successfully", heroText: "Your order was delivered successfully. We hope you enjoy your purchase.", delivery: "Your order was delivered successfully.", progress: 100, step: 4, tracking: "Delivery confirmed.", actions: [ { label:"Download Receipt", href:"/my-account/orders/" }, { label:"Request Support", href:"mailto:hello@digitnetstore.com" }, { label:"Shop Again", href:"/shop/" } ] },
failedDelivery: { label: "Failed Delivery", tone: "warning", icon: "!", kicker: "Delivery needs attention", heroTitle: "Delivery Attempt Failed", heroText: "The courier could not complete delivery. Please confirm the address or contact support.", delivery: "The courier could not complete delivery. Please confirm your address.", progress: 85, step: 3, tracking: "Delivery attempt logged.", actions: [ { label:"Update Address", href:"/my-account/edit-address/" }, { label:"View Order", href:"/my-account/view-order/29397/" }, { label:"Contact Support", href:"mailto:hello@digitnetstore.com" } ] },
cancelled: { label: "Cancelled Order", tone: "error", icon: "×", kicker: "Order cancelled", heroTitle: "Order Cancelled", heroText: "This order has been cancelled and is no longer active.", delivery: "This order has been cancelled and is no longer active.", progress: 0, step: 0, tracking: "Not applicable.", actions: [ { label:"Reorder Items", href:"/shop/" }, { label:"View Account", href:"/my-account/" }, { label:"Contact Support", href:"mailto:hello@digitnetstore.com" } ] },
failedPayment: { label: "Failed Payment", tone: "error", icon: "×", kicker: "Payment failed", heroTitle: "Payment Could Not Be Completed", heroText: "Payment could not be processed. You can retry payment or choose another payment method.", delivery: "Payment could not be processed.", progress: 0, step: 0, tracking: "Not applicable.", actions: [ { label:"Retry Payment", href:"/checkout/order-pay/29397/" }, { label:"Change Payment", href:"/checkout/" }, { label:"Contact Support", href:"mailto:hello@digitnetstore.com" } ] } };
const mockOrder = { number: "#29397", date: "June 18, 2026", paymentMethod: "Cash on Delivery", total: "₦42,703", subtotal: "₦42,703", shippingCost: "Pickup from Lagos Office", tax: "₦0", soldBy: "Digitnet Store", shippingMethod: "Pickup from Lagos Office",
billingAddress: [ "Echebiri Onyinye Collins", "37 Sunmola Street, Mende, Maryland", "Lagos, Nigeria", "ocechebiri@gmail.com" ],
shippingAddress: [ "No shipping address required.", "Pickup from Lagos Office." ],
items: [ { name: "Car 12V High Temperature Resistant Emergency LED Lamp Portable Power Bank Lithium Battery Jump Starter", sku: "DN-JUMP", qty: 1, price: "₦42,703", image: "https://digitnetstore.com/wp-content/uploads/2025/12/1-9.jpeg" }, { name: "Professional Wireless Headset", sku: "DNT-HS-78421", qty: 1, price: "US $159.99", image: "https://digitnetstore.com/wp-content/uploads/2023/02/Z-G1000-1.webp" }, { name: "Business Call Headphone", sku: "DNT-BH-39204", qty: 1, price: "US $89.99", image: "https://digitnetstore.com/wp-content/uploads/2023/03/Head.png" } ] };
const stepLabels = ["Received", "Processing", "Shipped", "Delivered"]; const stateKeys = Object.keys(orderStates); let activeStateIndex = 0;
function setText(id, value){ const el = document.getElementById(id); if(el) el.textContent = value; }
function setHTML(id, value){ const el = document.getElementById(id); if(el) el.innerHTML = value; }
function escapeHTML(value){ return String(value) .replaceAll("&","&") .replaceAll("",">") .replaceAll('"',""") .replaceAll("'","'"); }
function addressToHTML(lines){
return lines.map(escapeHTML).join("
");
}
function buttonClass(index){ if(index === 0) return "dn-btn primary"; if(index === 1) return "dn-btn dark"; return "dn-btn light"; }
function renderOrderBase(){ setText("dnOrderNumber", mockOrder.number); setText("dnOrderDate", mockOrder.date); setText("dnPaymentMethod", mockOrder.paymentMethod); setText("dnOrderTotal", mockOrder.total); setText("dnSideTotal", mockOrder.total); setText("dnSideOrder", mockOrder.number); setText("dnSidePayment", mockOrder.paymentMethod); setText("dnSideDelivery", mockOrder.shippingMethod); setText("dnSubtotal", mockOrder.subtotal); setText("dnShippingCost", mockOrder.shippingCost); setText("dnTax", mockOrder.tax); setText("dnPaymentSummary", mockOrder.paymentMethod); setText("dnSummaryTotal", mockOrder.total); setText("dnSoldBy", mockOrder.soldBy); setText("dnShippingMethod", mockOrder.shippingMethod); setHTML("dnBillingAddress", addressToHTML(mockOrder.billingAddress)); setHTML("dnShippingAddress", addressToHTML(mockOrder.shippingAddress));
const items = mockOrder.items.map(item => `
`).join("");
setHTML("dnItemsList", items); }
function renderSteps(activeStep){ const steps = stepLabels.map((label, index) => { const stepNumber = index + 1; const isActive = activeStep >= stepNumber; return `
`; }).join("");
setHTML("dnSteps", steps); }
function renderActions(actions){ const html = actions.map((action, index) => ` ${escapeHTML(action.label)} `).join("");
setHTML("dnActions", html); }
function renderState(stateKey){ const state = orderStates[stateKey]; if(!state) return;
const kicker = document.getElementById("dnKicker"); const icon = document.getElementById("dnStatusIcon"); const progressFill = document.getElementById("dnProgressFill");
setText("dnBreadcrumbStatus", state.label); setText("dnKicker", state.kicker); setText("dnHeroTitle", state.heroTitle); setText("dnHeroText", state.heroText); setText("dnDeliveryText", state.delivery); setText("dnTrackingText", state.tracking); setText("dnSideStatus", state.label);
kicker.className = "dn-status-pill " + state.tone; icon.className = "dn-status-mark " + state.tone; icon.textContent = state.icon; progressFill.style.width = state.progress + "%";
renderSteps(state.step); renderActions(state.actions);
const select = document.getElementById("dnStateSelect"); if(select) select.value = stateKey; }
function buildPreviewControls(){ const select = document.getElementById("dnStateSelect"); if(!select) return;
select.innerHTML = stateKeys.map(key => { return `${escapeHTML(orderStates[key].label)}`; }).join("");
select.addEventListener("change", event => { activeStateIndex = stateKeys.indexOf(event.target.value); renderState(event.target.value); }); }
renderOrderBase(); buildPreviewControls(); renderState(stateKeys[activeStateIndex]);
:root{
--dn-red:#ff3c20;
--dn-red-dark:#d92f17;
--dn-navy:#071b36;
--dn-text:#101828;
--dn-muted:#667085;
--dn-soft:#f6f8fc;
--dn-line:#e6eaf1;
--dn-white:#fff;
--dn-green:#16a34a;
--dn-blue:#0b4aa2;
--dn-warning:#f59e0b;
--dn-danger:#dc2626;
--dn-shadow:0 14px 34px rgba(16,24,40,.08);
}
*{box-sizing:border-box}
body{
margin:0;
background:#f4f6fb;
color:var(--dn-text);
font-family:Inter,Arial,Helvetica,sans-serif;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.dn-theme-shell{
min-height:100vh;
display:flex;
flex-direction:column;
}
.dn-theme-header{
background:#fff;
border-bottom:1px solid var(--dn-line);
}
.dn-theme-header-inner{
max-width:1040px;
margin:0 auto;
padding:13px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
}
.dn-header-logo img{
width:132px;
display:block;
}
.dn-header-actions{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
color:#475467;
font-size:13px;
font-weight:800;
}
.dn-header-actions a:hover{color:var(--dn-red)}
.dn-order-page{
width:100%;
max-width:1040px;
margin:0 auto;
padding:22px 16px 42px;
flex:1;
}
.dn-breadcrumb{
display:flex;
align-items:center;
gap:7px;
flex-wrap:wrap;
margin-bottom:12px;
color:var(--dn-muted);
font-size:12px;
}
.dn-breadcrumb strong{color:var(--dn-red)}
.dn-confirmation-card{
background:#fff;
border:1px solid var(--dn-line);
border-radius:22px;
box-shadow:var(--dn-shadow);
overflow:hidden;
}
.dn-confirmation-top{
display:grid;
grid-template-columns:1fr auto;
gap:18px;
align-items:center;
padding:24px;
background:
radial-gradient(circle at 92% 18%,rgba(255,60,32,.10),transparent 28%),
linear-gradient(135deg,#fff,#fff7f5);
border-bottom:1px solid var(--dn-line);
}
.dn-status-pill{
display:inline-flex;
align-items:center;
gap:8px;
width:max-content;
min-height:30px;
padding:6px 11px;
border-radius:999px;
background:#ecfdf3;
color:#0f6848;
font-size:12px;
font-weight:950;
}
.dn-status-pill.info{background:#eef5ff;color:#1f4fd8}
.dn-status-pill.warning{background:#fff7ed;color:#8a5200}
.dn-status-pill.error{background:#fef2f2;color:#b3261e}
.dn-confirmation-title{
margin:12px 0 8px;
color:var(--dn-navy);
font-size:28px;
line-height:1.1;
letter-spacing:-.03em;
}
.dn-confirmation-text{
margin:0;
max-width:650px;
color:#475467;
font-size:14px;
line-height:1.6;
}
.dn-status-mark{
width:74px;
height:74px;
border-radius:50%;
display:grid;
place-items:center;
background:#fff;
color:var(--dn-green);
border:3px solid var(--dn-green);
font-size:34px;
font-weight:950;
box-shadow:0 12px 26px rgba(22,163,74,.15);
}
.dn-status-mark.info{color:var(--dn-blue);border-color:var(--dn-blue);box-shadow:0 12px 26px rgba(11,74,162,.14)}
.dn-status-mark.warning{color:var(--dn-warning);border-color:var(--dn-warning);box-shadow:0 12px 26px rgba(245,158,11,.14)}
.dn-status-mark.error{color:var(--dn-danger);border-color:var(--dn-danger);box-shadow:0 12px 26px rgba(220,38,38,.14)}
.dn-quick-facts{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0;
border-bottom:1px solid var(--dn-line);
background:#fff;
}
.dn-fact{
padding:16px 18px;
border-right:1px solid var(--dn-line);
}
.dn-fact:last-child{border-right:0}
.dn-fact span{
display:block;
margin-bottom:6px;
color:#98a2b3;
font-size:10px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}
.dn-fact strong{
display:block;
color:var(--dn-navy);
font-size:15px;
line-height:1.3;
}
.dn-fact.total strong{color:var(--dn-red);font-size:17px}
.dn-compact-body{
display:grid;
grid-template-columns:minmax(0,1fr) 292px;
gap:20px;
padding:22px;
}
.dn-progress-card,
.dn-side-card,
.dn-accordion-card{
background:#fff;
border:1px solid var(--dn-line);
border-radius:18px;
}
.dn-progress-card{
padding:18px;
margin-bottom:16px;
}
.dn-section-title{
margin:0 0 7px;
color:var(--dn-navy);
font-size:16px;
line-height:1.3;
}
.dn-section-note{
margin:0 0 15px;
color:#475467;
font-size:13px;
line-height:1.55;
}
.dn-line-progress{
height:7px;
border-radius:999px;
background:#edf0f5;
overflow:hidden;
margin-bottom:14px;
}
.dn-line-progress span{
display:block;
width:0;
height:100%;
background:var(--dn-red);
border-radius:999px;
transition:width .3s ease;
}
.dn-steps{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
}
.dn-step{
position:relative;
text-align:center;
}
.dn-step-dot{
width:28px;
height:28px;
margin:0 auto 6px;
border-radius:50%;
display:grid;
place-items:center;
background:#e4e7ec;
color:#667085;
font-size:11px;
font-weight:950;
}
.dn-step.active .dn-step-dot{
background:var(--dn-red);
color:#fff;
}
.dn-step-label{
color:#667085;
font-size:10px;
font-weight:950;
line-height:1.25;
}
.dn-step.active .dn-step-label{color:var(--dn-red)}
.dn-mini-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-top:16px;
}
.dn-mini-info{
padding:11px;
border-radius:14px;
background:#fbfcff;
border:1px solid var(--dn-line);
}
.dn-mini-info span{
display:block;
margin-bottom:5px;
color:#98a2b3;
font-size:10px;
font-weight:950;
text-transform:uppercase;
letter-spacing:.05em;
}
.dn-mini-info strong{
display:block;
color:var(--dn-navy);
font-size:12px;
line-height:1.35;
}
.dn-actions{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-bottom:16px;
}
.dn-btn{
min-height:42px;
padding:10px 12px;
border:0;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:12px;
font-weight:950;
cursor:pointer;
}
.dn-btn.primary{background:var(--dn-red);color:#fff}
.dn-btn.primary:hover{background:var(--dn-red-dark)}
.dn-btn.dark{background:var(--dn-navy);color:#fff}
.dn-btn.light{background:#fff;color:var(--dn-navy);border:1px solid var(--dn-line)}
.dn-accordion-list{
display:grid;
gap:10px;
}
.dn-accordion-card{
overflow:hidden;
}
.dn-accordion-card summary{
list-style:none;
cursor:pointer;
padding:15px 17px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
color:var(--dn-navy);
font-size:14px;
font-weight:950;
}
.dn-accordion-card summary::-webkit-details-marker{display:none}
.dn-accordion-card summary::after{
content:"+";
width:24px;
height:24px;
border-radius:50%;
display:grid;
place-items:center;
flex:0 0 auto;
background:#fff0ed;
color:var(--dn-red);
font-weight:950;
}
.dn-accordion-card[open] summary{
border-bottom:1px solid var(--dn-line);
}
.dn-accordion-card[open] summary::after{content:"–"}
.dn-accordion-body{
padding:16px 17px 17px;
}
.dn-item-list{
display:grid;
gap:10px;
}
.dn-item-row{
display:grid;
grid-template-columns:58px 1fr auto;
gap:12px;
align-items:center;
padding:10px;
border:1px solid var(--dn-line);
border-radius:14px;
background:#fbfcff;
}
.dn-item-img{
width:58px;
height:58px;
border-radius:12px;
background:#f1f4f8;
display:grid;
place-items:center;
overflow:hidden;
}
.dn-item-img img{
width:100%;
height:100%;
object-fit:contain;
padding:6px;
}
.dn-item-name{
color:var(--dn-navy);
font-size:13px;
font-weight:950;
line-height:1.35;
}
.dn-item-meta{
margin-top:4px;
color:var(--dn-muted);
font-size:11px;
line-height:1.45;
}
.dn-item-price{
min-width:82px;
color:var(--dn-red);
text-align:right;
font-size:13px;
font-weight:950;
}
.dn-two-col{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.dn-address-box{
min-height:126px;
padding:14px;
border:1px solid var(--dn-line);
border-radius:14px;
background:#fbfcff;
}
.dn-address-box h3{
margin:0 0 8px;
color:var(--dn-navy);
font-size:13px;
}
.dn-address-box p{
margin:0;
color:#475467;
font-size:12px;
line-height:1.65;
}
.dn-summary-list{
display:grid;
gap:0;
}
.dn-summary-row{
display:flex;
justify-content:space-between;
gap:18px;
padding:11px 0;
border-bottom:1px solid var(--dn-line);
font-size:13px;
}
.dn-summary-row span{color:#475467}
.dn-summary-row strong{text-align:right;color:var(--dn-navy)}
.dn-summary-total{
display:flex;
justify-content:space-between;
gap:18px;
padding-top:14px;
color:var(--dn-navy);
font-size:18px;
font-weight:950;
}
.dn-summary-total strong{color:var(--dn-red)}
.dn-side-card{
padding:16px;
position:sticky;
top:16px;
}
.dn-side-total{
padding:14px;
border-radius:16px;
background:#fff7f5;
border:1px solid #ffd1c9;
margin-bottom:12px;
}
.dn-side-total span{
display:block;
margin-bottom:4px;
color:#8a5200;
font-size:11px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}
.dn-side-total strong{
display:block;
color:var(--dn-red);
font-size:24px;
line-height:1.1;
}
.dn-side-meta{
display:grid;
gap:10px;
margin-bottom:13px;
}
.dn-side-line{
display:flex;
justify-content:space-between;
gap:12px;
font-size:12px;
}
.dn-side-line span{color:#667085}
.dn-side-line strong{color:var(--dn-navy);text-align:right}
.dn-help{
border-radius:14px;
padding:12px;
background:#ecfdf3;
border:1px solid #c7f0d8;
color:#0f6848;
font-size:12px;
line-height:1.55;
}
.dn-mock-tools{
margin-top:16px;
}
.dn-mock-tools details{
border:1px dashed #ccd4df;
border-radius:16px;
background:#fff;
overflow:hidden;
}
.dn-mock-tools summary{
padding:12px 14px;
cursor:pointer;
font-size:12px;
font-weight:950;
color:var(--dn-navy);
}
.dn-mock-inner{
padding:0 14px 14px;
}
.dn-select{
width:100%;
height:40px;
border:1px solid var(--dn-line);
border-radius:12px;
color:var(--dn-navy);
background:#fff;
font-weight:800;
padding:0 12px;
}
.dn-theme-footer{
margin-top:auto;
background:#071b36;
color:#d0d5dd;
}
.dn-theme-footer-inner{
max-width:1040px;
margin:0 auto;
padding:18px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
font-size:12px;
}
.dn-theme-footer strong{color:#fff}
@media(max-width:900px){
.dn-compact-body{
grid-template-columns:1fr;
}
.dn-side-card{
position:static;
}
}
@media(max-width:720px){
.dn-theme-header-inner{
align-items:flex-start;
flex-direction:column;
}
.dn-confirmation-top{
grid-template-columns:1fr;
padding:20px;
}
.dn-status-mark{
width:62px;
height:62px;
font-size:28px;
}
.dn-confirmation-title{
font-size:24px;
}
.dn-quick-facts{
grid-template-columns:repeat(2,1fr);
}
.dn-fact:nth-child(2){border-right:0}
.dn-fact:nth-child(1),.dn-fact:nth-child(2){border-bottom:1px solid var(--dn-line)}
.dn-compact-body{
padding:16px;
}
.dn-mini-grid,
.dn-actions,
.dn-two-col{
grid-template-columns:1fr;
}
.dn-item-row{
grid-template-columns:52px 1fr;
}
.dn-item-price{
grid-column:2;
min-width:0;
text-align:left;
}
}
@media(max-width:460px){
.dn-order-page{padding:16px 10px 34px}
.dn-quick-facts{grid-template-columns:1fr}
.dn-fact{border-right:0;border-bottom:1px solid var(--dn-line)}
.dn-fact:last-child{border-bottom:0}
.dn-steps{gap:6px}
.dn-step-label{font-size:9px}
}
✓ Payment received securely
Order Confirmed
Your order has been received successfully. We have sent the order details to your email and your items are now being prepared.
Delivery Progress
Your order has been received and is being prepared for dispatch.
Items in your order
Billing & shipping details
Billing Address
Shipping Address
Payment summary
Mockup status preview controls
const orderStates = { confirmation: { label: "Order Confirmation", tone: "success", icon: "✓", kicker: "✓ Payment received securely", heroTitle: "Order Confirmed", heroText: "Thank you. Your order has been received successfully and your items are now being prepared.", delivery: "Your order has been received and is being prepared for dispatch.", progress: 15, step: 1, tracking: "Tracking will be generated once shipped.", actions: [ { label:"Track Order", href:"/track-order/?order_id=29397" }, { label:"View Order", href:"/my-account/view-order/29397/" }, { label:"Continue Shopping", href:"/shop/" } ] },
received: { label: "Order Received", tone: "info", icon: "🧾", kicker: "Order received", heroTitle: "We’re Preparing Your Order", heroText: "Your order is being processed. We will update you once the package moves to the next stage.", delivery: "Your order is currently being processed at our fulfillment center.", progress: 30, step: 2, tracking: "Tracking will be available once shipped.", actions: [ { label:"View Order", href:"/my-account/view-order/29397/" }, { label:"Track Order", href:"/track-order/?order_id=29397" }, { label:"Contact Support", href:"mailto:hello@digitnetstore.com" } ] },
transit: { label: "Order In Transit", tone: "info", icon: "🚚", kicker: "Package in transit", heroTitle: "Your Order Is On The Way", heroText: "Your package has left our warehouse and is moving through the delivery network.", delivery: "Your package has left our warehouse and is currently in transit.", progress: 60, step: 3, tracking: "Tracking number available.", actions: [ { label:"Track Shipment", href:"/track-order/?order_id=29397" }, { label:"View Order", href:"/my-account/view-order/29397/" }, { label:"Contact Support", href:"mailto:hello@digitnetstore.com" } ] },
outForDelivery: { label: "Out For Delivery", tone: "info", icon: "📦", kicker: "Arriving today", heroTitle: "Out For Delivery", heroText: "The courier has your package and is scheduled to deliver it today.", delivery: "The courier is delivering your package today.", progress: 85, step: 3, tracking: "Courier has package.", actions: [ { label:"Track Shipment", href:"/track-order/?order_id=29397" }, { label:"View Order", href:"/my-account/view-order/29397/" }, { label:"Contact Delivery Support", href:"mailto:hello@digitnetstore.com" } ] },
delivered: { label: "Delivered", tone: "success", icon: "✓", kicker: "Delivery confirmed", heroTitle: "Delivered Successfully", heroText: "Your order was delivered successfully. We hope you enjoy your purchase.", delivery: "Your order was delivered successfully.", progress: 100, step: 4, tracking: "Delivery confirmed.", actions: [ { label:"Download Receipt", href:"/my-account/orders/" }, { label:"Request Support", href:"mailto:hello@digitnetstore.com" }, { label:"Shop Again", href:"/shop/" } ] },
failedDelivery: { label: "Failed Delivery", tone: "warning", icon: "!", kicker: "Delivery needs attention", heroTitle: "Delivery Attempt Failed", heroText: "The courier could not complete delivery. Please confirm the address or contact support.", delivery: "The courier could not complete delivery. Please confirm your address.", progress: 85, step: 3, tracking: "Delivery attempt logged.", actions: [ { label:"Update Address", href:"/my-account/edit-address/" }, { label:"View Order", href:"/my-account/view-order/29397/" }, { label:"Contact Support", href:"mailto:hello@digitnetstore.com" } ] },
cancelled: { label: "Cancelled Order", tone: "error", icon: "×", kicker: "Order cancelled", heroTitle: "Order Cancelled", heroText: "This order has been cancelled and is no longer active.", delivery: "This order has been cancelled and is no longer active.", progress: 0, step: 0, tracking: "Not applicable.", actions: [ { label:"Reorder Items", href:"/shop/" }, { label:"View Account", href:"/my-account/" }, { label:"Contact Support", href:"mailto:hello@digitnetstore.com" } ] },
failedPayment: { label: "Failed Payment", tone: "error", icon: "×", kicker: "Payment failed", heroTitle: "Payment Could Not Be Completed", heroText: "Payment could not be processed. You can retry payment or choose another payment method.", delivery: "Payment could not be processed.", progress: 0, step: 0, tracking: "Not applicable.", actions: [ { label:"Retry Payment", href:"/checkout/order-pay/29397/" }, { label:"Change Payment", href:"/checkout/" }, { label:"Contact Support", href:"mailto:hello@digitnetstore.com" } ] } };
const mockOrder = { number: "#29397", date: "June 18, 2026", paymentMethod: "Cash on Delivery", total: "₦42,703", subtotal: "₦42,703", shippingCost: "Pickup from Lagos Office", tax: "₦0", soldBy: "Digitnet Store", shippingMethod: "Pickup from Lagos Office",
billingAddress: [ "Echebiri Onyinye Collins", "37 Sunmola Street, Mende, Maryland", "Lagos, Nigeria", "ocechebiri@gmail.com" ],
shippingAddress: [ "No shipping address required.", "Pickup from Lagos Office." ],
items: [ { name: "Car 12V High Temperature Resistant Emergency LED Lamp Portable Power Bank Lithium Battery Jump Starter", sku: "DN-JUMP", qty: 1, price: "₦42,703", image: "https://digitnetstore.com/wp-content/uploads/2025/12/1-9.jpeg" }, { name: "Professional Wireless Headset", sku: "DNT-HS-78421", qty: 1, price: "US $159.99", image: "https://digitnetstore.com/wp-content/uploads/2023/02/Z-G1000-1.webp" }, { name: "Business Call Headphone", sku: "DNT-BH-39204", qty: 1, price: "US $89.99", image: "https://digitnetstore.com/wp-content/uploads/2023/03/Head.png" } ] };
const stepLabels = ["Received", "Processing", "Shipped", "Delivered"]; const stateKeys = Object.keys(orderStates); let activeStateIndex = 0;
function setText(id, value){ const el = document.getElementById(id); if(el) el.textContent = value; }
function setHTML(id, value){ const el = document.getElementById(id); if(el) el.innerHTML = value; }
function escapeHTML(value){ return String(value) .replaceAll("&","&") .replaceAll("",">") .replaceAll('"',""") .replaceAll("'","'"); }
function addressToHTML(lines){
return lines.map(escapeHTML).join("
");
}
function buttonClass(index){ if(index === 0) return "dn-btn primary"; if(index === 1) return "dn-btn dark"; return "dn-btn light"; }
function renderOrderBase(){ setText("dnOrderNumber", mockOrder.number); setText("dnOrderDate", mockOrder.date); setText("dnPaymentMethod", mockOrder.paymentMethod); setText("dnOrderTotal", mockOrder.total); setText("dnSideTotal", mockOrder.total); setText("dnSideOrder", mockOrder.number); setText("dnSidePayment", mockOrder.paymentMethod); setText("dnSideDelivery", mockOrder.shippingMethod); setText("dnSubtotal", mockOrder.subtotal); setText("dnShippingCost", mockOrder.shippingCost); setText("dnTax", mockOrder.tax); setText("dnPaymentSummary", mockOrder.paymentMethod); setText("dnSummaryTotal", mockOrder.total); setText("dnSoldBy", mockOrder.soldBy); setText("dnShippingMethod", mockOrder.shippingMethod); setHTML("dnBillingAddress", addressToHTML(mockOrder.billingAddress)); setHTML("dnShippingAddress", addressToHTML(mockOrder.shippingAddress));
const items = mockOrder.items.map(item => `
`).join("");
setHTML("dnItemsList", items); }
function renderSteps(activeStep){ const steps = stepLabels.map((label, index) => { const stepNumber = index + 1; const isActive = activeStep >= stepNumber; return `
`; }).join("");
setHTML("dnSteps", steps); }
function renderActions(actions){ const html = actions.map((action, index) => ` ${escapeHTML(action.label)} `).join("");
setHTML("dnActions", html); }
function renderState(stateKey){ const state = orderStates[stateKey]; if(!state) return;
const kicker = document.getElementById("dnKicker"); const icon = document.getElementById("dnStatusIcon"); const progressFill = document.getElementById("dnProgressFill");
setText("dnBreadcrumbStatus", state.label); setText("dnKicker", state.kicker); setText("dnHeroTitle", state.heroTitle); setText("dnHeroText", state.heroText); setText("dnDeliveryText", state.delivery); setText("dnTrackingText", state.tracking); setText("dnSideStatus", state.label);
kicker.className = "dn-status-pill " + state.tone; icon.className = "dn-status-mark " + state.tone; icon.textContent = state.icon; progressFill.style.width = state.progress + "%";
renderSteps(state.step); renderActions(state.actions);
const select = document.getElementById("dnStateSelect"); if(select) select.value = stateKey; }
function buildPreviewControls(){ const select = document.getElementById("dnStateSelect"); if(!select) return;
select.innerHTML = stateKeys.map(key => { return `${escapeHTML(orderStates[key].label)}`; }).join("");
select.addEventListener("change", event => { activeStateIndex = stateKeys.indexOf(event.target.value); renderState(event.target.value); }); }
renderOrderBase(); buildPreviewControls(); renderState(stateKeys[activeStateIndex]);
Accessories
This section can show compatible accessories, installation kits, cables, brackets, batteries, or related add-ons.
Specifications
This section shows product attributes such as brand, model, SKU, power, size, material, color, and compatibility.
type
Rechargeable Electric Wrench
power source
Battery
Drive Size
1/2 in
Max Torque
1000NM
Application
Home Use, Industrial, Automotive
motor type
Brushless Motor
Battery Pack Type
Lithium-ion
rated voltage
18v
Head Style
square drive
Torque range
0-1000N.M
grade
Diy, Industrial, Professional
rated input power
800W
Voltage
18 V
customized support
OEM, ODM
warranty
1 Years
Accessory
no included
place of origin
Guangdong, China
brand name
OEM
model number
OEM
no-load speed
0-3000( rpm)
weight
2.5kg
Product name
Brushless Electric Impact Wrench
Keyword
Electric Powered Rechargeable Torque Wrench
Voltage
18V
Product Compliance
This section shows product compliance, certification, standard, suitability, and usage confirmation information.
Shipping & MOQ
This section can show delivery options, pickup availability, estimated delivery time, and minimum order quantity.
Shipping options are calculated during checkout based on the customer address and available WooCommerce methods.
Warranty
Warranty coverage depends on the product, manufacturer and approved Digitnet Store support terms attached to the item.
Technical Support
Need product help? Contact Technical Support for product selection, installation guidance, setup help, or after-sales support.
Technical Support
Reviews
Customer ratings, approved feedback, and the WooCommerce review form appear here when reviews are enabled for the product.
Leave a quick review
Rate your experience, choose what stood out, and submit.
