Woocommerce Setup

This article contains integrated your Woocommerce store with Green Story

Client Key:

The client key is unique to each client and is required by our widgets to identify the client and load the correct widgets

Product mapping

Extract product id from WooCommerce store
Refer documentation here in the Export section: https://docs.woocommerce.com/document/product-csv-importer-exporter/
Export following columns: ID, Type, Name, Short Description, Description, Category, Tags
Map each WooCommerce WooCommerce variable Product Type to a primary product category which was provided to Green Story
Email the mapped CSV file with the mapping to Green Story team.

Installing Green Story Plugin

Link for WooCommerce plugin page: https://wordpress.org/plugins/greenstory-for-woocommerce/

In your WordPress admin panel, go to Plugins > New Plugin, search for “GreenStory for WooCommerce” and click “Install now “

Activate the plugin.

The plugin should be visible in the WordPress left hand navigation bar with the name ‘GreenStory’

Total Impact Counter Visual Widget - Homepage

For WooCommerce enabled homepage template - If you will be going to use WooCommerce homepage, then you need to enable the Widget component via the Green Story plugin.
Click on “GreenStory” in the WordPress navigation bar. It will open the plugin settings
Select Counter Tab

Add the correct Client ID in the client id textbox

Select the desired counter page hook from the dropdown based on where the widget is supposed to be placed on the page. For hook placement refer here: https://businessbloomer.com/storefront-theme-visual-hook-guide/#2-3-storefront-theme--homepage-page-template-hooks

Click the checkbox for enable counter widget

Save the changes and plugin should appear on the home page

For custom homepage

Go to Pages > Select the page which will be your homepage

Add the following code at the location where you want the counter visual to appear

Save the page. The counter visual will start showing up immediately

Per product Impact Visual Widget – Product Detail page

Click on “GreenStory” in the WordPress navigation bar. It will open the plugin settings

Select Product Tab
Add the correct Client ID in the client id textbox

Select the desired single page product hook from the dropdown based on where the widget is supposed to be placed on the page. For hook placement refer here: https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

Click the checkbox for enable product widget

Save the changes and plugin should appear on the product page

For all products which are mapped in the Green Story database, the product visual will start showing up at the selected hook location

Note: Unless the products are mapped in Greenstory’s database, no product visual will be rendered. Product Mapping step is mandatory

Visual Widget – Cart page
Click on “GreenStory” in the WordPress navigation bar. It will open the plugin settings
- Select Cart tab
- Add the correct Client ID in the client id textbox
- Select the desired Cart page hook from the dropdown based on where the widget is supposed to be placed on the page. For hook placement refer here: https://businessbloomer.com/woocommerce-visual-hook-guide-cart-page/
- Click the checkbox for enable cart widget
- Save the changes and plugin should appear on the cart page at the desired location
- For all products which are mapped in the Green Story database, the cart visual will start showing up at the selected hook location

Note: Unless the products are mapped in Greenstory’s database, no cart visual will be rendered. Product Mapping step is mandatory

Calculator Visual Widget – Sustainability Page

Go to Pages > Select the page which will be your Sustainability page

Add the following code at the location where you want the calculator visual to appear

Save the page. The calculator visual will start showing up immediately

Add Order Notification

Create a new Webhook: Go to: WooCommerce > Settings > Advanced > Webhooks.

Select Create a new webhook (first incident) or Add webhook. The Webhook Data box appears

Enter the following fields

Name: Green Story Order Capture

Status: Set to Active

Topic: Select Order Created

Delivery URL: https://backend2.greenstory.ca/api/webhooks/clients/save-order/woocommerce

Secret: Add a 32 character random string generated from here: http://www.unit-conversion.info/texttools/random-string-generator/

Save the webhook

Send the Secret key to Green Story over email.