WooCommerce Lookbook

Created: 09/01/2018
Latest update: 13/03/2018
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’] with x y z is page id of lookbooks to show the 3 lookbooks as a slide, and the layout can be carousel or galary.

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

Go to Dashboard/Lookbooks/Settings to configure lookbook settings

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

Sync pictures from Instagram

To use the Instagram features, you need

  • Client ID
  • Client Secret
  • Access Token

To get this necessary, please follow this guide to sign up for an Instagram developer account.

  1. Visit https://www.instagram.com/developer/
  2. Login your Instagram account and click on Register Your Application

  3. Click on Register a New Client
  4. In next step, you need to fill in some information.
    *Important: In “Valid redirect URIs” field, paste in http://localhost/testsite/wp-admin/edit.php?post_type=woocommerce-lookbook&page=woocommerce-lookbook-settings
  5. After successful register, click on Manage
  6. Now you can copy Client ID and Client Secret to your WooCommerce Lookbook settings
  7. In your WooCommerce Lookbook settings, click Save and click Get Access Token

  8. A browser pop-up will appear, then click on Authorize
  9. Then an Access Token will appear on your WooCommerce Lookbook settings and you are done. Now you can sync pictures from your Instagram account to WooCommerce Lookbook

Guiding 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.