1.2 Plugin Installation

This section covers the first steps when using Live Product Editor for WooCommerce. Please read it thoroughly now to avoid problems later.

To install this plugin you must have a working version of WordPress and WooCommerce plugin already installed. For information on installing the WordPress platform, please see the WordPress Codex - https://codex.wordpress.org/Installing_WordPress. Upon downloading the Live Product Editor for WooCommerce archive, extract the archive and inside you will find full contents of your purchase. In the main archive you will find woocommerce-frontend-shop-manager.zip file archive that contains the installable plugin files.

Please Note: You can install the plugin in two ways: inside WordPress, or via FTP. If you have trouble installing the theme inside WordPress, please proceed with installing it via FTP and you will be able to get around the issue

Installing from WordPress

Follow the steps bellow to install from WordPress Dashboard

Navigate to Plugins

Click Install Plugins and click Add New

Click the Upload Plugin button

Navigate woocommerce-frontend-shop-manager.zip on your computer and click Install Now

1.3 Automatic Updates

To get automatic updates within your website WordPress Dashboard use the Envato Market (https://envato.com/market-plugin/) plugin. This plugin, once installed, will allow you to update all plugins and themes purchased on CodeCanyon or Themeforest, so feel free to use this standardized solution! To get this to work, you need to navigate here → Envato Market (https://envato.com/market-plugin/) and install and activate this plugin. Once done, plugin will connect to the Envato platform and acquire your purchase information. Then you can update all plugins and themes directly in your WordPress Dashboard! Sounds awesome!

1.4 Theme Specific Installations

Popular themes and proper Live Product Editor for WooCommerce installation!

When dealing with these popular themes just follow the basic steps when installing as described in the theme section bellow and your filters will be installed in just a few seconds!

1.4.1 Avada

To install Live Product Editor for WooCommerce plugin in Avada, go to the WooCommerce > Settings > Live Product Editor page and set the following options. If the option is empty, just leave it blank as the default setting will work.

SHOP INIT ACTION:

SINGLE PRODUCT INIT ACTION:

NOTE: In Avada, you'll need to add following snippet to your custom CSS:

.wfsm-top-buttons {z-index:51;}

Now navigate to to the WooCommerce > Settings > Live Product Editor and setup the plugin! For further read on how to setup the filter please visit the Settings section.

1.4.2 Enfold

To install Live Product Editor for WooCommerce plugin in Enfold, go to the WooCommerce > Settings > Live Product Editor page and set the following options. If the option is empty, just leave it blank as the default setting will work.

SHOP INIT ACTION:

SINGLE PRODUCT INIT ACTION:

Now navigate to to the WooCommerce > Settings > Live Product Editor and setup the plugin! For further read on how to setup the filter please visit the Settings section.

1.4.3 Flatsome

To install Live Product Editor for WooCommerce plugin in Flatsome, go to the WooCommerce > Settings > Live Product Editor page and set the following options. If the option is empty, just leave it blank as the default setting will work.

SHOP INIT ACTION:

SINGLE PRODUCT INIT ACTION:

Now navigate to to the WooCommerce > Settings > Live Product Editor and setup the plugin! For further read on how to setup the filter please visit the Settings section.

1.4.4 Shopkeeper

To install Live Product Editor for WooCommerce plugin in Shopkeeper, go to the WooCommerce > Settings > Live Product Editor page and set the following options. If the option is empty, just leave it blank as the default setting will work.

SHOP INIT ACTION:

SINGLE PRODUCT INIT ACTION:

Now navigate to to the WooCommerce > Settings > Live Product Editor and setup the plugin! For further read on how to setup the filter please visit the Settings section.

1.4.5 Atelier

To install Live Product Editor for WooCommerce plugin in Atelier, go to the WooCommerce > Settings > Live Product Editor page and set the following options. If the option is empty, just leave it blank as the default setting will work.

SHOP INIT ACTION:

SINGLE PRODUCT INIT ACTION:

Add this custom CSS to your theme custom CSS option to fix the out of place icons on Single Product pages.

.container.product-main {position:relative;}

Now navigate to to the WooCommerce > Settings > Live Product Editor and setup the plugin! For further read on how to setup the filter please visit the Settings section.

1.4.6 BeTheme

To install Live Product Editor for WooCommerce plugin in BeTheme, go to the WooCommerce > Settings > Live Product Editor page and set the following options. If the option is empty, just leave it blank as the default setting will work.

SHOP INIT ACTION:

SINGLE PRODUCT INIT ACTION:

Now navigate to to the WooCommerce > Settings > Live Product Editor and setup the plugin! For further read on how to setup the filter please visit the Settings section.

1.4.7 Divi

To install Live Product Editor for WooCommerce plugin in Divi, go to the WooCommerce > Settings > Live Product Editor page and set the following options. If the option is empty, just leave it blank as the default setting will work.

Now navigate to to the WooCommerce > Settings > Live Product Editor and setup the plugin! For further read on how to setup the filter please visit the Settings section.

1.4.8 Legenda

To install Live Product Editor for WooCommerce plugin in Legenda, go to the WooCommerce > Settings > Live Product Editor page and set the following options. If the option is empty, just leave it blank as the default setting will work.

SHOP INIT ACTION:

SINGLE PRODUCT INIT ACTION:

Now navigate to to the WooCommerce > Settings > Live Product Editor and setup the plugin! For further read on how to setup the filter please visit the Settings section.

1.4.9 Listify

To install Live Product Editor for WooCommerce plugin in Listify, go to the WooCommerce > Settings > Live Product Editor page and set the following options. If the option is empty, just leave it blank as the default setting will work.

SHOP INIT ACTION:

SINGLE PRODUCT INIT ACTION:

Now navigate to to the WooCommerce > Settings > Live Product Editor and setup the plugin! For further read on how to setup the filter please visit the Settings section.

1.4.10 Salient

To install Live Product Editor for WooCommerce plugin in Salient, go to the WooCommerce > Settings > Live Product Editor page and set the following options. If the option is empty, just leave it blank as the default setting will work.

SHOP INIT ACTION:

SINGLE PRODUCT INIT ACTION:

Now navigate to to the WooCommerce > Settings > Live Product Editor and setup the plugin! For further read on how to setup the filter please visit the Settings section.

1.4.11 X Theme

To install Live Product Editor for WooCommerce plugin in X Theme, go to the WooCommerce > Settings > Live Product Editor page and set the following options. If the option is empty, just leave it blank as the default setting will work.

SHOP INIT ACTION:

SINGLE PRODUCT INIT ACTION:

Now navigate to to the WooCommerce > Settings > Live Product Editor and setup the plugin! For further read on how to setup the filter please visit the Settings section.

1.4.12 The 7

To install Live Product Editor for WooCommerce plugin in The 7, go to the WooCommerce > Settings > Live Product Editor page and set the following options. If the option is empty, just leave it blank as the default setting will work.

SHOP INIT ACTION:

SINGLE PRODUCT INIT ACTION:

Now navigate to to the WooCommerce > Settings > Live Product Editor and setup the plugin! For further read on how to setup the filter please visit the Settings section.

1.4.13 Request a Specific Installation

Popular themes and we have not included installation? Please drop us an email!.

You can either do this here, in the Live Product Editor comments here or using the Pre-Sale questions contact form at this link. This will surely improve our Live Product Editor for WooCommerce! Thanks!

2.1 Guide Video

A complete video guide, everything you need to know, be sure to watch it! RECORDED FOR VERSION 2.0.0!

Watch this full video guide video to quickly learn the basics of Live Product Editor for WooCommerce.

Plugin Scripts

Check this option to load plugin scripts in all pages. This option fixes issues in Quick Views, AJAX loads and similar.

2.3 New Product Shortcode &lsqb;wfsm_new_product&rsqb;

Use this shortcode to insert the new product button anywhere!

For creating new products plugin has two options. Default option will show a button on all WooCommerce pages in the top right corner. If you do not want the standard button you can use the &lsqb;wfsm_new_product&rsqb; shortcode to make a button appear anywhere. Here are some samples.

This shortcode generates a default button

&lsqb;wfsm_new_product&rsqb;

If you want to specify type of the created product use product_type="" parameter. Accepted options are simple, variable, grouped, external..

Adding image button is also supported!

2.4 Extending Live Product Editor

Plugin is extendable. Use its function to create your own options!

To create simple custom options use the Custom Options. If this method does not work for your options use the integrated Live Product Editor actions and hooks to add your options. Here is a sample extension plugin that shows all generic options and creating and saving custom options.

Generic settings are the same as in the Custom Options manager and include types input, textarea, checkbox and select. To create a custom setting, where you can output any HTML content use the filter 'wfsm_custom_setting_%%CUSTOM_SETTINGS_TYPE%%. In our demo extension following code adds the my_custom_settings option type.

When saving custom type settings use wfsm_save_product action. Important thing is add wfsm-collect-data class to fields (inputs, textareas, selectboxes..) that need to be saved. This way your input values will be available in wfsm_save_product action in an $options array that can be evaluated when saving the product fields. So, make sure your field elements have class="wfsm-collect-data". In our demo extension saving is done by the following function.

With these samples any extension can be supported that is WooCommerce products related. Any settings can be saved, even the complex arrays or JSON strings. If you release an extension please do contact us to list you on our Live Product Editor Codecanyon.net page. Thanks!

3. How to and FAQ?

FAQ and a small knowledge base on the issues.

3.1 Live Product Editor short guidelines and begginers tips

To use Live Product Editor properly follow these steps.

Register your product to get free automatic updates!

Install properly. If you need use custom actions for installation, but this is really not needed unless you know what you are doing.

Q: How to create a custom editable option for my product key?

Live Product Editor 3.3.0+ supports custom options for your products. If you want to edit a certain post key from the postmeta database table follow this quick tutorial:

Step 1 - Using the Custom Settings Manager from the Live Product Editor Settings page create a new group of settings. For this click the Add Custom Settings Group.

Step 2 - Name your group. This name will appear in the Live Product Editor as a editable tab.

Q: How to use vendor restrictions?

To limit editable product options for vendors use the Default Vendor Restrictions and Vendor Groups Manager. The first option will set the default editable options for your vendors. Click the field and select which options are restricted for editing. Restrictions can be applied to groups too. Use the Vendor Groups Manager and click the Add Vendor Premission Group to create a new restriction group. When the group is created, enter the group name. Click the Select Users input and select users that will be assigned to the group. Now click the last input where it says Selected product options vendors from this group will not be able to edit. Selecting these options will restricted them from editing for selected users in the group.

4. Support?

If something goes wrong check this section. Contact the support and we will help!

4.1 Where to get support?

If everything else fails you can surely get support!

If you need help, navigate here → Support Pages (https://mihajlovicnenad.com/support/). With every purchase, 6 months of Premium Support is included. To login to Premium Support click the Connect with Envato button. If you need to discuss something with the community use the Community Forum. Using these channels you can open tickets or topics, report problems with plugins, bugs and track important inofrmation too. Be a part of this community and join today! Thanks!

4.2 Plugin author and contact / Mihajlovicnenad.com

Hard work and dedication stand behind the Live Product Editor for WooCommerce!