WooCommerce Lookbook

Created: 01/2018

Latest updated: 10/2022 – Updated version: 1.1.11

By: VillaTheme

Thank you for purchasing our plugin. If you have any questions that are beyond the scope of this documentation, please feel free to request support at our Support Forum. Thanks so much!

WooCommerce Instagram Shop will be a new opportunity for newbie start-ups in the middle of the digital shift and the rise of online business. If you are thinking about the Instagram shop with WooCommerce, start an online business on WooCommerce and Instagram platforms, the WooCommerce Lookbook plugin should not be ignored. WooCommerce Instagram Shop will come true if you start setting up the special goals and let’s run into business with this plugin.

WooCommerce Lookbook allows you to create realistic lookbooks of your products, help your customers visualize how products look in real life.




  • Create Lookbooks: Create Lookbooks by using nodes to mark products position on photos. By clicking on nodes, customers can see products information with name, short description, price… Customers will also be able to add products to cart from Lookbooks.
  • Add node: Adding unlimited nodes and drag and drop them to mark product positions on Lookbooks.
  • Drag and drop: Easy to select node position by using the drag and drop feature. Hold mouse over nodes and move it to the product position on pictures.
  • Slides: You can combine lookbooks and display them on the front-end as a slide.
  • Autoplay: Automatically plays the slide with a specified auto-move duration.
  • Autoplay duration: Select a specified time to move to the next lookbook with the autoplay slides option.
  • Lookbooks in the single product page: Automatical finds lookbooks that include the product and displays that lookbook in the product description.
  • Link Redirect: If this option is enabled, clicking on a node will redirect to the single product page.
  • External Link: An option for External/Affiliate products, clicking on a node will redirect to the external link instead of the single product page.
  • Shortcodes: Use shortcodes to put lookbook anywhere you want on your sites.



  • Quickview: By clicking on nodes, customers will open a QuickView popup. The QuickView popup provides them the product name, short description, price.
  • Add to Cart: There is also an Add to Cart button on the QuickView popup, allowing customers to select a quantity and add the product to the cart.



  • Shop by Instagram: Sync published pictures from any Instagram account to your WooCommerce Lookbook and use it to create lookbooks, slides. Enter an Instagram username to sync pictures from that account to WooCommerce Lookbook. You will be able to sync 12 pictures at one time.
  • Link to Instagram: Enable the “View on Instagram” button on the Quickview popup, the button will lead to the original Instagram page which you used to create the Lookbook.
  • Carousel/Gallery display: Display Instagram lookbooks on the frontend in Carousel or Gallery style.
  • Instagram sync schedule time: Let the plugin automatically sync photos from Instagram.
  • Instagram synced picture status: Select visible status for lookbook synced from Instagram pending, publish, or a draft.
  • Image Quantity: Select how many images will be synced from Instagram.



  • Node Icon: Select your favorite node icon with four options default, number, marker, alphabet.
  • Nodes color: Design nodes with main color, background color, border-color
  • Product title: Choose to display or hide the product titles above the nodes on Lookbooks.
  • Title color: Design product titles color with text color and background color.
  • Quickview pop-up design: Design QuickView popup with text color, background color, border radius.
  • Close button: Select to display or hide the Close button on the Quickview popup.
  • See more button: Select to display or hide the see more button on the Quickview popup. The see more button will lead to the single product page.
  • Slide size: Customize the slide size with width and height.
  • Slide Pagination/Navigation: Enable or disable the slide pagination/navigation on the frontend.
  • Custom Script: Add your own CSS code to fully customize the lookbook as you want.
  • Loading Icon: Select your favorite loading icon with ten available icons to be selected.



  • Easy to use: Easy to find out how to use this plugin with a friendly user interface
  • Support RTL: support the Right to Left website fully.
  • Auto-update: Using Envato purchase code to enable the auto-update feature. Each purchase code can be used to active auto-update for one domain.



Using shortcode to display lookbooks on front-ends as a single lookbook image, gallery, carousel.

  • Carousel of Instagram photos

    [woocommerce_lookbook_instagram style=’carousel’ row=’number’ limit=’x’]

  • Gallery of Instagram photos

    [woocommerce_lookbook_instagram style=’gallery’ row=’number’ limit=’x’]

  • Single lookbook

    [woocommerce_lookbook id=’111′]

  • Gallery of lookbooks

    [woocommerce_lookbook_slide id=”123,456″ layout =”gallery”]

  • Carousel of lookbooks

    [woocommerce_lookbook_slide id=”123,456″ layout =”carousel”]

Install Plugin:

Go to Plugin/Add New /Upload Plugin/Choose file/ select plugin file zip/ Install Now/Active Plugin

Add a new Lookbook

After successful activate the WooCommerce LookBook plugin, go to Dashboard/Lookbooks to start using the plugin.

  • Upload pictures to create Lookbooks

  1. Click Add New to add a new lookbook.
  2. Enter the lookbook title.
  3. Click Add Image to upload lookbook pictures.
  4. Click Publish to publish your lookbook.

After successful add a new lookbook, click on Add Node to add new nodes

  1. Click on Add Node to add a new node.
  2. A new node table will appear, click on Search your product to find the product you want to add to the lookbook.
  3. Hold your mouse on the blue dot and drag/drop it to move the node to the position of the product on the lookbook.
  4. Click on Update to save your settings.
  5. Copy this shortcode to paste lookbook to anywhere you want on your site.
    You can change the shortcode into[woocommerce_lookbook_slide id='x,y,z' layout='carousel'] and [woocommerce_lookbook_slide id='x,y,z' layout='gallery'] with x y z is page id of lookbooks to show the 3 lookbooks as a slide, and the layout can be carousel or gallery.

Go to Dashboard/Lookbooks/All Lookbooks to manage your lookbooks

Go to Dashboard/Lookbooks/Settings to configure lookbook settings

WooCommerce Lookbook will appear on the front-end as a picture with nodes that locate products. When clicking on a node, a pop-up will appear with product information.

Sync pictures from Instagram

To sync Instagram pictures to WooCommerce Lookbook, follow these guides:

1. Create Facebook App at https://developers.facebook.com/


2. Click My Apps > Create App

3. Go to Settings > Basic > Copy App ID, App Secret to fields and paste in the plugin settings/ Instagram

4. Go to Dashboard > Add Facebook Login, Instagram module

Add Facebook Login, Instagram module

5. Go to Facebook Login > Settings > Paste “provided URL into “Valid OAuth Redirect URIs” field.

Find and copy the provided URL in the plugin settings/ Instagram and paste into the Valid OAuth Redirect URLs in the Facebook login settings.


Valid OAuth Redirect URIs

6. Go to the plugin settings/ Instagram > Save Settings

7. Click to Get Access Token > Save setting.

Get Access Token

8. Go to All Lookbook/ Sync Instagram

Sync Instagram


Here is the guide video:

How does it work

Node Options

Go to Dashboard/Lookbooks/Settings/Design/Node Options to configure nodes settings

  1. Select the icon of the node, there are 3 available options.
  2. Select the node color
  3. Select the node background color
  4. Select the node border color
  5. Show/Hide product title on nodes
  6. Select the product title color
  7. Select the title background color



In Instagram Tab, you can configure how WC Lookbook connect with Instagram

  1. Put in your Instagram account username
  2. Select pictures to sync
  3. Select how will Instagram picture display on front-end
  4. Schedule time to sync pictures
  5. Pictures visible status
  6. Select data to update
  7. Select image quantity

Quick View

Go to Dashboard/Lookbooks/Settings/Design/Quick view to configure quick view settings

  1. Select quick view loading icon
  2. Select quick view text color
  3. Select quick view background color
  4. Configure quick view border radius
  5. Show/Hide Close button
  6. Show/Hide see more (open the product single page)

Slide Options

Go to Dashboard/Lookbooks/Settings/Design/Slide Options to configure slide settings

  1. Configure slide Width
  2. Configure slide Height
  3. Number items per row
  4. Select slide changing effect
  5. Enable/Disable Slide Pagination
  6. Enable/Disable Slide Navigation
  7. Enable/Disable stop Navigation Loop
  8. Enable/Disable slide auto playing
  9. Configure slide auto changing time

Custom Script

Add your own CSS to design the look as you want.



Link Redirect: If this option is enabled, clicking on nodes will redirect the page to the single product page.

External Link: If this option is enabled, clicking on nodes will redirect the page to the external link. This option only works with External/Affiliate products.


Fill in your Envato purchase code to auto-update the lookbook plugin right in your Dashboard.

Product Page

Go to any single product page to configure lookbook on the page.

  1. Tick to display lookbook on the single product page.
  2. Select lookbook position.
  3. Select to display single lookbook or combine lookbooks as a slide.
  4. Select lookbooks to display.
  5. Configure lookbook align.




Plugin Author Compatible
Elementor Elementor Fully
WPML OnTheGoSystems Fully
Polylang WP SYNTEX Fully

Extra Information

Thank you for your attention!

If you have any question, please create a topic at our FORUM, we will support within 24 hours.