+92-322-4028612 sales@najeebmedia.com

WooCommerce Personalized Product Options Manager Inputs Guide

PPOM add custom field on product page with 21 different input types. Nice and simple UI and bunch of options against each field give admin and users to personalize any product before checkout. Following details are provided for each input fields.

Creating new fields in PPOM.

  1. We assumed that you installed plugin and access it via WooCommerce -> PPOM Settings menu
  2. Before adding new input there are Basic settings area on top.
  3. Following FAQs will help you understand more about this.

Meta group name?

It’s just to label your fields group

Control price display on product page?

Do not show price table: From version 10 prices are shown under extra fields just before Add to cart button. If you don’t want to show this table just use following option:

We recommend to use following two options when you use options with price and client will love to see what’s actual price of product after adding options.

Show only Option’s Sum: As name suggest, only option total will be shown to client, best if you have long list of options.

Show Each Option’s Price: It will show price against each option, recommended when you have less options.

Input CSS?

If you are designer, you can add your own CSS. See following some help about classes.

input wrapper class: Each input is wrapped inside a div with class ppom-input-{field_data_name}

Where {field_data_name} is field’s data name property

Apply for Categories?

It will show these fields only selected categories. Add categories slug per line, leave blank for default.

Aviary API Key (Photo Editing)?

This is special/paid add-on to edit photos with Aviary. Read more about Aviary Add-on here

PPOM Basic Settings PPOM Basic Settings

1- Text Input

Text input displays an input box allow client to personalize Product with text like ‘Name on Mug’ etc.

1- PPOM Text Input
  • Title & Description
  • Required
  • Error Message
  • Min. Length
  • Max. Length
  • Default Value
  • Input Masking
    • 9: numeric [ 33-213334-9 –> 99-999999-9]
    • a: alphabetical [ ID-card –> aa-aaaa]
    • *: alphanumeric [ ID-213334-9 –> aa-999999-9]

2- Email Input

Text input displays an email input box allow client to personalize Product with e-mail address.

2- Email input with invalid data
  • Title & Description
  • Required
  • Error Message

3- Textarea Input

Just like Text input displays an a larger box allow client to personalize Product with text.

3- Textarea Input
  • Title & Description
  • Required
  • Error Message
  • Max. Length
  • Post ID
    • This will pull content of post and set as default contents
  • Rich Editor (Off/On)
  • Rows

Note: Width (columns) are manipulated with field width

4- Number Input

Number input displays regular Number input box allow client to personalize Product with digits only like for Phones, IDs etc.

4- Number Input
  • Title & Description
  • Required
  • Error Message
  • Max. Value
  • Min. Value
  • Steps
  • Default Value

5- Date Input

Date input displays regular Date using input box allow client to personalize Product with Date e.g Date of birth etc. It use HTM5 datepicker however you can enable jQuery UI Datepicker from settings.

5- Date Input
  • Title & Description
  • Required
  • Error Message
  • Use jQuery Datepicker
  • Date formats
  • Year Range (1950: 2017)
  • Default Value

6- Radio Options Input

Radio input allow user to select single option set by admin, recommended when you have less options. Prices can also be set against each option.

6- Radio Input
  • Title & Description
  • Required
  • Error Message
  • Add Options
    • Option and Price (optional)
    • Price can also be given in %
  • Fixed Fee and Fixed Fee Taxable
    • This will add price to cart (one time) not multiply with quantities. Used when need to charge your client one time regardless quantities ordered.
  • Set Default Option

7- Select Options Input

Select input allow user to select single option set by admin in Dropdown, recommended when you have many options. Prices can also be set against each option.

7- Select Option Input
  • Title & Description
  • Required
  • Error Message
  • Add Options
    • Option and Price (optional)
    • Price can also be given in %
  • Fixed Fee and Fixed Fee Taxable
    • This will add price to cart (one time) not multiply with quantities. Used when need to charge your client one time regardless quantities ordered.
  • Set Default Option
  • First Option
    • like: Select your option

8- Checkbox Options Input

Checkbox input allow user to select multiple option set by admin. Prices can also be set against each option.

8- Checkbox Options Input
  • Title & Description
  • Required
  • Error Message
  • Add Options
    • Option and Price (optional)
    • Price can also be given in %
  • Fixed Fee and Fixed Fee Taxable
    • This will add price to cart (one time) not multiply with quantities. Used when need to charge your client one time regardless quantities ordered.
  • Checked Options
  • Min. Checked Options
    • Restrict client to at least select Min checked options
  • Max Checked Options
    • Restrict client to not to check more than Max. options.

9- Image Option Input

Image input are just like Radio/Checkbox but images can be uploaded against each option. Price can also be set against each image option.

9- Image Input
  • Title & Description
  • Required
  • Error Message
  • Select Image
    • Select image from Media Library
    • Title, Price and URL to link image
  • Fixed Fee and Fixed Fee Taxable
    • This will add price to cart (one time) not multiply with quantities. Used when need to charge your client one time regardless quantities ordered.
  • Multiple Selection
    • More than one image can be selected
  • Selected Image
  • Enable Legacy View
    • Show old view if needed for old versions.

10- Palettes Option Input

Palettes input is just like Radio/Checkbox but different colors can be added as option. Price can also be set against each palette color.

10- Palettes Options Input
  • Title & Description
  • Required
  • Error Message
  • Add Colors
    • Set color cods (e.g: #ffcccc)
    • Price also can be in %
  • Fixed Fee and Fixed Fee Taxable
    • This will add price to cart (one time) not multiply with quantities. Used when need to charge your client one time regardless quantities ordered.
  • Multiple Selection
    • More than one image can be selected
  • Selected Color
  • Color Width
    • It use to render color palette box width
  • Color Height
    • It use to render color palette box height
  • Show as Circle?
    • Make a nice circle like in screenshot below

11- Timezone Input

Timezone input is a special form of Select Input but it has predefined list of all Time-zones. Different Time-zones can also be filtered with options.

10- Palettes Options Input
  • Title & Description
  • Required
  • Error Message
  • Add Colors
    • Set color cods (e.g: #ffcccc)
    • Price also can be in %
  • Fixed Fee and Fixed Fee Taxable
    • This will add price to cart (one time) not multiply with quantities. Used when need to charge your client one time regardless quantities ordered.
  • Multiple Selection
    • More than one image can be selected
  • Selected Color
  • Color Width
    • It use to render color palette box width
  • Color Height
    • It use to render color palette box height
  • Show as Circle?
    • Make a nice circle like in screenshot below

12- File Upload

File Input allow clients to upload files from their computer or mobile devices. Admin can set any file type and sizes. Images can be edited using awesome Aviary add-on plugin. See Feature for more detail.

13- File Input
  • Title & Description
  • Required
  • Error Message
  • File Cost
    • Add one time cost in cart
  • Fee Taxable
  • Button Label & Class
  • Files Allowed
    • Number of file allowed
  • File Types
    • jpg,png,zip etc
  • File Size (in mb)
  • Enable Photo Editing

13- Image Cropper

Just like a File Upload but only support images with nice cropper using Croppie JS API

14- Image Cropper
  • Title & Description
  • Required
  • Error Message
  • File Cost
    • Add one time cost in cart
  • Fee Taxable
  • Button Label & Class
  • Files Allowed
    • Number of file allowed
  • Images Types
    • jpg,png,gif etc
  • File Size (in mb)
  • CROPPIE SETTINGS

14- Audio Video Input

Audio/Video input allow clients to select Audio/Video options uploaded by Admin in media library. It’s similar to Image type input but with different media type. Price can also be set against each option.

14- Audio Video Input
  • Title & Description
  • Required
  • Error Message
  • Select Audio/Video
    • Select media from WP Library
    • Set price optionally
  • Multiple Selection

15- Variation Quantities (Options Quantities)

Variation Quantities allow client to order different quantities against different options. Read more about variation quantities here.

15- Options Quantities
  • Title & Description
  • Required
  • Error Message
  • Add Options
    • Option name
    • Price
    • Min Qty.
    • Max Qty
  • Include Product Price?
    • This will also add product base price along options prices
  • Horizontal Layout
    • Will show in horizontal.

16- Price Matrix

Price Matrix  allow admin to offer client Less Price on Bulk/More quantities. More quantities will decrease the price set in matrix. It can be used as discount alternatively. More detail about Bulk Price/Discount

16- Price Matrix
  • Title & Description
  • Required
  • Error Message
  • Apply as discount
  • Discount On
    • Apply discount only for Base or Option+Base if other options are used.
  • Price Matrix
    • Option: 1-10 (for quantities)
    • Price 5 or 5%
  • Quantity step (increase quantity by given step)
  • Enable Quantity Slider
  • Show Price per Unit?
    • It calculates price per unit and show along Total price.

17- Color Picker Input

Color Picker allow client to select color. Palette colors can also be defined in settings.

Woo Album 1 – PPOM DEMO
  • Title & Description
  • Required
  • Error Message
  • Default Color
  • Palettes
  • Palettes Width

18- Date Range Picker

Date Range Picker allow clients for selecting dates, times, or from predefined ranges.

18- Daterangepicker
  • Title & Description
  • Required
  • Error Message
  • Default Date
  • Show Timepicker
  • Timepicker increment
  • Timepicker 24 hours
  • Show Timepicker seconds
  • Open Style (Down/Up)
  • Show Week Numbers
  • Start Date (must be set)
  • End Date (must be set)
  • Min. Date
  • Max . Date
  • Disable past date
  • Disable Weekends

19- HTML Content

It’s not an input, just to add some contents/text or HTML.

19- HTML
  • Content

20,21 - Google Font and Map Picker

Google Font and Map Picker is PPOM addon, It adds  two input fieds. Font picker/drop down to select fonts. Admin can add Google font families with plugin settings. And Map allow client to enter address and it returns coordinates (latitude, longitude)

Note: It’s paid ($25.00) Addon

Google Font Picker PPOM – PPOM DEMO
Google Font Picker PPOM – PPOM DEMO
  • Title
  • Description
  • Filter by Font families
  • Setting Custom Fonts
    • Inside plugin there is directory fonts with sample file
    • Edit this custom.fonts.css file with your own fonts
    • Upload fonts files inside same ‘fonts’ directory’
    • Add fonts families name in plugins settings

Map Input

  • Title & Description
  • Google Key
  • Zoom Control
  • Pan Control
  • Street View

We have built this demo with Nice Looking OYE Theme.

OYE Theme