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.

2 steps to create a lookbook.

 

Step 1: Upload picture

1. In your WordPress dashboard, navigate to LookBook > Add New Lookbook (or edit an existing LookBook item).
2. Add a title
3. Upload the LookBook image: Upload or select the image you want to use as your LookBook.
4. Click “Publish”

 

Step 2: Add nodes

Click “Add node” button: Once your image is loaded in the editor, simply click the green “Add node” button to add a hotspot, and drag that hotspot anywhere on the image where you want, each node can be linked to either a product or a category.

• Select a type in the first dropdown – Product node or Product category node
• Choose Product or Category by searching their title

 

Customize the Node (Optional):

• Set the icon and customize the nodes
• You can drag and reposition the node if needed.
• Repeat step 2 for more nodes: You can add multiple nodes to a single image, each linking to a different product.

 

Once finished, click Publish or Update.

Use the provided shortcode to embed the LookBook into a page or post. 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.

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
Argument gallery_to_slide: If 1, it’ll show gallery on desktop and slide on mobile, set 0 to disable this style

 

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. Icon: Select the icon of the node, there are:
   • Default
   • Number
   • Price
   • Marker
   • Alphabet
   • Custom image icon: Upload your image
2. Color: Select the node icon color
3.  Background color : Select the node background color
4.  Border color : Select the node border color
5.  Hide Title: Show/Hide product/category title on nodes
6.  Title Color: Select the product/category title color
7.  Title Background Color: 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
   1. Box
      
   2. Full width:
      
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. Width: Configure slide Width
2. Height: 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. The Instagram integration feature allows you to import your Instagram images and turn them into interactive LookBooks. To set this up, navigate to Dashboard > WC LookBook > Settings >> Instagram settings

The settings are divided into two sections: General and Synchronization.

• General Settings: These settings help connect your Instagram account and control how the imported Instagram content will display on your website, including Client ID / Client Secret / Access Token – These are credentials used to connect your website to Instagram through the Instagram Graph API. You’ll get these values following the guide inside the setting page when registering your app with Facebook/Instagram. Once connected, your media will be synced automatically.
• Synchronization Settings: This section defines how and when your Instagram images are synced to your LookBook.

1. Client ID: Get the App ID from the App settings >> Basic >> App ID
2. Client Secret: App Secret from the App settings >> Basic >> App Secret
3. Access Token: After filling in the 2 fields above, save the settings >> Click the green “Get Access Token” button to have one generated
4. Display: Choose how the Instagram images are displayed in the gallery or LookBook.
5. Number items per row : Set how many images should appear per row on the front end.
6. Display limit : Set the maximum number of Instagram images to display at one time.
7. Link to Instagram: Enable this option to show a “View on Instagram” button on the image quickview popup. Clicking the button will open the original Instagram post in a new tab.
8. Schedule: Syncing will be triggered automatically when someone visits your WordPress site. No need to manually refresh unless you want to force a sync.
9. Image Status: Choose the default status of the LookBooks created from imported Instagram images:
   • Public: Immediately visible on your site
   • Pending: Awaiting review before publishing
   • Draft: Not visible until manually published
10. Data Update: Define how the plugin handles existing imported images:
    • Skip: Do not import if already exists
    • Duplicate: Import again, even if it’s already in the system
    • Update Likes/Comments: Refresh social data like likes and comments on existing images
11. Image Quantity: Set how many images the plugin should fetch per sync. A smaller number will sync faster. Maximum allowed is 12.

 

 

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.
   • Single Image
   • Slides
   • Gallery
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.