import React, { useState } from "react"; type UsageStatsByType = { color: number; button: number; [key: string]: number | undefined; }; type UsageStats = { terms_total: number; attribute_taxonomies_configured: number; products_with_overrides: number; by_type: UsageStatsByType; }; export interface GettingStartedTabProps { attributesAdminUrl: string; productsAdminUrl: string; usageStats: UsageStats; heroDescription?: React.ReactNode | null; swatchTypeCardsExtras?: React.ReactNode; } type ExpandedStatsCard = "swatches" | "attributes" | "products" | null; function StatsCard({ title, value, description, accentClass, icon, expanded, onToggle, children, }: { title: string; value: string; description: string; accentClass: string; icon: React.ReactNode; expanded: boolean; onToggle: () => void; children: React.ReactNode; }): React.ReactElement { return (

{title}

{value}

{icon}

{description}

{expanded ? children : null}
); } export function GettingStartedTab({ attributesAdminUrl, productsAdminUrl, usageStats, heroDescription, swatchTypeCardsExtras, }: GettingStartedTabProps): React.ReactElement { const [expandedStatsCard, setExpandedStatsCard] = useState(null); const productOverviewUrl = "https://b3.digital/software/products/b3-swatches"; const resolvedHeroDescription = heroDescription === undefined ? "Transform your shop with color and button swatches. Use the navigation menu to explore the settings, or jump right in with the quick actions below." : heroDescription; return (

Welcome to B3 Swatches

{resolvedHeroDescription ? (

{resolvedHeroDescription}

) : null}
Manage Attributes View Products More Swatch Styles
{usageStats.terms_total > 0 ? (

Plugin Usage

setExpandedStatsCard( expandedStatsCard === "swatches" ? null : "swatches", ) } icon={ } >

Breakdown by Type in Use

{usageStats.by_type.color > 0 ? (
Color Swatches {usageStats.by_type.color}
) : null} {usageStats.by_type.button > 0 ? (
Button Swatches {usageStats.by_type.button}
) : null}
setExpandedStatsCard( expandedStatsCard === "attributes" ? null : "attributes", ) } icon={ } >

Configured Attributes

You have {usageStats.attribute_taxonomies_configured} global{" "} {usageStats.attribute_taxonomies_configured === 1 ? "attribute" : "attributes"}{" "} currently using swatches on variable products.

Manage Attributes →
setExpandedStatsCard( expandedStatsCard === "products" ? null : "products", ) } icon={ } >

Product Customizations

{usageStats.products_with_overrides}{" "} {usageStats.products_with_overrides === 1 ? "product has" : "products have"}{" "} custom swatch styles that override the global defaults.

View Products →
Swatch Types

Color

{usageStats.by_type.color.toLocaleString()}

Button

{usageStats.by_type.button.toLocaleString()}

{swatchTypeCardsExtras}
) : null}
1

Create Your Product Attributes

Navigate to{" "} Products → Attributes {" "} in WordPress admin to create global attributes like "Color" or "Size", then add terms such as "Red", "Blue", "Small", or "Large". You can also use per-product attributes{" "} directly inside a product.

2

Configure Your Swatches

Start with General for the base layout and sizing, use Chips to set the selected color, adjust{" "} Typography for font size and color, and use{" "} Tooltips to enable or disable hover labels. The live preview updates as you make changes.

3

Apply to Products & Test

Edit any variable product, assign your configured attributes on the{" "} Attributes tab, build variations on the{" "} Variations tab, then save and preview the product page to confirm your swatches are working as expected.

); }