Live Preview is an innovative plugin specifically designed to enhance the shopping experience on your WooCommerce store. With this plugin, you can add a “Live Preview” button to product pages, allowing potential customers to view a live demo of the website you’re selling — whether it’s a theme, template, or landing page.
Installation
Please first download the plugin you have purchased from your account page. Then upload it to your website by navigating to:
Plugins > Add New Plugin > Upload Plugin > Choose File > Install Now.
Once the installation is successful, click Activate for the Live Preview plugin on the Plugins page.
License
Once activated, please go to Plugins > Installed Plugins > Live Preview > License. Then enter the license key you received after purchasing the plugin.
Features
You can enable or disable the features available in Live Preview.
- Live Preview: Disabling this means deactivating all features of the plugin. As a result, the live preview button will no longer appear on any of your WooCommerce products.
- Desktop, Tablet, and Mobile Modes: Disabling any of these will remove the corresponding preview mode option from the interface.
- Visit Mode: Disabling this will remove the “Visit Live Site” button.
Display Condition
You can configure where the Live Preview button appears across all or selected WooCommerce products using the following four settings:
- Single Product
- Product Archive
- Product Categories
- Product Tags
The Single Product and Product Archive options determine the placement of the button. You have 48 different placement positions available, which can be adjusted based on your website’s layout or theme support (as some themes may not support certain positions).
The Product Categories and Product Tags options define on which categories and tags the button should be displayed. These settings use “AND” logic, meaning:
If you select:
- Product Categories: Template
- Product Tags: Gutenberg
Then the live preview button will only appear for a product that has both the Template category and the Gutenberg tag.
If a product has the Template category but the Elementor tag, the button will not be shown.
Color Options
You can customize the popup’s color scheme—including text and button colors—to align with your website’s branding. This allows for flexible and cohesive visual customization. The available settings are:
- Header Background – Sets the background color of the popup header
- Text – Defines the primary text color within the popup
- Button – Sets the color of the main action button
- Text Hover – Determines the text color on hover
- Button Hover – Sets the button color when hovered over
- Visit Button – Defines the color of the “Visit Live Site” button
Popup Size
You can configure the width and height of the live preview popup. The available settings are:
- Width: Popup width in percentage
- Max Width: Maximum popup width in pixels
- Height: Popup height in percentage
- Max Height: Maximum popup height in pixels
Breakpoint
This plugin provides three modes: desktop, tablet, and mobile. By default, the desktop breakpoint is set to 100%. For tablet and mobile, you can customize the breakpoints according to your preferences. If left blank, the default breakpoints will be used.
You can also set the default live preview mode in this configuration.
Text String
You can customize the popup text strings, allowing you to adjust the mode labels according to your preferences.
Miscellaneous
This advanced setting currently includes a Custom CSS field, allowing you to add your own CSS to customize various aspects of the plugin’s appearance, such as button styling, text formatting, popup dimensions, and more.
Update
Make sure to perform a backup before updating!
To update the plugin, go to the Plugins menu and locate the Live Preview plugin. If an update is available, simply click Update Now, as shown in the image below.
