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
- Select Cart tab
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.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article