1.1 Plugin Features

Introduction to some of the plugin features!

The ultimate tool for editing WooCommerce products! Live on site editing! It has never been this easy to manage a professional online store! Check the demo at this link.

• Custom Meta Keys! Inluding select, checkbox, input and textarea controls!
• Downloadable Products! Full Support!
• Product Shipping
• Product Taxes
• Extra Options
• Creating Simple, Grouped, External/Affiliate Products from the Frontend!
• Cloning and Deleting Products
• Managing Variations, Creating, Deleting
• Full Vendor Support! - Vendor Editing Restriction Groups
• Product Content and Description
• Simple, Variable, External/Affiliate Products Support!
• Product Name
• Product Featured Image
• Product Gallery
• Prices, Sale Prices
• Schedule Sales
• Stock Management
• Product Grouping
• Product Categories, Tags
• Categories, Tags New Term Creation
• Product Attributes
• New Attribute and New Attribute Term Creation
• Variable Products
• Variable Featured Images
• Variable Prices, Sale Prices
• Variable Schedule Sale
• Variable Stock Management
• External/Affiliate Links

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

1.3 Automatic Updates

Plugin automatic updates are available! Just use Envato Market (https://envato.com/market-plugin/) plugin!

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.

• SHOP INIT ACTION:
• SINGLE PRODUCT INIT ACTION:

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

#wfsm-editor-overlay {z-index:99999;}

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.

2.2 Settings

To access plugin settings navigate to WooCommerce > Settings > Live Product Editor.

2.2.1 General Settings

Setup Live Product Editor basic appearance!

2.2.2 Product Settings

Setup Live Product Editor product settings.

2.2.3 Vendor Settings

Live Product Editor supports vendor plugins. Configure Live Product Editor and vendor options here.

Click Add Item + to create a new vendor group! IMPORTANT

Vendor Groups Manager is used to create specific restrictions for specific group of users. Click Add Vendor Premission Group to create a new group. Select users and their editing restrictions.

2.2.4 Custom Options

Use the manager to add special editable options for your products.

Extra product options, meta keys, can be edited with the Live Product Editor.

Click Add Item + to create a new options group! IMPORTANT

2.2.5 Installation

Setup Live Product Editor product settings.

2.3 New Product Shortcode [wfsm_new_product]

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 [wfsm_new_product] shortcode to make a button appear anywhere. Here are some samples.

This shortcode generates a default button

[wfsm_new_product]

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

[wfsm_new_product product_type="simple"]

Shortcode also supports class="" parameter (default: class="button") and content.

[wfsm_new_product class="not-button" product_type="simple"]This is my button[/wfsm_new_product]

Adding image button is also supported!

[wfsm_new_product class="not-button" product_type="simple"]<img src="https://my-site-url.com/image.jpg" />[/wfsm_new_product]

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.

<?php
	/*
	Plugin Name: Live Product Editor for WooCommerce - Demo Extension
	Plugin URI: https://www.mihajlovicnenad.com/woocommerce-frontend-shop-manager
	Description:  Live Product Editor for WooCommerce - Demo Extension! - mihajlovicnenad.com
	Author: Mihajlovic Nenad
	Version: 1.0.0
	Author URI: https://www.mihajlovicnenad.com
	*/

	function wfsm_demo_extension() {

		$settings = array(
			array(
				'name' => esc_html__( 'Default Demo Group', 'myplugintextdomain' ),
				'settings' => array(
					array(
						'type'          => 'input',
						'setting-name'  => esc_html__( 'Input Demo', 'myplugintextdomain' ),
						'key'           => '_demo_key_input',
						'options'       => '',
						'default'       => ''
					),
					array(
						'type'          => 'textarea',
						'setting-name'  => esc_html__( 'Textarea Demo', 'myplugintextdomain' ),
						'key'           => '_demo_key_textarea',
						'options'       => '',
						'default'       => ''
					),
					array(
						'type'          => 'checkbox',
						'setting-name'  => esc_html__( 'Checkbox Demo', 'myplugintextdomain' ),
						'key'           => '_demo_key_checkbox',
						'options'       => array(
							'yes' => esc_html__( 'Option is enabled', 'myplugintextdomain' ),
							'no' => esc_html__( 'Option is disabled', 'myplugintextdomain' )
						),
						'default'       => 'no'
					),
					array(
						'type'          => 'select',
						'setting-name'  => esc_html__( 'Select Demo', 'myplugintextdomain' ),
						'key'           => '_demo_key_select',
						'options'       => array(
							'option-1' => esc_html__( 'Option 1', 'myplugintextdomain' ),
							'option-2' => esc_html__( 'Option 2', 'myplugintextdomain' ),
							'option-3' => esc_html__( 'Option 3', 'myplugintextdomain' ),
							'option-4' => esc_html__( 'Option 4', 'myplugintextdomain' ),
							'option-5' => esc_html__( 'Option 5', 'myplugintextdomain' )
						),
						'default'       => 'option-2'
					)
				)
			),
			array(
				'name' => esc_html__( 'Custom Demo Group', 'myplugintextdomain' ),
				'settings' => array(
					array(
						'type'          => 'my_custom_setting',
						'setting-name'  => esc_html__( 'Custom Setting Demo', 'myplugintextdomain' ),
						'key'           => '_demo_key_custom',
						'options'       => array(
							'option-1' => esc_html__( 'Option 1', 'myplugintextdomain' ),
							'option-2' => esc_html__( 'Option 2', 'myplugintextdomain' ),
							'option-3' => esc_html__( 'Option 3', 'myplugintextdomain' ),
							'option-4' => esc_html__( 'Option 4', 'myplugintextdomain' ),
							'option-5' => esc_html__( 'Option 5', 'myplugintextdomain' )
						),
						'default'       => 'option-2'
					),
				)
			)
		);

		Wfsm()->add_settings( $settings );

	}
	add_action( 'wfsm_add_settings', 'wfsm_demo_extension' );

	function wfsm_demo_my_custom_setting( $setting, $id ) {

		$opt = ( $opt = get_post_meta( $id, '_demo_key_custom', true ) ) ? $opt :  array( 'name' => '', 'value' => '' );

		return '
			<input type="text" name="wfsm-my-custom-setting[name]" ' . ( isset( $opt['name'] ) ? ' value="'. $opt['name'] . '"' : '' ) . ' class="wfsm-collect-data" />
			<select name="wfsm-my-custom-setting[select]" class="wfsm-collect-data">
				<option value="value-1" ' . ( isset( $opt['select'] ) && $opt['select'] == 'value-1' ? ' selected="selected"' : '' ) . '>Value 1</option>
				<option value="value-2" ' . ( isset( $opt['select'] ) && $opt['select'] == 'value-2' ? ' selected="selected"' : '' ) . '>Value 2</option>
				<option value="value-3" ' . ( isset( $opt['select'] ) && $opt['select'] == 'value-3' ? ' selected="selected"' : '' ) . '>Value 3</option>
			</select>
		';

	}
	add_filter( 'wfsm_custom_setting_my_custom_setting', 'wfsm_demo_my_custom_setting', 10, 2 );

	function wfsm_demo_save( $id, $options ) {
		$setting = array();
		if ( isset( $options['wfsm-my-custom-setting[name]'] ) ) {
			$setting['name'] = wc_clean( $options['wfsm-my-custom-setting[name]'] );
		}
		if ( isset( $options['wfsm-my-custom-setting[select]'] ) ) {
			$setting['select'] = wc_clean( $options['wfsm-my-custom-setting[select]'] );
		}

		if ( !empty( $setting ) ) {
			update_post_meta( $id, '_demo_key_custom', $setting );
		}
	}
	add_action( 'wfsm_save_product', 'wfsm_demo_save', 10, 2 );

	?>

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.

<?php

	function wfsm_demo_my_custom_setting( $setting, $id ) {

		$opt = ( $opt = get_post_meta( $id, '_demo_key_custom', true ) ) ? $opt :  array( 'name' => '', 'value' => '' );

		return '
			<input type="text" name="wfsm-my-custom-setting[name]" ' . ( isset( $opt['name'] ) ? ' value="'. $opt['name'] . '"' : '' ) . ' class="wfsm-collect-data" />
			<select name="wfsm-my-custom-setting[select]" class="wfsm-collect-data">
				<option value="value-1" ' . ( isset( $opt['select'] ) && $opt['select'] == 'value-1' ? ' selected="selected"' : '' ) . '>Value 1</option>
				<option value="value-2" ' . ( isset( $opt['select'] ) && $opt['select'] == 'value-2' ? ' selected="selected"' : '' ) . '>Value 2</option>
				<option value="value-3" ' . ( isset( $opt['select'] ) && $opt['select'] == 'value-3' ? ' selected="selected"' : '' ) . '>Value 3</option>
			</select>
		';

	}
	add_filter( 'wfsm_custom_setting_my_custom_setting', 'wfsm_demo_my_custom_setting', 10, 2 );

	?>

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.

<?php

	function wfsm_demo_save( $id, $options ) {
		$setting = array();
		if ( isset( $options['wfsm-my-custom-setting[name]'] ) ) {
			$setting['name'] = wc_clean( $options['wfsm-my-custom-setting[name]'] );
		}
		if ( isset( $options['wfsm-my-custom-setting[select]'] ) ) {
			$setting['select'] = wc_clean( $options['wfsm-my-custom-setting[select]'] );
		}

		if ( !empty( $setting ) ) {
			update_post_meta( $id, '_demo_key_custom', $setting );
		}
	}
	add_action( 'wfsm_save_product', 'wfsm_demo_save', 10, 2 );

	?>

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.

Step 3 - Select your option type. Choose from select, checkbox, input (text) or textarea. and click the Add Setting button.

Step 4 - Newly created option will appear, this one also needs a name which is used only for display.

Step 5 - In the field Database Key enter your database key that you want to edit from the postmeta database table.

Step 6 - Set default value if needed.

Step 7 - Click Save Changes at the bottom of the page to save changes.

Q: How to configure custom select box?

Add the select custom setting. Now we need the select options. This is done by adding JSON code to the Options (JSON string) option. Follow these guides to make your settings.

Example #1

Paste this code and get these options. If you want to select by default the first option in the Default Value enter option slug, in this case my-option-1

{
		"my-option-1" : "My Option #1",
		"my-option-2" : "My Option #2"
	}

Example #2

Paste this code and get these options. If you want to select by default the third option in the Default Value enter option slug, in this case bannana

{
		"apple" : "Citric Apple",
		"pear" : "Sweet Pear",
		"bannana" : "Yellow Bananna"
	}

Example #3

Paste this code and get these options. If you want to select by default the fourth option in the Default Value enter option slug, in this case 4

{
		"1" : "My Value #1",
		"2" : "My Value #2",
		"3" : "My Value #3",
		"4" : "My Value #4",
		"5" : "My Value #5",
		"6" : "My Value #6"
	}

Q: How to configure custom checkbox?

Add the checkbox custom setting. Checkbox supports Yes and No strings to be edited. This is done by adding JSON code to the Options (JSON string) option. Follow these guides to make your settings.

Example #1

Paste this code and get these options. If you want by default checkbox to be checked in the Default Value enter yes, if you do not you can either leave it blank or type no

{
		"yes" : "This option is now selected",
		"no" : "You have desected this option"
	}

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!

Live Product Editor for WooCommerce was developed by Mihajlovicnenad.com!

4.3 Older Announcements and Change Logs

If you have missed some of these, please check now as it might be useful!