gatsby-woocommerce-theme

🎨 Gatsby WooCommerce theme - Electra

• 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 🙏 ***

🔥 Features

• Uses React with Gatsby ( Blazing Fast )
• PWA ( Works Offline )
• Image Optimization ( blur effect )
• GraphQL ( with wp-graphql on WordPress )
• Custom Widgets, Menus, Social elements.
• WooCommerce store
• Google Analytics feature
• Yoast SEO supported ( with og tags )
• Product Search with pagination ( even works offline )
• Product pagination
• Archive pages.
• Authentication with JWT
• My Account page ( with Login and Registration )
• Create an account on checkout.
• Social share.
• Product Carousel.
• Add to wishlist( even works offline )

👨‍💻 Maintainer

Name	Github Username
Imran Sayed	@imranhsayed

🚀 Set Up

Gatsby Site Setup

• Installation: npm i gatsby-woocommerce-theme

• 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'
		}
	} ]
};

• 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.

GATSBY_WORDPRESS_SITE_URL=https://example.com

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

WordPress Setup

• 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

• You can follow the readme to setup https://github.com/wp-graphql/wp-graphql-jwt-authentication#install-activate--setup

• • Set Header menu as HCMS Header Menu
  

  • Set Footer menu as HCMS Footer Menu.

    

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

• 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.

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

• 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

• For home page carousel please upload same size product category images of dimensions 1900x600