For a shopping experience as unique as your customers

From adding a personal engraving, to upgrading to premium fabric, customizing products can keep your customers coming back. With Product Add-Ons, you can offer special options to your customers in a snap.

Product Add-Ons allow your customers to personalize products while they’re shopping on your online store. No more follow-up email requests—customers get what they want, before they’re done checking out.

Add options via text boxes, dropdowns, text areas, checkboxes, custom price inputs, even sample images. Add-ons can be added globally or per-product from the edit product page.

Give your customers the options they want

Product Add-Ons is one of the most popular extensions available for WooCommerce. It gives you and your customers even more options, including (but definitely not limited to):

Image-based selections

A picture’s worth a thousand words, so why describe a customer’s personalization options when you can show them? With image-based selections, customers can see what they’re getting before they buy.

Flat fees

Charge customers a flat fee regardless of how many products they ordered. Perfect for a one-time set-up charge or a rush fee.

Percentage fees

Charge a fee for the add-on based on a percent of the total price—this is especially useful for service-based add-ons that can be tougher to boil down to a flat fee.

Text input

Let your customers enter custom text to create a custom t-shirt, add a monogram or personalize a card.

Dropdown

Customer can chose between a few pre-defined options with a drop-down field for your add-on.

Checkboxes

Make customization as easy and satisfying as checking a checkbox. Great for add-on services, like gift wrapping or express shipping.

Custom price

Let your customers name their price, perfect for tips, donations and gratuity!

Add-ons can be named, described, reordered and (optionally) given prices.

The extension also works with:

• WooCommerce Subscriptions – add additional options to subscription products.
• WooCommerce Bookings – offer upgrades like an oil treatment for a massage, priority seats for their tour or a rush fee for their rental.

The post Product Add-Ons first appeared on CODIBU.

WS Form is a powerful form development plugin for WordPress.

This extension allows you to customize products in your store with forms.  You can use this extension to request additional information about a product before it is added to the cart. Furthermore, it works with popular WooCommerce extensions such as QuickView, Wishlist and Dynamic Pricing.

Examples uses include:

• Donation or ‘name your price’ products
• Repeatable sections of fields
• Placing ‘Add to Cart’ in a desired location
• Interactive product configurators
• Multi-step product configurators
• Complex price calculations
• File uploads
• Color swatch selectors

… and more! Visit the demo website to see more examples.

How It Works

1. Choose or create a form in the ‘WS Form’ tab under ‘Product data’ when editing a WooCommerce product.
2. The form is embedded on the product page and allows the customer to customize the product.
3. The form fields completed by the customer are added to the cart and order details.
4. When the order is placed and the order status is set to ‘Processing’ or ‘Completed’ (i.e. paid), WS Form will run any actions associated with the form. This is useful if you need to email someone about the paid order or even send data to an API endpoint.

Getting Started

Product customizations work by embedding forms created in WS Form into a WooCommerce product page.

To customize a product with a form:

1. Add or edit a product.
2. Enter a name for the product.
3. Click on the ‘WS Form’ tab in the ‘Product Data’ section.
4. Choose a template or click to choose an existing form you have already created.

Once the form has been created or selected, a preview of your form will be shown along with options to edit or remove the form.

To test your product customization, click ‘Publish’ (or ‘Update’ for an existing product) to save your changes then click the product URL at the top of the page.

Editing The Form

To edit the form, click the ‘Edit Form’ button. This will take you to the WS Form layout editor.

For additional help with building a form, please visit our knowledge base.

Any of the WS Form field types can be added to a form to customize a product. You can upload a file or even request a signature. Multi-tab forms are fully supported, allowing you to offer step-by-step product customization to customers. You can also include conditional logic in your form to make product customization interactive for the customer.

If you want your form to adjust the price of the product, you can add any combination of e-commerce fields to your form. The total price of the e-commerce fields in your form will be added to the price of the product set in WooCommerce. The price of the product in WooCommerce can be any amount, including zero. So, for example, to create a donation product, you would set the product price to zero and then simply add a price field to your form.

Publishing The Form

Whenever you finish editing your form, you need to ensure it has been published. Simply click the ‘Publish’ button at the top of the layout editor to do this. Your changes will then be reflected on the product.

Customizing Product Prices

It is possible to add WS Form e-commerce fields to your form to change the price of the product. The sum of the WS Form e-commerce fields will be adding to the price of the product.

For example, to create a donation product, you would set the WooCommerce product price to zero, and then add a WS Form price field to your form that would enable someone to enter their donation amount. The amount they enter would then become the price of the product when it is added to the cart.

The WS Form e-commerce fields that can be used to customize a product are:

• Price Enter a price
• Price Select Choose a price from a select pulldown
• Price Checkbox Select prices by clicking checkboxes
• Price Radio Select prices by choosing a radio button
• Price Range Select a price by dragging a range slider

Examples of customizing product prices:

• Donate
• Calculations
• WooCommerce Field Types Example (See below)

To learn more about the WS Form e-commerce fields:

• E-Commerce Introduction
• E-Commerce Field Types

Third Party Extensions

This extension is compatible with the Dynamic Pricing extension. Any product price customization in your form will be added to price calculated by the Dynamic Pricing extension.

WooCommerce Field Types

The WooCommerce add-on installs some optional field types that you can use on your form. You can place these fields on your form in the same way as any other field type, giving you full control over your form layout.

You’ll find these field types at the bottom of the Toolbox sidebar in the layout editor.

To view a demo of these fields, click here.

The prices are styled to match the normal WooCommerce price, but you can easily edit the format if you are familiar with HTML. To edit the HTML of this field, simply click the settings icon of the field.

The available fields are as follows:

Subtotal (WooCommerce Price)

The ‘Subtotal’ field outputs the price of the WooCommerce product before any customizations are applied by WS Form.

Options (WS Form)

The ‘Options’ field outputs the calculated price of the WS Form e-commerce fields on your form.

This is the same value as the ‘Cart Total‘ field used in our e-commerce fields, but instead of acting like a cart total, it is the total amount that will be added to the Subtotal (WooCommerce Price).

Total (Subtotal + Options)

The ‘Total’ field is the sum of the ‘Sub-total’ (WooCommerce product price) and ‘Options’ (Total of your WS Form e-commerce fields).

This is the single product price that will be used when the product is added to the cart.

Quantity

The ‘Quantity’ field allows you to place the WooCommerce quantity field anywhere on your form.

This field acts exactly the same way as the WooCommerce quantity field. If you have set a minimum and/or maximum quantity this field will inherit those properties.

Cart Item Total (Total x Quantity)

The ‘Cart Item Total’ field is the product of the ‘Total’ and ‘Quantity’ fields multiplied together.

It allows you to display the total cart item price that will be used when the product is added to the cart.

Add to Cart Button

The ‘Add to Cart’ button allows you to add a WooCommerce add to cart button anywhere on your form. This button will only be active when the form is fully validated. If you have any variations on your product, a variant will also need to be selected in order for your form to validate.

This button is useful if you have a multi-tab form and only want the Add to Cart button to appear on the last tab.

The normal WS Form ‘Submit’ button also acts like a WooCommerce ‘Add to Cart’ button.

Clear Button

The ‘Clear’ button is used in conjunction with products that have variants. When clicked, it will reset the variations selected. Additionally, this button will also reset your form to its default state. This is not to be confused with the WS Form ‘Clear’ button which clears all form fields. It is named ‘Clear’ here to match the terminology used by WooCommerce.

Choosing Which Fields Appear in Cart and Orders

There might be an occasion when you do not want a field on your form to appear in the cart. For example, you might be using a range slider to set a price field and you only want the price field to be included in the cart.

When the WooCommerce add-on is installed it adds a new setting called ‘Exclude from WooCommerce cart and orders’ that enables you to control whether or not a field will be saved to the cart when the ‘Add to Cart’ button is clicked. This setting can be found when you click to edit a field at the bottom of the ‘Basic’ tab.

If checked, the field will be excluded from WooCommerce carts, orders or confirmation emails.

Configuration

WS Form offers various configuration settings that can be changed to control the look of your customized product.

Source

The product configuration settings can either be sourced at a form (Form Settings) or product (Custom Settings) level.

The ‘Source’ setting has two options:

• Form Settings – If Form Settings is selected, WS Form will use the settings on the form to configure how the product looks. You can click the ‘Edit Settings’ link next to ‘Form Settings’ to conveniently access the WooCommerce settings of the form.
• Custom Settings – If Custom Settings is selected, WS Form will use the settings shown underneath that option to configure how the product looks. Click ‘Custom Setting’ to see the settings. Make any changes required and then click ‘Update’ on the product page.

The configuration settings are the same for both sources and are as follows:

Catalog – Button Label

The default button label shown on products listed in your WooCommerce catalog is set to ‘Select options’. You can change this to anything you wish using the ‘Button label’ setting. For example, you could change this to ‘Donate’ for a donation product.

Product – Hide Price / Price Prefix / Price Suffix

The WooCommerce price can be hidden using these settings. You can also add a prefix and suffix to the price. If you want to change the price to something else entirely, simply hide the price and enter some text into the prefix setting.

Use the ‘Subtotal’ WS Form field (see above) if you want to show this price elsewhere.

Product – Hide Variation Price

This setting has three options:

• Auto – The WooCommerce variation price will be hidden if you have added a WS Form WooCommerce subtotal field to your form (see above).
• Hide – The WooCommerce variation price will be hidden
• Show – The WooCommerce variation price will be shown

Product – Hide Quantity

This setting has three options:

• Auto – The WooCommerce quantity field will be hidden if you have added a WS Form WooCommerce quantity field to your form (see above).
• Hide – The WooCommerce quantity field will be hidden
• Show – The WooCommerce quantity field will be shown

Product – Hide Add To Cart Button

This setting has three options:

• Auto – The WooCommerce variation price will be hidden if you have added a WS Form WooCommerce add to cart field to your form (see above).
• Hide – The WooCommerce variation price will be hidden
• Show – The WooCommerce variation price will be shown

Product – If Form Not Valid

This setting has three options:

• Disable Add To Cart – The default WooCommerce behavior is to disable the ‘Add To Cart’ button until variations have been selected. When you customize a product with WS Form, the ‘Add To Cart’ button will be disabled until the form validates if you choose this option.
• Show Invalid Feedback – If you want to show normal form validation when ‘Add To Cart’ is clicked, choose this option. This will show normal invalid feedback text on your form fields if they are not validated.

Product – Clear Hidden Fields

If this setting is checked, WS Form will not include fields that are hidden in the cart. This option is enabled by default to ensure only fields visible to the customer are included in the cart. You can override this setting at a field level under Basic > Hidden Behavior > Always Include in Actions.

Cart – Editable

If you want customers to be able to edit a product in the cart after they have added it, you can enable the ‘Editable’ setting. If enabled, Customers can click the product in their cart, make any necessary adjustments and then click to add the product to their cart again.

Cart – Allow Negatives

If checked, the calculated form amount can be negative and subtract from the product price.

WS Form – Run WS Form Actions

If checked, WS Form will run actions when the order status changes and matches the order status configured on each action. See below for more information about running actions.

Form Product Assignment

When you choose a template or existing form to assign to a product, WS Form assigns that product to the form automatically for you. You can also assign forms to:

• All products
• One or more specific products
• Product categories
• Product tags

To change which products a form is assigned to:

1. Edit the form
2. Click on the form settings (gear) icon at the top right of the layout editor
3. Click the ‘Woo’ tab
4. Edit the ‘Assign To’ settings

The Woo tab looks as follows:

Assign To

The ‘Assign To’ option has three options:

• No Products – The form will not be assigned to any WooCommerce products (This is the default for regular forms on your website that are not used to customize products)
• All Products – The form will be assigned to all of your WooCommerce products
• Filtered Products – The will be assigned to (or excluded from) the categories, tags and specific products you select

Filtered Products

When the filtered products ‘Assign To’ option is selected, six assignment options will appear. Each of these options allows you to add an unlimited number of categories, tags or products to include or exclude. To add an assignment, click the ‘+’ icon and then search for the category, tab or product you with to assign. The assignment options are:

• Included Categories
• Included Tags
• Included Products
• Excluded Categories
• Excluded Tags
• Excluded Products

Handling Multiple Forms Assigned To A Single Product

Each product can be customized using one form.

If you accidentally assign more than two forms to a single product, WS Form will automatically select one of the forms to customize the product with. Forms that have specific product assignments will get priority.

WS Form will also show the assignments on the product page in the WS Form tab. From there you can edit each form and adjust the product assignments as required.

Data Grid Column Mapping

When a user makes a choice with a select, checkbox or radio, WS Form has various data grid column mappings that allow you to customize how choices are displayed on the form and in the cart or orders.

The available column mappings are:

• Label
  Text (or image) that is shown on the form itself to your customer.
• Value
  Value you can use for calculated fields or other conditional logic purposes.
• Price
  Price that match your stores currency settings (Only available on price select, price checkbox and price radio fields).
• Action Variables
  Text used in email notifications and other actions or add-ons.
• WooCommerce Cart
  Text shown in the cart and orders.

To change these settings (example for a select field):

1. Edit the form
2. Click on the settings (gear) icon on the select, checkbox or radio field
3. Click on the options tab to view the data grid
4. Scroll down to the ‘Column Mapping’ section and select the data grid column you would like to use as the value that is stored in the cart and orders
5. Click ‘Save & Close’

Running Actions

A great features of this extension is that WS Form server side form actions can be configured to run when an order status changes. This means that you could send an email to a particular department when a product customization has been sold. Or, you could send notifications about a sale to Slack or any of our third party that WS Form integrates with such as Salesforce, Zapier or MailChimp. For developers, you can even run a WordPress hook when a product customization has been sold.

To configure an action to run for a particular order status:

1. Click the ‘Actions’ (lightning bolt) icon at the top of the page when editing the form.
2. Create or edit an action.
3. At the bottom of the actions setting, change the ‘Run on WooCommerce Order Statuses’ setting. Add as many statuses as you wish that will trigger the action to run.
4. Click ‘Save & Close’.

If your actions are not running, ensure you have the ‘Run WS Form Actions’ setting enabled in Woo settings.

1. Click the ‘Form Settings’ (gear) icon at the top of the page when editing the form.
2. Click the ‘Woo’ tab.
3. At the bottom of the form settings, enable the ‘Run WS Form Actions’ setting.
4. Click ‘Save & Close’.

If you are using ‘Custom Settings’ as your configuration source you should change this setting on your product page.

Variables

The following WS Form variables can be used in actions that relate to WooCommerce orders:

The post WS Form PRO Product Add-Ons first appeared on CODIBU.

You own a flower shop that makes handmade flower arrangements. You have put together several flower arrangements, but you would like your customers to have the choice of selecting several options for creating the arrangement.

Products Used

WooCommerce
WooCommerce Product Addons

Setup and Configuration

Create Products

We’ll first need to create all the flower arrangement products as “Simple” products. To be able to create a common set of product addons for each of these products we will need to make sure they all belong to the same category.

In the sidebar of your WordPress Dashboard, click on Products.
Click on the Add New button on the top.

Add all the regular product data you would normally add for your products

To the right side of the screen there is a “Product categories” box, if you haven’t added a new category yet you can create one here by clicking the “Add new category” link. If you have already created the category then you can assign it to the product by checking the box next to the category name.

Once completed you can click Publish / Update to save the product details. This can be completed for each product that you wish to add to this category.

Create Global Addons

Go to Products > Add-ons in your WordPress Dashboard, and click on the Create New button.

Add a Name for the addon, in this case I called it “Flower Arrangements”.

By default the Product Categories setting will be set to “All Products”, we are going to change this by clicking in the box after the label and then selecting our Flower Arrangements category.

Wrapping addon

Click the “Add Field” button to add an option for wrapping the arrangement.
We are going to set the type as a checkbox field.

Set the title to “Cellophane Wrap”, and add an option with a quantity based fee (the cost for the wrap will depend on how many flower arrangements they purchase).

Ribbon addon

Click the “Add Field” button to add an option for including a ribbon around the arrangement.

We are going to set the type as a multiple choice and display as images.

We will add 3 options each will include an image with a quantity based fee (the cost for the ribbon will depend on how many flower arrangements they purchase).

Card addon

Click the “Add Field” button to add an option for including some custom text on a card.

We are going to set the type as a long text.

Set the title to “Custom message to include on a card” and check the adjust price checkbox to add a flat fee (we will only include one card regardless of how many arrangements they purchase).

Publish the global addons, now you’re products are all set!

Usage

This is what it will look like for your customers:

Single product

Cart

The post Use Case: Flower Shop first appeared on CODIBU.

You own a Spa Service and you would like to include a percentage based gratuity option for your customers, when they book a spa session.

Products Used

WooCommerce
WooCommerce Bookings
WooCommerce Product Addons

Setup and Configuration

Create Bookable product

Go to: Product > Add Product
In Product Data, select Bookable product
Set the Booking duration to “Fixed blocks of 1 Hour(s)”

Availability settings

• All Dates are not-available by default. This setting will be overridden by the availability ranges listed below.
• First block starts at … 10:00 AM
• Range type
• Time Range All Week | From: 10:00 AM | To: 6:00 PM | Bookable: Yes

The availability rules will be applied from first to last.

Costs settings

In the cost setting we can set a block cost of 40. This will be the cost of booking a one hour slot.

Addons settings

In the Addons tab click the “Add Field” button.
We are going to set the type as a checkbox field.
Set the title to “Gratuity”, and set the title format to hide (we only want to display the option label). Add an option with the label “add gratuity” and a percentage fee of 15%.

Publish the product, now you’re all set!

Usage

This is what it will look like for your customers:

Single product

Cart

The post Use Case: Spa Service first appeared on CODIBU.

You own a Coffee Shop and you would like to sell a coffee package to your users on a monthly basis. In addition to the package you would like to offer the user the option to add an additional donation amount to their favourite coffee charity.

Products Used

WooCommerce
WooCommerce Subscriptions
WooCommerce Product Addons

Setup and Configuration

Create Subscription product

Go to: Product > Add Product
In Product Data, select a simple subscription product
Set the subscription price to 20 every month

Addons settings

Charity

In the Addons tab click the “Add Field” button.
We are going to set the type as “Name your price”.
Set the title to the name of the charity. A description can also be added to explain what the user should enter in the field and why they should support this charity.
It’s possible to set a limitation if you want to define a specific range for the donation, but in this case we will leave it without any limitation.

Click the “Add Field” button again to add additional charities which will also be setup as a “Name your price” field.

Publish the product, now you’re all set!

Usage

This is what it will look like for your customers:

Single product

Cart

The post Use Case: Coffee Subscription first appeared on CODIBU.

You own a Job Agency and you would like your customers to be able to sign up as a member to access additional pages on your site. When signing up you want them to be able to upload a CV document.

Products Used

WooCommerce
WooCommerce Memberships
WooCommerce Product Addons

Setup and Configuration

Create membership product

Go to: Product > Add Product
We can leave the product as a simple product and just set the regular price to purchase this product.

Addons settings

In the Addons tab click the “Add Field” button.
We are going to set the type as a “File upload” field.
Set the title to “CV” and check the box to make it a required field.

You can now publish this product.

Create Membership plan

To be able to grant access to a Membership when purchasing the product we created in the previous step, we will need to create a
Go to: WooCommerce > Membership Plans and click the “Add Membership Plans” button.
Give the Membership plan a title.
For Grant access upon we will select product(s) purchase, and then select the product we created in the previous step.

Publish the membership, now you’re all set!

Usage

This is what it will look like for your customers:

Single product

Cart

The post Use Case: Job Agency first appeared on CODIBU.