WooCommerce Instagram Shop

Overview

WooCommerce Instagram Shop – what does it do?
Well, it does exactly what you’d think from the title – it allows to turn your instagram into a shop and connect it to your WooCommerce website products, creating Instagram Shoppable Feed. You may have seen similar services like have2have.it or StylePick.it – and by all means those are great services with tons of extra functionality, however they are quite expensive for a small business owner or a blogger who earns from affiliate links. That’s why we created this WooCommerce Instagram Shop which doesn’t have any recurring fees and adds extra convenience for you/your instagram visitors & subscribers to be able to purchase your instagram’ed products.

Server Requirements

In order to be able to use this plugin, there are a few requirements you have to meet:
1) Latest WordPress version is recommended. However, plugin was tested with WordPress 4.2 as well and may work with earlier versions.
2) same for WooCommerce – latest version is recommended, we’ve tested it on WooCommerce 2.5.0
3) cURL must be installed on the server (it usually is, but just in case – confirm with your hosting provider)

4) Make sure allow_url_fopen is enabled in PHP configuration (it usually is, but just in case – confirm with your hosting provider)

 

Installation

It’s important to follow each installation step carefully in order to successfully install & configure this product. It is simple installation, but it has a few extra steps you need to perform (including creation of Instagram developer’s account). Please read below.

Step 1. Upload plugin to your wordpress.

First of all – please make sure that you have installed WooCommerce already. This manual does not cover WooCommerce installation – we assume that you already have wordpress site with woocommerce and some products.

1. Hover over Plugins menu in your wordpress administration and select ADD NEW.
step1

2. On the page which will load – click on UPLOAD PLUGIN
step2

3. Next page – click “Choose File” and browse your computer/find the plugin which you downloaded from codecanyon. Double click it. Then click INSTALL NOW
step3

4. You will see a message that plugin installed successfully and a link “ACTIVATE PLUGIN” – you must click it. If you see some errors instead of success message – please open support ticket and copy the errors you see.
step4

5. If all went good – you will see WooCommerce Instagram Shop plugin in the list on your plugins now.
step4-success

 

Step 2. Authenticate the app with Envato and Instagram.

Click on the new “Instagram Shop” menu in your wordpress administration.
2016-03-10_0936
You will be presented with screen which will ask you to enter YOUR codecanyon/Envato username and item purchase code of this product. If you don’t know where to get item purchase code – please click here.
2016-03-10_1157
If username/item purchase code are valid – you will see success message and a link to proceed with Instagram OAUTH authentication like on screen below:
2016-03-10_1201
Before proceeding – please go to instagram.com and make sure that you are LOGGED OUT from any account there, once that is done you can now click “Click here to generate your Access Token and User ID” link as on previous screenshot – you will be redirected to instagram.com to login to your account. 2016-03-10_1202
You must login to the account which you plan to use as a shoppable instagram feed.
Important note – if for some reason you weren’t redirected to instagram.com to login – please use alternative authentication method below the link “click here to generate your access token and user ID” (you will see this link in the latest instagram shop version)
After logging in at instagram.com – you will be redirected back to your wordpress admin area, to instagram shop page and you should now see much more settings on that page, as on below screenshot:
2016-03-10_1035
At this point – basic configuration of the shop plugin is done and you don’t need to edit any settings, however, we’ve outlined all the settings and what they do in the next chapter below – Configuration & Settings.

 

Step 3. WooCommerce & Front-end feed.

All you need to do now is create a new page in your wordpress site, add special shortcode on it, then edit some products in woocommerce to include hashtags (without actual # symbol), and then change your instagram profile URL to lead to the new wordpress page you’ve created. All that, in details – below.

a) Go to PAGES section in your wordpress administration and create new page.
In the content area – add shortcode [cg_instashop] – then save the page, copy the URL of the new page and now go to instagram.com.

b) Login to your instagram.com account, click EDIT PROFILE and then paste the URL of the wordpress page with shortcode you just created into the website field and save profile:
2016-03-10_1057

c) Now go to PRODUCTS section and edit any product which you want to make “shoppable” through instagram.
2016-03-10_1100
Scroll down to WooCommerce settings for the product and click on Instagram Shop
2016-03-10_1103
It is VERY IMPORTANT to understand that you have to use the same hashtags (WITHOUT ACTUAL # SYMBOL IN FRONT) in the selected product and on your instagram post associated with this product. You CANNOT add multiple hashtags per each product, there should be only ONE per product. Landing page will show all the instagram posts which woocommerce will be able to identify as a product in the system using the hashtag in the instagram post.
Another important note – if you use same hashtag for several products – only the LATEST instagram post with that hashtag will be shown on landing page.

After adding hashtags you need to choose one of the 3 action buttons which will create a button under the product on the landing page, and it is set on a “per product” basis, so you can have separate action button for each product with separate action.
“Add to cart action” will create a button under the product which will add product to users cart on your site upon clicking.
“Redirect to product page” will create a button which will take user to product details page
“Redirect to custom link” will allow to enter custom URL and will create a button under the product which will then redirect user to your custom URL (amazon affiliate link for product for example)

d) The only thing left to do is to add an instagram post to your instagram account which will use the same hashtag. So if you have product XYZ on sale (for example) and you want to allow users to purchase it on your instagram – add a hashtag for the product (as per above instructions) #springPromo and then create instagram post with any image and description like “Our product XYZ is on sale now! #springPromo – link in our BIO!”. Important: all hashtags on your Instagram image should be separated by space. When users will be clicking on your bio – they will see your link to the landing page, once clicked they will land on the wordpress landing page and they will see the product with springPromo hashtag there at once and will be able to purchase it using the action button you’ve selected.

Now you can navigate to your instagram shop landing page you created in Step 3a and you should see instagram posts with hashtags associated to products!

Updating to Latest Version

At the moment there is no automated update in our plugin. Once we release an update through codecanyon – you will receive email notification that update is available (if you’re signed up for receiving product updates from codecanyon). When you receive the email – all you need to do is login to codecanyon and re-download the files in the DOWNLOADS section. Once that’s done – deactivate plugin on your site, remove the files, then upload new files (either through wordpress or through FTP) and activate the plugin.

Configuration & Settings

You don’t need to edit any settings by default, however below you will find description of all settings and what they do, in case you want to customize the store.

When you click on Instagram Shop menu item in your wordpress menu – you will land to the default settings page which will look like this:
new_ui
We’ll go from top to bottom, explaining each setting.

Disconnect your Instagram account – if you click that, you will disconnect instagram feed from your site and landing page will show error message, instead of showing your feed.

Access Token – you don’t need to edit this field ever. In fact, we’ve made it read-only so you wouldn’t accidentally edit it. It’s the main access token which is used to connect your site and your instagram account together.

Number of Items – this identifies how many buy-able “instashots” will show on your landing page (which you created in step3a). Please note that at the moment, there is no paging for the landing page.

Cache Renew Time – woocommerce instagram shop uses internal caching to allow better and faster user experience. This field controls how often you want to renew cache and re-download instagram feed and let system parse it / associate with products in the database. We recommend setting it to 12 hours or 1 day, if you don’t plan to post shoppable items on instagram more often than once a day. You will also see a button next to the cache renew time – if for any reason you need to renew cache manually, you can do it using this button (when testing for example).

Add to Cart Button Text – this text will be used on the landing page for the button, on all shoppable posts which have “add to cart” set as action.

Product Details Button Text – this text will be used on the landing page for the button, on all shoppable posts which have “more details” set as action.

Instagram Feed Layout – at the moment you can either choose 1 or 2 columns feed layout, which impacts how many columns of products will be shown on you instagram landing page. 1 columns is more conventional and would suit if you don’t have many shoppable posts, however if you do have 10 or more instagram shoppable posts on landing page – we’d recommend switching to 2 column layout.

Action Buttons Position – you can have action buttons appear in 2 ways on your landing page, either under the shoppable post (select BELOW IMAGE in this case) or on hover on product image (in this case select IN POPUP).

Customizing Design

We tried to use as many “native” woocommerce styles as possible, so our product should integrate with your theme nicely without requirement for heavy adjustments. However, if you do need to adjust anything, you can do that by editing stylesheet file located in wp-plugins/woocommerce_instagram_shop/assets/css/instashop.css. At the time of the release this file had less than 40 lines of css code, so it will be pretty easy to adjust anything you may need or add your own. You do have to have some basic CSS knowledge though, and we also recommend using Google Chrome’s developer toolbar – it allows to find which elements and which stylesheet and code lines you need to edit, more info here.

Translating Plugin

Since v1.1 you can easily translate the plugin to any language – just as you would translate any other wordpress plugin, through editing .po files.

In a nutshell – you’ll need to use .po file editor and add your own translations for each text string.
We recommend using POEdit (you can get it here). After you’ve downloaded and installed POEdit – run it, and you will see screen like below 2016-03-22_1341 Click on “Create new translation” – POEdit will ask you to select either .POT or .PO file -> you’ll need to select the one in /languages/ folder inside WooCommerce_Instagram_Shop plugin folder. Select wc_instashop-en_CA.po – then you will be asked to select NEW language you’re translating to -> select from a list and then start translating the list of text strings which will be presented to you. After you’re done -> Save the file as wc_instashop-LANG.po (LANG should be automatically replaced by selected language), and upload that file to /languages/ folder inside WooCommerce_Instagram_Shop folder. Once that is done – plugin will be displayed with your translations (if same language is selected as your wordpress language in Settings).

If you’ve created a translation for the plugin – we will appreciate if you will share it by sending your .po file to info.at.criticalgears.com (replace .at. with @). We will also add you to the credits section with a link to your site (if you have one)

Statistics Page

2016-03-11_1222
At the moment statistics page provides basic information about how many visitors viewed your landing page and which hastags were clicked-through. All stats available in Day/Month/Year counts.

Instagram Shop Visitors – unique visitors which viewed your landing page.

Instagram Shop Page Views – page views by those unique visitors. Example – if 1 user viewed your landing page 3 times within 24 hours, you will see 1 unique visitor added to the shop visitors stats and 3 page views will be added to page views stats. We use cookie which stores visitor information for 24 hours.

Hashtags Click-Through Stats – this displays which hashtag(/product) was opened (action button clicked) and how many times.

Help Page

This page contains all the links you need in order to get help, suggest features, signup for newsletter or rate the software.

Changelog

v1.8.1 released on November 9, 2017:
– added fix for non-english hashtags
– fixed few compatibility issues with latest woocommerce version

v1.8.0 released on September 9, 2017:
– adjusted CSS file to accommodate better themes compatibility
– added CURL support for obtaining Instagram token, in case allow_url_fopen is not enabled
– added CSS fixes for WooCommerce v2.6.11 and up
– added fix for Visual Builder which was causing fatal error

v1.7.3 released on December 22, 2016:
– fixed latest Instagram API issue by adding an alternative authentication method

v1.7.2 released on October 1, 2016:
– fixed API signature issue in case of more than 20 images return
– added option to select instagram image resolutions (4).

v1.7.1 released on September 27, 2016:
– fixed JavaScript bug preventing on-hover popups working with variable products
– added better instagram image resolution.

v1.7 released on September 22, 2016:
– added option to display posts in 4 and 5 columns
– fixed bug with incorrect image display.
– added more feed limit options.
– added more cache renew options.
– added few minor improvements and fixed compatibility issues with other plugins.

v1.6 released on July 4, 2016:
– added support for variable products and options
– fixed few minor bugs/issues

v1.4 released on May 12, 2016:
– fixed instagram image limit of 20 (implemented instagram feed paging)
– added instagram feed date limit setting
– adjusted number of items dropdown
– several other small fixes

v1.3 released on April 27, 2016:
– fixed hashtag symbol issues (related to not showing instagram posts);

v1.2 released on April 14, 2016:
– fixed shortcode margins issue;
– fixed compatibility issues with several wordpress plugins;
– fixed few CSS compatibility issues;

v1.1 released on March 22, 2016:
– changed all texts to use __() and _e() wordpress functions;
– added .po/.mo files for easy translation;
– added Russian translation for plugin;

v1.0 released on March 15, 2016

Sources, Credits and Appreciation

We’ve used the following images, icons, libraries or other files as listed.
jQuery Tag-It

Once again, thank you so much for purchasing our product and we hope you will enjoy using it!

Is this document useful? 5 3

Published: March 3, 2016 Updated: July 6, 2018

« back to all manuals