[text align="center" width="80" width__sm="100" class="scac-hero-sub"]Save on the products you use every day. Priority perks, exclusive savings, and pro-level support.[/text]
View Membership Plans
Pro members earn 2% and Executive members 3–5% cashback annually based on eligible purchases. Rebates are paid as store credit after year-end reconciliation.
Pro gets priority local delivery. Executive gets unlimited free local delivery and discounted freight on pallets.
Lorem ipsum dolor sit amet...
Join Now[text align="center" class="scac-footer-note"]Questions? Call (XXX) XXX‑XXXX or email sales@spacecityautocolor.com[/text]
Lorem ipsum dolor sit amet...
[text]
<ol>
<li><strong>Create Roles in WholesaleX</strong>: DIY, Pro, Executive.</li>
<li><strong>Dynamic Pricing Rules</strong>: DIY (5–8% cat.-based), Pro (10–12% selected cats + Buy 5 Get 1), Executive (15% cap + role rebate 3–5%).</li>
<li><strong>Show Dual Prices</strong>: enable role-based price display with retail compare price (WholesaleX → Settings).</li>
<li><strong>Registration</strong>: Paste your WholesaleX Registration Form shortcode below to show a signup form on this page.</li>
</ol>
[/text]
[text]
<!-- Paste the EXACT shortcode generated by WholesaleX here (example only): -->
<p><code>
</code></p>
[/text]
<style>
/* ===== Brand tokens (edit once, update everywhere) ===== */
:root{ --scac-green:#31d17b; --scac-black:#0d0f12; --scac-ink:#111318; --scac-gray:#767b85; }
.scac-hero{ background: radial-gradient(1200px 600px at 50% 20%, rgba(49,209,123,.18), transparent 60%), linear-gradient(160deg, var(--scac-black), #151922); color:#fff; }
.scac-hero-title{ color:#fff; letter-spacing:.2px; }
.scac-hero-sub{ color:#d9dde5; }
.scac-cta-primary.button, .scac-btn-primary.button{ background:var(--scac-green); color:#0b0f12; border:none; box-shadow:0 6px 16px rgba(49,209,123,.35); }
.scac-cta-primary.button:hover, .scac-btn-primary.button:hover{ filter:brightness(0.95); }
.scac-cta-secondary.button{ border:2px solid var(--scac-green); color:var(--scac-green); background:transparent; }/* ===== Cards ===== */
.scac-card{ background:#ffffff; box-shadow:0 8px 24px rgba(0,0,0,.06); border:1px solid #eef0f4; position:relative; }
.scac-card .scac-price{ font-size:28px; font-weight:700; text-align:center; color:#0f1217; }
.scac-card .scac-price span{ font-size:16px; font-weight:600; color:#5b616b; margin-left:4px; }
.scac-card .scac-price em{ font-style:normal; font-weight:600; color:#8a9099; margin:0 6px; }
.scac-list{ margin:0 0 16px 0; }
.scac-list li{ margin:8px 0; }/* ===== Popular (Pro) ===== */
.scac-card-popular{ border:2px solid var(--scac-green); transform:translateY(-4px); }
.scac-popular-label{ display:inline-block; background:var(--scac-green); color:#0b0f12; font-weight:700; padding:4px 10px; border-radius:999px; }/* ===== Footer ===== */
.scac-footer-cta{ background:#0f1216; color:#e8ecf2; }
.scac-footer-cta .button{ margin-top:8px; }
.scac-footer-note, .scac-note{ color:#9aa1ac; }/* ===== Responsive tweaks ===== */
@media(max-width:549px){
.scac-hero{ padding:40px 0!important; }
.scac-hero-title{ font-size:28px!important; }
}
</style><!-- HOW TO EDIT / REUSE
1) Create a UX Block (WP Admin > UX Blocks > Add New). Switch to the 'Text' tab in the editor and paste everything from this file. Save.
2) Open any Page with UX Builder, add the block via “Blocks” element, and select this UX Block.
3) Replace placeholder checkout links (DIY_PLAN_ID, PRO_PLAN_ID, EXEC_PLAN_ID) with your WooCommerce product IDs or membership checkout URLs.
4) To show the WholesaleX signup, paste the exact <Registration Form> shortcode where indicated above. Docs: WholesaleX → Registration Form → Get Shortcodes.
5) Adjust brand colors globally by editing CSS variables in the <style> block (—scac-green, —scac-black, etc.).
6) All visible elements are native Flatsome shortcodes, so you can edit with the visual builder later.
7) If something still looks off, ensure your page is not wrapped in another container (set row width to full) and clear any caching/minification.
--><!-- OPTIONAL: Auto‑assign WholesaleX roles on purchase (put in child theme functions.php or Code Snippets plugin). Replace the product IDs and roles. -->
<!--
add_action('woocommerce_order_status_completed', function($order_id){
if( ! $order = wc_get_order($order_id) ) return;
foreach( $order->get_items() as $item ){
$pid = $item->get_product_id();
$user_id = $order->get_user_id();
if(!$user_id) continue;
// Map product IDs to WholesaleX roles
$map = [
1111 => 'DIY', // DIY Membership product ID => WholesaleX role slug
2222 => 'PRO', // Pro Membership product ID => WholesaleX role slug
3333 => 'EXECUTIVE', // Executive Membership product ID => WholesaleX role slug
];
if( isset($map[$pid]) ){
$role = $map[$pid];
// Assign WholesaleX role (uses standard WP role set by WholesaleX)
$user = new WP_User($user_id);
$user->set_role($role);
}
}
});
-->
Lorem ipsum dolor sit amet...
[text align="center" width="80" width__sm="100" class="scac-hero-sub"]Save on the products you use every day. Priority perks, exclusive savings, and pro-level support.[/text]
View Membership Plans
Pro members earn 2% and Executive members 3–5% cashback annually based on eligible purchases. Rebates are paid as store credit after year-end reconciliation.
Pro gets priority local delivery. Executive gets unlimited free local delivery and discounted freight on pallets.
Lorem ipsum dolor sit amet...
Join Now[text align="center" class="scac-footer-note"]Questions? Call (XXX) XXX‑XXXX or email sales@spacecityautocolor.com[/text]
Lorem ipsum dolor sit amet...
[text]
<ol>
<li><strong>Create Roles in WholesaleX</strong>: DIY, Pro, Executive.</li>
<li><strong>Dynamic Pricing Rules</strong>: DIY (5–8% cat.-based), Pro (10–12% selected cats + Buy 5 Get 1), Executive (15% cap + role rebate 3–5%).</li>
<li><strong>Show Dual Prices</strong>: enable role-based price display with retail compare price (WholesaleX → Settings).</li>
<li><strong>Registration</strong>: Paste your WholesaleX Registration Form shortcode below to show a signup form on this page.</li>
</ol>
[/text]
[text]
<!-- Paste the EXACT shortcode generated by WholesaleX here (example only): -->
<p><code>
</code></p>
[/text]
<style>
/* ===== Brand tokens (edit once, update everywhere) ===== */
:root{ --scac-green:#31d17b; --scac-black:#0d0f12; --scac-ink:#111318; --scac-gray:#767b85; }
.scac-hero{ background: radial-gradient(1200px 600px at 50% 20%, rgba(49,209,123,.18), transparent 60%), linear-gradient(160deg, var(--scac-black), #151922); color:#fff; }
.scac-hero-title{ color:#fff; letter-spacing:.2px; }
.scac-hero-sub{ color:#d9dde5; }
.scac-cta-primary.button, .scac-btn-primary.button{ background:var(--scac-green); color:#0b0f12; border:none; box-shadow:0 6px 16px rgba(49,209,123,.35); }
.scac-cta-primary.button:hover, .scac-btn-primary.button:hover{ filter:brightness(0.95); }
.scac-cta-secondary.button{ border:2px solid var(--scac-green); color:var(--scac-green); background:transparent; }/* ===== Cards ===== */
.scac-card{ background:#ffffff; box-shadow:0 8px 24px rgba(0,0,0,.06); border:1px solid #eef0f4; position:relative; }
.scac-card .scac-price{ font-size:28px; font-weight:700; text-align:center; color:#0f1217; }
.scac-card .scac-price span{ font-size:16px; font-weight:600; color:#5b616b; margin-left:4px; }
.scac-card .scac-price em{ font-style:normal; font-weight:600; color:#8a9099; margin:0 6px; }
.scac-list{ margin:0 0 16px 0; }
.scac-list li{ margin:8px 0; }/* ===== Popular (Pro) ===== */
.scac-card-popular{ border:2px solid var(--scac-green); transform:translateY(-4px); }
.scac-popular-label{ display:inline-block; background:var(--scac-green); color:#0b0f12; font-weight:700; padding:4px 10px; border-radius:999px; }/* ===== Footer ===== */
.scac-footer-cta{ background:#0f1216; color:#e8ecf2; }
.scac-footer-cta .button{ margin-top:8px; }
.scac-footer-note, .scac-note{ color:#9aa1ac; }/* ===== Responsive tweaks ===== */
@media(max-width:549px){
.scac-hero{ padding:40px 0!important; }
.scac-hero-title{ font-size:28px!important; }
}
</style><!-- HOW TO EDIT / REUSE
1) Create a UX Block (WP Admin > UX Blocks > Add New). Switch to the 'Text' tab in the editor and paste everything from this file. Save.
2) Open any Page with UX Builder, add the block via “Blocks” element, and select this UX Block.
3) Replace placeholder checkout links (DIY_PLAN_ID, PRO_PLAN_ID, EXEC_PLAN_ID) with your WooCommerce product IDs or membership checkout URLs.
4) To show the WholesaleX signup, paste the exact <Registration Form> shortcode where indicated above. Docs: WholesaleX → Registration Form → Get Shortcodes.
5) Adjust brand colors globally by editing CSS variables in the <style> block (—scac-green, —scac-black, etc.).
6) All visible elements are native Flatsome shortcodes, so you can edit with the visual builder later.
7) If something still looks off, ensure your page is not wrapped in another container (set row width to full) and clear any caching/minification.
--><!-- OPTIONAL: Auto‑assign WholesaleX roles on purchase (put in child theme functions.php or Code Snippets plugin). Replace the product IDs and roles. -->
<!--
add_action('woocommerce_order_status_completed', function($order_id){
if( ! $order = wc_get_order($order_id) ) return;
foreach( $order->get_items() as $item ){
$pid = $item->get_product_id();
$user_id = $order->get_user_id();
if(!$user_id) continue;
// Map product IDs to WholesaleX roles
$map = [
1111 => 'DIY', // DIY Membership product ID => WholesaleX role slug
2222 => 'PRO', // Pro Membership product ID => WholesaleX role slug
3333 => 'EXECUTIVE', // Executive Membership product ID => WholesaleX role slug
];
if( isset($map[$pid]) ){
$role = $map[$pid];
// Assign WholesaleX role (uses standard WP role set by WholesaleX)
$user = new WP_User($user_id);
$user->set_role($role);
}
}
});
-->
