Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

🎨 Gatsby WooCommerce theme - Electra

Project Status: Active. Stars Forks Contributors Follow

  • A Gatsby theme for WooCommerce, using Decoupled Architecture
  • Front end in React
  • Backend in WordPress.

Demo Site

This theme uses gatsby-source-wordpress@v4 BETA

*** 👨‍💻 Please star my repo to support my work 🙏 ***

gatsby woocommerce theme electra hero image

🔥 Features

  1. Uses React with Gatsby ( Blazing Fast )
  2. PWA ( Works Offline )
  3. Image Optimization ( blur effect )
  4. GraphQL ( with wp-graphql on WordPress )
  5. Custom Widgets, Menus, Social elements.
  6. WooCommerce store
  7. Google Analytics feature
  8. Yoast SEO supported ( with og tags )
  9. Product Search with pagination ( even works offline )
  10. Product pagination
  11. Archive pages.
  12. Authentication with JWT
  13. My Account page ( with Login and Registration )
  14. Create an account on checkout.
  15. Social share.
  16. Product Carousel.
  17. Add to wishlist( even works offline )

👨‍💻 Maintainer

Name Github Username
Imran Sayed @imranhsayed

🚀 Set Up

Gatsby Site Setup

  1. Installation:

npm i gatsby-woocommerce-theme

  1. Server Side Environmnent Variables.

Add the following configuration to your gatsby-config.js

module.exports = {
	plugins: [
		// Tell gatsby which theme you will be using and other configs.
		resolve: "gatsby-woocommerce-theme",
		options: {
			wordPressUrl: 'https://example.com',
			gatsbySiteUrl: 'https://example.com',
			googleTagManagerId: 'xxxx',
			fbAppId: 'xxxx'
	} ]
  1. Client Side Environment Variables.

Create two more files called .env.development .env.production and into ‘site’ directory or the root of your project and add your WordPress site url liks so.


Env variables from these file will be consumed by Apollo client on client side.

WordPress Setup

  1. On your WordPress site, download, Upload and activate all the plugins from wordpress/plugins folder of this repo, into your WordPress Site.

a. Headless CMS

b. woocommerce

c. wp-graphql - tested on ( v1.0.0 )

d. wp-graphql-woocommerce

e. wp-gatsby

f. Yoast-SEO

g. wp-graphql-yoast-seo

h. wp-graphql-jwt-authentication

    • Set Header menu as HCMS Header Menu
    Header Menu Demo
    • Set Footer menu as HCMS Footer Menu.

      Footer menu demo
  1. You can also set text widgets in #HCMS Footer #1 and #HCMS Footer #2 under Appearance > Widgets in WordPress.

  2. Create a Home Page ( if there isn’t one already )and make sure you have a home page and Location rule is set to Home page.

  3. If isn’t already set your site title, description and logo from WordPress customizer.

  4. Setup WooCommerce:

  • Make sure WooCommerce Plugin is active in WordPress and the payment modes have been set from its settings.
  • You can also import default wooCommerce products that come with wooCommerce Plugin for development ( if you don’t have any products in your WordPress install ) WP Dashboard > Tools > Import > WooCommerce products(CSV): The WooCommerce default products csv file is available at wp-content/plugins/woocommerce/sample-data/sample_products.csv
  1. For home page carousel please upload same size product category images of dimensions 1900x600
© 2023 Gatsby, Inc.