How to Integrate WooCommerce with Showit

Showit is one of the most visually powerful website platforms available for creative businesses. WooCommerce is the most widely used e-commerce system in the world, powering over 28% of all online stores according to BuiltWith’s 2024 Technology Trends report. Combining them gives you something genuinely unusual: a pixel-perfect custom website with a full-featured, infinitely extensible commerce engine underneath it.

The challenge is that the integration is more nuanced than most documentation suggests. Showit already uses WordPress for its blog functionality, which creates a unique technical foundation that makes WooCommerce integration more achievable, but also introduces specific configuration requirements that differ from a standard WordPress-plus-WooCommerce setup.

This guide covers exactly how the integration works, what the architecture looks like, how to configure it correctly, and how to design your Showit site around WooCommerce’s capabilities.

Understanding the Showit and WordPress Relationship

Before implementing WooCommerce, you need to understand how Showit and WordPress coexist in your site’s architecture.

Showit is the front-end design layer. Every page your visitors see is designed in Showit’s visual canvas editor. Behind that front end, Showit connects to a WordPress installation that manages your blog content. Your Showit design renders on your custom domain, while WordPress operates as the content management backend.

This architecture is why WooCommerce integration is possible in a way it would not be with a purely proprietary platform. WooCommerce is a WordPress plugin. Since Showit sites already use WordPress, installing WooCommerce means adding its commerce engine to a backend that is already there.

The important nuance: WooCommerce’s default shop pages, product pages, cart, and checkout are WordPress-rendered pages, not Showit-designed canvas pages. These pages will use your WordPress theme’s styling, not your Showit design, unless you take specific steps to connect them.

For a deeper understanding of how Showit and WordPress work together, the guide to blogging with Showit and WordPress provides context on the platform relationship that applies directly to WooCommerce configuration.

The Two Approaches to WooCommerce on Showit

There are two distinct ways to implement WooCommerce on a Showit site, and the right choice depends on how much of your commerce experience you want to live within your Showit design environment.

Approach 1: WooCommerce with a styled WordPress theme installs WooCommerce and applies a WordPress theme (such as Storefront or Astra) to the WooCommerce pages. Your Showit site links to the WooCommerce shop pages, which render on your domain with your WordPress theme’s styling. This is technically simpler but creates a visual discontinuity between your Showit design and your WooCommerce shop.

Approach 2: WooCommerce with Showit-to-WordPress product page integration involves using shortcodes or WooCommerce’s REST API to surface product data within Showit canvas pages, with only the cart and checkout handled by WordPress. This approach is more complex and typically requires developer involvement, but it maintains visual consistency across your browsing and buying experience.

For most Showit users without developer resources, Approach 1 with careful WordPress theme selection and CSS customization to match your Showit brand palette produces a satisfactory result. This guide covers Approach 1 in complete detail with notes on where Approach 2 diverges.

Step-by-Step: Installing WooCommerce on Your Showit Site

The installation happens entirely in WordPress, not in Showit’s canvas editor.

Step 1: Access Your Showit WordPress Backend

Log into your Showit dashboard and navigate to Settings, then WordPress Admin.

This opens your WordPress admin panel. If you have not previously accessed your WordPress backend, Showit provides login credentials in your account settings. Your WordPress installation already exists because Showit uses it for blog management.

Step 2: Install the WooCommerce Plugin

In your WordPress admin, navigate to Plugins > Add New.

Search for “WooCommerce” and click Install Now, then Activate. WooCommerce will launch its setup wizard. Work through the wizard to configure your store location, currency, payment methods, and shipping settings.

WooCommerce will automatically create several WordPress pages during setup: Shop, Cart, Checkout, and My Account. These pages are given specific WooCommerce page designations in the plugin settings. Do not delete or rename these pages after they are created.

Step 3: Install and Configure a WordPress Theme for WooCommerce Pages

Since WooCommerce pages render in WordPress rather than Showit, they need a WordPress theme that handles their layout.

Navigate to Appearance > Themes in your WordPress admin. Install a WooCommerce-compatible theme. Storefront (free, made by WooCommerce’s parent company Automattic) is the most reliable baseline option. Astra (freemium, widely used) offers more design flexibility for matching your Showit brand.

Your Showit design still controls every canvas page. The WordPress theme only affects the WooCommerce-generated pages (shop, cart, checkout, product pages).

Step 4: Customize Your WordPress Theme to Match Your Showit Brand

In Appearance > Customize, use the WordPress Customizer to set your WordPress theme’s colors and fonts to match your Showit brand palette.

This step is critical for reducing the visual discontinuity between your Showit-designed pages and your WooCommerce-powered shop pages. Match your primary brand color, background color, heading font, and body font as closely as your WordPress theme’s customizer allows.

For deeper CSS-level customization to match specific Showit design details, add custom CSS through Appearance > Customize > Additional CSS. This allows you to override theme defaults and achieve more precise brand consistency across the transition from Showit canvas to WooCommerce pages.

Linking Your Showit Site to Your WooCommerce Shop

Once WooCommerce is installed and your WordPress theme is configured, the connection between your Showit design and your WooCommerce shop is made through navigation links.

In your Showit canvas editor, update your navigation menu to include a “Shop” link pointing to your WooCommerce shop page URL. Your shop URL will follow the format yoursite.com/shop by default, which WooCommerce sets during installation.

You can also add shop-related links to other Showit pages: a “Browse the Shop” button on your homepage, product category links in your services section, or a shop preview section using a Showit canvas element that links to your WooCommerce catalog.

Creating a Shop Preview Section in Showit

One effective approach is designing a manually curated “Featured Products” section in Showit on your homepage that showcases two to four products with images, names, and prices added as static design elements, linking to the corresponding WooCommerce product pages.

This is not dynamic (the Showit section does not pull live WooCommerce product data automatically), but it creates a visual bridge between your Showit homepage and your WooCommerce shop that maintains brand consistency for first-time visitors.

Adding Products in WooCommerce

Product management happens entirely in WordPress, not Showit.

In your WordPress admin, navigate to Products > Add New. Add your product title, description, price, images, categories, and tags. WooCommerce supports simple products, variable products (with options like size or color), grouped products, and external or affiliate products.

For digital products, enable “Downloadable” and “Virtual” in the product data settings. WooCommerce will automatically handle file delivery after purchase confirmation.

Product pages are rendered by WooCommerce using your WordPress theme’s template. To improve the visual quality of product pages, most WooCommerce-focused WordPress themes include dedicated product page templates with large image galleries, variation selectors, and add-to-cart functionality built in.

SEO for WooCommerce on Your Showit Site

WooCommerce product pages are indexed separately from your Showit pages, on your same domain, which creates a significant SEO opportunity.

Well-optimized WooCommerce product pages can rank for specific product and category search queries, driving organic traffic directly to your shop. Install the Yoast SEO or Rank Math plugin in WordPress to manage meta titles, descriptions, and structured product data for your WooCommerce pages.

For your Showit pages that link to WooCommerce, internal links from your Showit homepage, blog posts, and portfolio pages to your WooCommerce shop pages pass SEO authority and improve the overall discoverability of your product catalog. For a complete guide to Showit SEO that covers both the Showit canvas pages and WordPress-rendered pages, the Showit SEO guide covers both layers in detail.

WooCommerce also generates automatic XML sitemaps for your products. Submit these sitemaps through Google Search Console alongside your Showit sitemap. For guidance on finding and submitting Showit sitemaps, the Showit sitemaps guide covers the complete submission process.

Managing the Cart and Checkout Experience

WooCommerce’s cart and checkout pages are the most visually critical WooCommerce pages for brand consistency, because this is where visitors are most aware of the transition from your Showit design to your WordPress theme.

Invest time in customizing these pages in WordPress to match your Showit brand as closely as possible. At minimum, ensure your header logo, primary brand color, and primary font are consistent between your Showit pages and your WooCommerce cart and checkout.

For businesses where checkout conversion is a high priority, Showit-compatible WooCommerce plugins like CartFlows can replace the default WooCommerce checkout with a custom page builder-designed checkout page. CartFlows is compatible with most WordPress page builders and can significantly improve the visual quality and conversion rate of the checkout experience.

Common WooCommerce and Showit Integration Issues

This is what separates approaches that work from those that do not.

Issue: WooCommerce pages display the wrong header and footer Your WooCommerce pages render with your WordPress theme’s header, not your Showit header. If your WordPress theme supports custom headers, configure it to match your Showit navigation. Alternatively, use a WordPress plugin like WP Header Footer Code Manager to inject consistent navigation HTML across WooCommerce pages.

Issue: Product images display at inconsistent sizes WooCommerce generates multiple image sizes from your product uploads. In WooCommerce > Settings > Products > Display, configure the catalog and single product image dimensions to match the aspect ratios in your WordPress theme’s product templates.

Issue: WooCommerce pages are indexed but Showit pages are not This is typically a sitemap issue. Verify both your Showit sitemap and WooCommerce sitemap are submitted in Google Search Console. Use the guidance in the Showit sitemaps guide to confirm your Showit pages are indexed correctly alongside your WooCommerce pages.

Issue: Visitors cannot navigate back to your Showit site from WooCommerce pages Your WooCommerce pages need navigation links back to your Showit homepage and other key pages. Configure your WordPress theme’s navigation menu to match your Showit site navigation as closely as possible.

Conclusion

WooCommerce on Showit is the most powerful commerce integration available to Showit users, and the most technically involved. The architecture works because Showit already uses WordPress, which means WooCommerce is installing into a backend that is already present.

The practical sequence: access your Showit WordPress admin, install WooCommerce, configure a brand-matching WordPress theme for WooCommerce pages, add your products, update your Showit navigation to link to your shop, and optimize both Showit and WooCommerce pages for search.

If you want WooCommerce configured and integrated with your Showit site by someone who understands both platforms in depth, the Showit integration service handles complex third-party configurations including WooCommerce setup, theme customization, and sitemap submission.

The most complete website you can build on Showit is one where design and commerce work together without compromise.

Frequently Asked Questions