EPOW – WooCommerce Custom Product Options

Support Purchase

System Requires:

• WordPress Version: 5.0 or higher
• PHP 7.0 or higher

 

Download & Install

• You can either add the plugin in the WordPress Dashboard (Free plugin only), or manually upload the plugin file (both Free & Premium plugins).
• For premium version, after you downloaded the zip file from Envato, ensure the file you upload to your WooCommerce store is epow-custom-product-options-for-woocommerce.zip
• Follow this instruction for both Free/Premium download and installation.

 

Update The Plugin

• To update the purchased plugin, within 6 months from purchase, you can receive updates automatically on one domain by authenticating the plugin on that domain. Follow this instruction for specific steps.
• Or you can update the plugin manually (no expiry date, you can do it for a lifetime). Simply re-download your purchased plugin file in your Envato account – Download list. More info in this instruction.
• For free version of the plugin, you can always update the plugin in the WordPress Plugins list. You can see this instruction – IV. UPDATE FREE PLUGINS for a better view.

 

 

EPOW – WooCommerce Custom Product Options is a plugin with functions that help you add and customize extra options for your WooCommerce products.

 

Feature:

1. Add global custom product options form
   • Create unlimited creation of global forms
   • Set the priority for each form
   • Manage rules for products: Include/Exclude products; Include/Exclude categories
   • Configure 9 elements to showcase a wider variety of products and options that work for almost any type of WooCommerce store: Section; Heading; Divider; Text; Number; TextArea; Select; Checkbox; Radio
   • Be provided with full configuring and customizing settings for each section/field
   • Show/Hide the elements with And/Or relation and specific rules configured according to necessity
2. Add custom form for individual product
   • Add custom form directly that only applies to a specific product
   • Modify 9 elements just like Global Forms with settings to configure and customize each field/section
   • Show/Hide the elements with And/Or relation and specific rules configured according to necessity

 

WooCommerce Custom Product Options comes with a custom form builder where you can add elements/sections; drag and drop to change their position and easily configure them

9 elements provided by WooCommerce Custom Product Options:

1. Section: A container of all elements below it, the boundaries of a container start itself and end when it meets another Section
2. Heading: Add content using HTML heading/paragraph tags to the product page – H1; H2; H3; H4; H5; H6, p
3. Divider: A line between 2 elements/sections
4. Text: A normal text input field with different types of text. You can only enter one line of text with this element
5. Number: A number input field to accept numbers, with min/max value to set limit to the entered number
6. TextArea: A text input field but you can enter text content in multiple lines
7. Select: A drop-down to choose from the available list
8. Checkbox: For selecting more than one option
9. Radio: For selecting one option from multiple choices

General configuration and customizing options for WooCommerce custom product options:

1. General configuration
   • Make an element required
   • Set price type/price value for each field. With this, you can make a custom option free or paid
   • Set label/placeholder for each field if there’s any
   • Direction – Horizontal or Vertical – for Checkbox and Radio fields
   • Min/Max value for Number field
   • Limitless options for Select, Radio and Checkbox fields
2. Customizing options
   • Set element width
   • Padding/Margin: all 4 sides – bottom, top, right, left
   • Control the line height
   • Select the text and the background color
   • Customize the label and the border of the element with: Label position, Label/Border color; Label font size; Label font weight; Border width (all 4 border lines); Border style; and Border radius
   • Field for Custom CSS if the options are not enough for you

And the Advanced rule for the Global form

1. Make the form show/hide with specific relation – And or Or
2. Add and configure the rule(s) for the “Show/Hide” function above

 

 

When you first navigate to the plugin settings page, there will be no global form there. The form will be visible after you start making one. A list with fully configured forms will look like this

The form info you can see from the list includes:

• Form title, published date
• Priority: Form with higher value in this column will be given priority
• Product assignment: Show the form will be assigned to which products/product groups

Actions you can do in the list:

• Add new global form: Use the “Add Global Form” button
• Edit/Quick Edit: “Edit” will lead you to the form editor page, where you can configure the whole form specifically; while “Quick edit” lets you stays within and edit title, published date/time and password (additional)/status of the form.
• Duplicate: Make a copy of the selected form, the only difference is the title
• Trash: Move selected form(s) to Trash
• Filter/Search form: Filter the forms based on published date; or search form with their name. This function is useful when you have many forms and need to find specific ones
• Bulk edit/Bulk trash: Bulk edit will change status of the selected forms; and Bulk trash will move them to the Trash.

 

Now to start using EPOW, you:

• Create global form(s): Global Forms are applied to products/product groups you select – Building your custom option forms from elements; configure them according to your expectations; add conditional rule(s) to show/hide if necessary; define priority; assign products/product groups you want…
• Create individual forms(s): Individual Forms are applied to only one product – Building forms from elements; and configure them and manage the rule to show/hide according to your expectations.

 

See this short video for how to install and use EPOW – WooCommerce Custom Product Options

 

 

Global Forms

The Global Forms of custom product options are applied to all simple and variable products in your WooCommerce Products list.

CREATE GLOBAL FORMS

Go to Dashboard >> EPOW >> Global Form >> Add Global Form

Or Dashboard >> EPOW >> Add Global Form

You’ll be redirect to the editor page to start building your form. Here you add elements and configure them to finish

 

CONFIGURE FORM

General form settings

Before or after building a global form, you must:

• Give it a title
• Assign products/products groups
• If you’re building many global forms and assigning some of them to the same products/product groups, adjust their priority

 

Adding elements

Use the “+ Element” to add elements and modify them with:

• General settings: Element label, Element direction, Element Price (free or paid), …
• Style settings: Padding, Margin, Color, Custom CSS…
• Advanced settings: Rule to show/hide elements

     

 

 

Individual Forms

You can build forms for individual product only. It’s done in the product data settings.

 

CREATE INDIVIDUAL FORM

Go to product editor page >> Product data >> EPOW – Custom Product Options >> Click “Go to edit” button

You’ll be redirected to the option editor page just like the Global Form, but in this individual form, the general setting is different, there’s no form title, products assignment or priority. Because the form will only be applied to that one product and will take the highest priority if you make it so.

 

GENERAL SETTINGS

The general settings of an Individual form has only one option: Exclude the product from any Global Form that the product itself is included.

 

 

CONFIGURE FORM

Configuring an individual form is almost like doing the same thing as global forms, except for configuring the general settings.

1. Add elements and modify them: Follow this documentation.
2. Edit rules to show/hide elements if needed: Follow this documentation.

After you finish building an individual form, the form shows in the product editor page – Product data. For illustrative purposes in this documentation, we have added an example of individual form with options as followings:

 

It will show like this on the backend:

 

And like this on the frontend:

 

 

How to add custom options to Product page

Add global custom options for multiple products

Step 1: Create Global Forms

Step 2: Assign products

Step 3: Now the form including the custom options is available in the product page of the selected products, you can always go back to this form editor page to configure the options again.

 

Add custom options for single product

Step 1: Go to single product editor page >> Product data >> EPOW – Custom Product Options >> Click “Go to edit” button

Step 2: Build your individual form

Step 3: Now the form including the custom options is available on the front end of this product, and it’s only available in this product, you can always go back to this form editor page to configure the options again.

 

 

How to build custom options form

For either Global Form or Individual Form, the process to build them is similar.

Step 1: Select the elements to add using the   button

Step 2: Add the required information to configure each element as per your requirements. For the purpose of this documentation, we added the following elements.

Step 3: Now the form is created, go to the product page to check.

 

 

Global Forms – General settings

On the editor page of a global form, the first thing you see is not the configuration of the elements, but the general form settings:

General properties

This tab contains fields to capture the basic details of a form

• Title: A label for the form.
• Priority: The form with the higher value is prioritized
• Include products: Select particular products to show the form by adding their names
• Exclude products: Select particular products to exclude the form by adding their names
• Include categories: Assign the form to the products belong to specific categories by adding the category names
• Exclude categories: Exclude the form from categories by adding their names

 

While building the form, you can:

• Move elements/sections by dragging and dropping

 

• Same action, but you can do it here:

• Duplicate, edit, and remove elements/sections
• Indicate that the current element is currently being viewed. Clicking the Eye will toggle between Show and Hide states for that element/section. It’s like you disable the element/section, it’ll affect both back end and front end.

 

 

Show/Hide elements

In either global forms or individual forms, you can make specific elements show/hide based on conditional rules.

 

Situation for usage example:

If you’re selling plain shirts, you may add a ‘Customize my shirt’ tick box. When customers check the box, a text input field appears letting customers enter their wanted text content to be printed on their shirt. This is better than displaying the options all the time because it keeps the page uncluttered for customers who don’t require them

 

Basically, this advanced function has 4 properties:

1. Enable: This option is to enable/disable all options below it.
2. Display: Show/Hide the selected element based on the rules configured below this selection.
3. Relation: Choose the relation for the rules below, this option is important especially when you have many rules.
4. Rule: A basic rule will include:
   • Element: Select the target Element for the rule. The target CAN NOT be: Section, Divider, Heading
   • Operator: Particular types to run the rule along with the value. The operator changes dynamically based on the target Element.
   • Value: Target Element value, this field also changes dynamically based on the target Element and the Operator.

 

To demonstrate the example above, the advanced rule settings could be as followings: Make the field “Add your text here” show when the field “Print text on your shirt” has the value “Yes” (this field is checked box, which means when the option “Yes” is checked). Otherwise the field “Add your text here” will be hidden.

 

 

 

Thank you for your attention!

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