Reading list Switch to dark mode

    Multi-Vendor Instagram Shop Feeds For WooCommerce

    Updated 12 December 2023

    Multi-Vendor Instagram Shop Feeds for WooCommerce will allow the store owner as well as the vendor to do marketing by using the Instagram post of the product user. Also, the vendor can add the Instagram Shop feed on the Dedicated page, Shop page, and Product Page.

    Here, shop feeds are nothing but Instagram images of the products that are uploaded by the product users. Because of these images, the buyer can view the actual image of the product and this helps in building the trust of the buyer for the product.

    Note:

    Watch the below video tutorial to understand the plugin workflow:

    lMOOBJ_Bn50

    Features of WooCommerce Multi-Vendor Instagram Shop Feeds

    • The admin can create Hashtags and can assign products to it.
    • The admin can fetch all the images that have used that hashtag on Instagram.
    • This module allows the admin to configure the view for the Instagram feeds as Carousel and List.
    • This module allows the admin to select the images from that particular hashtag images that he wants to use for the marketing of the product.
    • The seller can also create hashtags and assign products to them.
    • The seller can fetch the images of a particular Hashtag and can use the selected images as the Instagram shop Feed.
    • The add-to-cart button is available on the hashtag pop-up for the products linked to the particular Instagram Feeds.
    • The customer can view the Instagram Feeds on the Shop Page, Dedicated Page, and Product Page.
    • The customer can click on the Product image available next to the Feeds image to get redirected to that Product Page.
    • This module is responsive i.e. it is compatible with all screen sizes (Mobile Screen, Tablet Screen, and Desktop Screen).

    Installation of WooCommerce Multi-Vendor Instagram Shop Feeds

    Firstly, the user will get a zip file which first of all needs to be uploaded in the “Add New” menu option in the WordPress admin panel.

    Searching for an experienced
    WordPress Company ?
    Find out More

    Furthermore, log in to your account panel, and under the Dashboard hover your mouse over the “Plugins” menu option.

    After that, tap on the Sub-Menu, and then select the “Add New” option.

    PayUmoney Payment Gateway-installation add new detailsNext, you will see an option on the top of your page that is “Upload Plugin”, click the option to upload the zip file.

    image-20

    After clicking on the “Upload Plugin” option, below that you will see a button “Choose File”.

    Click on the button to browse for the zip file as per the snapshot below.

    PayUmoney Payment Gateway-installation choose file

    After browsing the file, click the “Install Now” button to install the plugin as per the snapshot.

    install

    When the plugin is installed correctly, you will see the success message and an option to activate the plugin. After that, click on “Activate Plugin” to activate the installed plugin.

    activate plugin

    Facebook Developer Registration

    Once, you have logged into your Facebook account firstly, go to the Facebook for Developer webpage.

    Facebook-for-Developers-1

    Click Get Started and confirm your email address select developer in the section for About you and complete registration.

    Register-as-a-developer-Facebook-for-Developers

    Create App – Settings

    Right after, completing the registration the user is redirected to the below page. Here, click Create App.

    All-Apps-Facebook-for-Developers

    Further, select the Manage Business Integration option and press Continue.

    All-Apps-Facebook-for-Developers-7

    After, entering your App Display Name App Contact Email click the Create App.

    All-Apps-Facebook-for-Developers-8

    To proceed, the user needs to add the Facebook Login in the section Add products to your App. As a result, the Facebook login will be added to your Products.

    Click on the Facebook Login > Settings.

    mark-williamson-Add-Product-Facebook-for-Developers-1-1

    Further, enter your redirect URL in the Valid OAuth Redirect URLs band and Save Changes.

    Note: The user can add more than one redirect URL.

    mark-williamson-Facebook-Login-Facebook-for-Developers

    Add Product – Instagram Graph API

    Click the Add product icon and then press the Set Up button under the Instagram graph API.

    mark-williamson-Dashboard-Facebook-for-Developers

    The user will be redirected to the below page.

    mark-williamson-Instagram-Graph-API-Facebook-for-Developers

    To be able to use this API in Live mode, the user needs to undergo the process of App Review and permissions for the below.

    mark-williamson-App-Review-Facebook-for-Developers

    Retrieve APP ID & Secret Key

    To fetch the APP ID & Secret Key just go to Settings > Basic in the sidebar menu of the Facebook for Developer Dashboard itself and copy your APP ID & Secret Key.

    mark-williamson-Settings-Facebook-for-Developers

    WooCommerce Multi-Vendor Instagram Shop Feeds Module Configuration

    To edit the view of the Instagram feed in the front end The admin can go to the Marketplace Instagram Feeds > Configuration. Select the type of view under the Instagram feed view section and click Save Settings.

    wordpressdemo.webkul.com_marketplace-instagram-shop-feed_wp-admin_admin.php_pagempisf_instafeedtabconfigurationwebkul-store-2

    Connect to Facebook

    To be able to fetch the images your Facebook account must be connected. For this, the admin can now go to the Marketplace Instagram Feeds > Configuration > Facebook.

    wordpressdemo.webkul.com_marketplace-instagram-shop-feed_wp-admin_admin.php_pagempisf_instafeedtabconfigurations_tabmpisf_facebookwebkul-store-1

    Under the Facebook section, save your Facebook APP ID and APP Secret Key, and then click Connect to Facebook.

    wordpressdemo.webkul.com_marketplace_instagram_shop_feed_wp_admin_admin.php_page_mpisf_instafeed_tab_configuration_s_tab_mpisf_facebook_jitendra_

    You can see the connected message will be displayed there.

    Manage Tag List

    After clicking on the Tag list the admin can view the list of all hashtags.

    wordpressdemo.webkul.com_marketplace-instagram-shop-feed_wp-admin_admin.php_pagempisf_instafeedwebkul-store

    Also, the admin can use the bulk action to Activate, Deactivate, and Delete the selected hashtags.

    Screenshot-from-2023-12-12-13-49-54

    Add New 

    An add new button is available for adding new Hashtags.

    wordpressdemo.webkul.com_marketplace-instagram-shop-feed_wp-admin_admin.php_pagempisf_instafeedactionaddwebkul-store

    After clicking on the Add New button the admin will get the following options:

    • Hashtag: Here the store owner can enter the Hashtag name.
    • Linked Products: The admin can select the products that will be linked to that particular Hashtag.
    • Hashtag Visibility: The admin can select the visibility of the product on the Shop Page, Dedicated Page, and Product Page.
    • Hashtag Priority: Based on this priority the hashtag will appear on the Pages.
    • Status: Select Enable to use the hashtag and Disable for not using the tag.

    Note: Only By editing the hashtag the fetch button will appear for adding the Instagram Feed images to the Products.

    Edit Hashtag

    Once the hashtag is created, the admin needs to click on the edit button to edit the hashtag, and while editing the hashtag the Fetch image button will appear.

    wordpressdemo.webkul.com_marketplace-instagram-shop-feed_wp-admin_admin.php_pagempisf_instafeedactionedittag_id11webkul-store-2

    After clicking on the Fetch image button those images will appear in a pop-up that has used the same hashtag on Instagram.

    wordpressdemo.webkul.com_marketplace-instagram-shop-feed_wp-admin_admin.php_pagempisf_instafeedactionedittag_id11webkul-store-3

    Once the pop-up appears the admin needs to select the images which he wants to use as an Instagram Feed and then click on the import button to use those images.

    wordpressdemo.webkul.com_marketplace-instagram-shop-feed_wp-admin_admin.php_pagempisf_instafeedactionedittag_id11webkul-store-1

    The admin can also use the bulk action to Enable, Disable, and Delete the selected images.

    Seller End: Add New Hashtag

    The seller can click on the Instagram Hashtag button to view the list of all created hashtags.

    wordpressdemo.webkul.com_marketplace-instagram-shop-feed_my-account_mpisf-hashtag-details_webkul-store-1

    After that, the seller can click on the Add Hashtag the seller can create a new Hashtag.

    wordpressdemo.webkul.com_marketplace-instagram-shop-feed_my-account_mpisf-add-hashtag_webkul-store

    Under Add hashtag, the admin will get these options.

    • Hashtag: Enter the Hashtag name here.
    • Linked products: Select the product which you want to link with the hashtag.
    • Hashtag Visibility: The Seller can select the visibility of the Hashtag on the Shop page, Dedicated page, and Product page.
    • Hashtag Priority: Select the Priority of the Hashtag.
    • Status: Select enable to use the hashtag and disable for not using it.

    Likewise to the admin, the seller can also add Instagram feed images only by editing the Hashtags.

    Seller end: Edit Hashtag

    After clicking on the Edit button the Fetch image button will appear.

    wordpressdemo.webkul.com_marketplace-instagram-shop-feed_my-account_mpisf-add-hashtag-edit_7_webkul-store

    Once the seller clicks on the Fetch Image button, a pop-up will appear for selecting the image for the Instagram Feeds.

    wordpressdemo.webkul.com_marketplace-instagram-shop-feed_my-account_mpisf-add-hashtag-edit_7_webkul-store-1

    For using the selected image the seller needs to click on the import button.

    wordpressdemo.webkul.com_marketplace-instagram-shop-feed_my-account_mpisf-add-hashtag-edit_7_webkul-store-2

    Customer End Workflow

    Dedicated Page: Instagram Feeds

    The customer can view Instagram feeds on a dedicated page i.e. Instagram feeds page as shown below:

    wordpressdemo.webkul.com_marketplace_instagram_shop_feed_mp_instagram_feeds__jitendra_

    The customer can click on the View Product button on a particular hashtag and a pop-up will appear.

    wordpressdemo.webkul.com_marketplace_instagram_shop_feed_mp_instagram_feeds__jitendra___2_

    By using the pop-up the customer can view the Instagram images of the product along with the products linked to the respective hashtag and Add to Cart button is also available on the pop-up image.

    By using that Add to Cart button the customer can directly add the product to the cart and proceed with the checkout process.

    Product Page

    Also, On the particular product page, the customer can view the Instagram feeds as shown below:

    wordpressdemo.webkul.com_marketplace-instagram-shop-feed_product_album_webkul-store

    Shop Page

    Similarly, on the shop page also the customer can find the hashtags at the end of the products and can use those hashtags to view the images of the product by the users of it.

    wordpressdemo.webkul.com_marketplace-instagram-shop-feed_shop_webkul-store

    Check Module Responsive

    The Multi-Vendor Instagram Shop Feeds for WooCommerce plugin is compatible with all screen size i.e. this module automatically adjust with the screen size of Mobile, Tablet, and Desktop.

    Instagram feed

    That’s all about Multi-Vendor Instagram Shop Feeds for WooCommerce module. For any further queries and suggestions please add a ticket at the HelpDesk System.

    Current Product Version - 1.1.0

    Supported Framework Version - WordPress: 6.4.1 WooCommerce: 8.3.1 WooCommerce Marketplace: 5.4.0

    Blog Version - WordPress: 6.4.1 WooCommerce: 8.3.1 WooCommerce Marketplace: 5.4.0
    • Version WordPress: 6.4.1 WooCommerce: 8.3.1 WooCommerce Marketplace: 5.4.0
    • Version WooComerce version: 5.2
    • Version WooComerce version: 5.0.0, Wordpress: 5.6.2
    • Version WooComerce version: 3.7
    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content