WooCommerce Lookbook

Support Purchase

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.

 

FEATURES OF WOOCOMMERCE LOOKBOOK

WOOCOMMERCE LOOKBOOK AND SLIDES SUPPORTING FOR WOOCOMMERCE INSTAGRAM SHOP

• 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

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

 

WOOCOMMERCE INSTAGRAM SHOP

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

 

DESIGN

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

 

OTHER FEATURES TO WOOCOMMERCE INSTAGRAM SHOP

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

 

SHORTCODES

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']

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

• Argument id: Fill in lookbook IDs you want to display
• Argument display: Add value “all” to display all available lookbooks
• Argument layout: 2 layouts – Fill in value gallery or carousel

Required:

1. WordPress 5.0+
2. PHP 7.0+
3. WooCommerce 7.0+

Install Plugin:

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

 

Watch this tutorial video for installing and using WooCommerce Lookbook

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

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.

 

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

7. Click to Get Access Token > Save setting.

8. Go to All Lookbook/ Sync Instagram

 

Here is the guide video:

Shortcodes

After creating your lookbooks, use the shortcode to display them on front-ends as a single lookbook image, gallery, carousel.

Single lookbook
[woocommerce_lookbook id='111']

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

Argument id: Fill in lookbook IDs you want to display
Argument display: Add value “all” to display all available lookbooks
Argument layout: 2 layouts – Fill in value gallery or carousel

 

Instagram Lookbooks

With Lookbooks made by Instagram sync, use these shortcodes instead:

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']

Node Options

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

1. Select the icon of the node, there are:
   • Default
   • Number
   • Price
   • Marker
   • Alphabet
   • Custom image icon
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

 

Quick View

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

1. Modal style: Modal style after customer clicks the node
2. Loading Icon: Loading icon shows up when switching among nodes, or opening nodes. Choose an icon for it.
3. Text Color: Text color of content on Quick View mode
4. Background Color: Background color of content on Quick View mode
5. Border radius: Adjust the round corner of quick view modal
6. Hide Close Button: Show/Hide the “X” button to close modal
7. Hide See More Button: Show/Hide the eye symbol so customer can’t view more
8. Add to cart: When customer adds an item to cart on quick view, they will be redirected to: Cart page, or Checkout page, or Default (based on site default workflow)
9. Navigation position: Position of option (11)
10. Navigation alignment: Align the option (11)
11. Navigation icon: Is the buttons to close/switch among nodes, select a style option

 

 

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

Gallery Options

 

1. Number items per row: When you display multiple lookbooks in a shortcode using layout “gallery”, adjust the number of lookbooks in a row
2. Change to slide on mobile: Make them slider on mobile

 

 

Custom Script

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

Product

 

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.

Instagram

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

Update

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

Thank you for your attention!

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