How to Add Extra Product Options for WooCommerce (Easy Steps)

WooCommerce is one of the best and most popular WordPress plugins to run your e-commerce website. You can use WooCommerce to sell digital products, physical products, memberships, subscriptions, appointments, etc.

WooCommerce has different options to configure your e-commerce store but it has only a limited set of features and that is good for simple product options. Some WooCommerce stores have thousands of product options including customer messages and some of the options are visible to customers based on a conditional logic.

YayExtra – WooCommerce Extra Product Options is one of the best WooCommerce product option pages which comes with more sophisticated features that will fit various types of products with various product options without any hassle. This article will guide you on all the easy steps to add extra product options for WooCommerce.

What is YayExtra?

For example, if you are running your e-commerce business with the following types of products then the YayExtra product options plugin provides you to create extra product options as your requirements.

These extra product options allow you to create additional fees, discounts, and conditional logic. You can:

YayExtra provides you with amazing support to run your WooCommerce store. They give you email and live chat support quickly before and after the sale of the plugin.

Get to Know YayExtra Interface

First, you can download the YayExtra plugin from WordPress.org. You can download the free version of the product-option plugin. The free version comes with limited features but it is a good way to evaluate the plugin before you purchase it.

Once you download the file after you purchase the plugin, go to WordPress admin and go to Plugins > Add New to add the plugin then you can browse the downloaded zip file to activate the plugin. This is a very easy and straightforward process and what you need is the downloaded file only.

Once you install the plugin you can see the user interface under the YayCommerce tab of the left bar.

YayExtra option sets

This is the starting interface for your plugins and you have three tabs named Options Sets, Customize, and Settings.

Options Sets

You can see all the option sets created by you in this grid and they have provided you with row operations like Status, Config, Duplicate, and Delete. Some bulk operations are also available to manage option sets.

Bulk edit the extra product options sets

Customize

Under Customize tab, you have 4 sub-tabs which are General, Swatches, Button, and Custom CSS. These features can be used to arrange and style product option components in your web pages and this will override your general CSS styles.

customize style of extra product option components on website with YayExtra

In the Swatches section, you have several options to style switches you define and you can easily style the swatch component without editing the CSS files of your theme.

customize swatches styles for WooCommerce extra product options

You have another option to style buttons which are used to define the product options. You can see the live preview on the right side of the window.

format button of extra product options

In addition to the above customization features, you can create custom CSS rules under the Custom CSS section. Every developer and designer love this feature because they have the freedom to style product options without any restrictions.

Custom CSS for style of extra product options in WooCommerce

Settings

Some general settings are also there to manage your options properly. Under Settings, you can export and import product options and this feature is very useful when migrating WooCommerce stores.

global settings for WooCommerce extra product option sets YayExtra

How to Add New Product Option

First, you can create the products for your store as normally you do in WooCommerce and then you can add the product options for those products.

For example, if you want to create a shirt with different sizes and colors and you want to wrap the shirt as a gift and the customer should be able to add a message to print on the wrapping package, let’s follow the steps below.

First, you can create the option using the button located at the right top corner of the YayExtra page.

add new option set YayExtra

The General tab is for you to add a name and description of the product option and the Options tab is used to add values for the options.

set up general information of extra product option sets for WooCommerce product

Then you can add options for this option set. In this example, you can create Size and Color options.

WooCommerce product options YayExtra

This interface allows you to duplicate the option values and delete options so that you can manage options easily.

There are several Option types available with this plugin. They are:

Choose WooCommerce extra product option types YayExtra

You can see three different tabs under each option named Option values, Advanced settings, and Conditional logics. This is very useful when you want to customize each product option for your WooCommerce store in the way you want, which you can not do with the default WooCommerce.

customize option sets in YayExtra

Option values

In this interface, you can:

extra product option values yayextra

Here I add 2 option value ‘Small’ and ‘Large’ for the option for Size. For example, if I want to add a 2$ fee when a customer chooses a Large size, I will enable Additional Cost and type ‘2’ in Additional value as a Fixed amount.

add additional cost for the extra product option value YayExtra

Advanced settings

Under Advanced Settings, you can add CSS classes for defined options. This is a very useful feature to match your product option with the existing website design.

advanced settings for WooCommerce extra product options in YayExtra

Conditional logics

This is the place where you define your conditional logic for the option. You can add any number of conditions here and your options will be displayed when these conditions are met.

add conditional logics for extra product options YayExtra

Now you can preview the result to see how all the option and option values work in this option sets by clicking the Preview button on the top right of the screen.

preview extra product options WooCommerce YayExtra

And don’t forget to click Save Changes continuously.

How to Display Product Options in Frontend

You can select the Option Set that you want to add to a project and then click on the Configure Option Set icon of the Option Set grid table.

Config option set YayExtra

Then you go to the Products tab of this page. You can see all the products available in your store. Now you can select the product and click the button Set as Assigned.

assign product with the extra product options

Once you assign the product options to products you can see the following product with options in front of the e-commerce store.

WooCommerce extra product options example

In this example, you can see the additional price for the Large option is $2 as we have set it up.

Conclusion

YayExtra is one of the best alternatives to WooCommerce product add-ons which comes with customizable features that will fit various types of products with various extra product options for WooCommerce without any hassle.

By following the easy steps outlined in this article, you can add these extra product options for WooCommerce in a matter of minutes, giving your customers more choices and helping to increase your sales. So if you’re looking for an effective way to enhance your WooCommerce store, YayExtra is definitely worth considering.

Master Addons Demos

Heading

Animated Headlines
Dual Heading
Gradient Headline

Image

Image Hover Effects
Image Hotspot
Filterable Image Gallery
Image Comparison
Gallery Slider
Advanced Image

Content

Advanced Accordion
Tabs
Toggle Content
Team Member
Team Slider
Infobox
Flipbox
Blog
Timeline
Business Hours
Pricing Table
Restrict Content
Dynamic Table

Special Elements

Call to Action
Tooltip
Progress Bar
Progress Bars
Creative Button
Creative Links
News Ticker
Table of Contents
Current Time
Domain Search
Nav Menu
Search
Blockquote
Counter Up
Countdown Timer

Extensions

Particles
Animated Gradient BG
Reading Progress Bar
Background Slider
Custom CSS
Custom JS
Positioning
Container Extras
Mega Menu
Entrance Animation
Transforms
Rellax
Reveal
Header,Footer,Comment
Display Conditions
Dynamic Tags
Floating Effects
Custom Breakpoints
Post/Page Duplicator
Wrapper Link

Contact Form

Contact Form 7
Ninja Form
WP Forms
Gravity Forms
Caldera Forms
weForms