1 Install
Install the package.
Run npm install @designsetgo/astro in your Astro project. No extra WordPress plugin install, no API key setup: the package talks to the DSGo bridge you already have running.
Astro + DesignSetGo Apps
Build in Astro. Get the vertical packs free.
If you are already building your WordPress frontend in Astro (in your editor or vibe-coding with Claude Code, Cursor, or Codex), @designsetgo/astro drops in 14 production-ready WooCommerce components alongside the bridge integration. Your Astro config gains one plugin line and your project gains a full component library; no extra SaaS, no separate hosting, no duplicate data layer.
This very site is an Astro bundle deployed via the DSGo CLI, running on WordPress in inline mode. The support page uses the commerce bridge live.
The install path
One package. Bridge plus components.
Install the npm package, add the Astro integration, and the WooCommerce component library is available in every page of your project. The bridge connects automatically when the DSGo plugin is active on the WordPress site.
2 Configure
Add the integration.
Add two lines to astro.config.mjs: import dsgoAstro from @designsetgo/astro/integration and pass it your dsgo-app.json path. The integration merges required bridge permissions automatically.
3 Import
Import and use.
Import a component like SmartCartUpsell directly from the pack. It reads your live WooCommerce catalog at runtime through the bridge; no build-time data fetching, no static re-generates on catalog changes.
WooCommerce vertical pack, v0.1.0
14 components that ship ready to use.
Every component reads your live product data through the DSGo bridge. No hardcoded IDs, no build-time catalog snapshots. When your store changes, the component reflects it on the next page load.
Cart, upsell, and post-purchase components.
SmartCartUpsell, AbandonedCartRecovery, CheckoutFields, PostPurchaseSurvey, PreorderSignup, SubscriptionFaq, WholesaleRequest. Each one hooks into the DSGo commerce bridge so cart state is always live WooCommerce data.
import { SmartCartUpsell } from '@designsetgo/astro/woo' Product, loyalty, and store components.
BundleBuilder, FitRecommender, GiftcardBalance, LoyaltyDashboard, PickupScheduler, ProductQa, StoreLocator. All seven read your live catalog and customer data through the bridge at runtime.
import { BundleBuilder } from '@designsetgo/astro/woo' Proof by example
This site is built exactly this way.
The DesignSetGo marketing site is an Astro project deployed to WordPress as a DSGo App via the CLI. The support page uses the commerce bridge live: it calls dsgo.commerce.products.get() to read a real WooCommerce product on this site, lets you pick an amount, and hands off to the hosted WooCommerce checkout. No redirect to a third-party payment page, no separate hosting for the checkout flow.
Live
The support page reads a live WooCommerce product.
Open /support and watch the amount tiles load from dsgo.commerce.products.get(54). The "Donate $25" button calls dsgo.commerce.cart.addItem and dsgo.commerce.checkout.openHostedPage against this WordPress site. Same bridge any Astro component in the pack uses.
Two authoring paths
Bring your own Astro project or start fresh.
Add the integration to your current Astro site.
If you already have an Astro frontend talking to WordPress, install the package, add the config plugin, and start importing components. The bridge client is tree-shaken: only the bridge methods your components call end up in the bundle.
npm install @designsetgo/astro Scaffold an Astro starter wired for WordPress.
The DSGo CLI includes an Astro starter template with bridge integration and a sample WooCommerce component already in place. Run it, connect to your WordPress install, and let Claude Code, Cursor, or Codex build the rest from a working base.
designsetgo apps init --astro Your Astro frontend, now with 14 WooCommerce components.
Install the plugin, add the npm package, and your next Astro page can read the live product catalog, manage a cart, and hand off to checkout.