WooCommerce Lookbook

Created: 09/01/2018
Latest update: 20/05/2020
Updated to WooCommerce Lookbook ver
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 Lookbook is a professional plugin, allows you to create realistic lookbooks of your products. Help your customers visualize what they purchase from you.


Main features: 

  • Lookbooks: Create unlimited lookbooks with pictures and your WooCommerce products.
  • Nodes: Use nodes to marks products on pictures.
  • Slides: Link different lookbooks into slides
  • Instagram: Sync photo from Instagram to create lookbooks.
  • Shortcodes: use shortcode to put your lookbooks or sliders anywhere you want on your site.
  • Quickview: display product names, price, short descriptions on a pop-up right in lookbook/slide.
  • Lookbook in single product page: Automatical display lookbooks which included the product in its own product page.
  • Redirect to single product pages: Select to display quick view pop-up or redirect to single product pages when clicking on nodes.
  • Redirect to external link: Select to redirect to external links with External/Affiliate products instead of opening single product pages.

Design: WooCommerce Lookbook can be fully designed, and can fit with any theme/website.

Automatically update: Use Envato purchase code to enable auto-update. You can update the plugin whenever there is a new version right on your dashboard.

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. Go to https://developers.facebook.com/

2. Click My Apps > Create App

3. Go to Settings > Basic > Copy App ID, App Secret to fields below

Copy App ID, App Secret

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

Add Facebook Login, Instagram module

5. Go to Facebook Login > Settings > Paste https://localhost/website24/wp-admin/edit.php?post_type=woocommerce-lookbook&page=woocommerce-lookbook-settings#/instagram into “Valid OAuth Redirect URIs” field.

Valid OAuth Redirect URIs

6. Go to your Facebook page > Settings > Instagram > Connect to Instagram account + copy page ID & paste to ‘Page ID’ field below

  • Connect to Instagram account

Connect to Instagram account

  • Copy page ID & paste to ‘Page ID’ field

copy page ID

7. Save Settings

8. Get Access Token

Get Access Token

9. 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. Select slide changing effect
  4. Enable/Disable Slide Pagination
  5. Enable/Disable Slide Navigation
  6. Enable/Disable slide auto playing
  7. 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.

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.