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.

• Print on demand
• Engraving product
• Custom Canvas printing
• Gift items
• Personalized products
• Memberships
• Subscriptions
• Booking

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

• Create groups of product options
• Add advanced product fields like image swatches, CSS styles, file upload, delivery date
• Easily customize fields to match your website design so you can style your custom fields with CSS and HTML
• Assign product options to product pages in bulk
• Display product options conditionally. This is a very interesting feature of YayExtra. You can display certain options when a certain condition is met. This feature is very useful when you want to add custom prices based on the conditions.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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:

• Text
• Number
• Checkbox
• Radio Button
• Button
• Multi Selectable Buttons
• Swatches
• Multi Selectable Swatches
• Dropdown List
• Date Picker
• Time Picker
• File Upload

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.

Option values

In this interface, you can:

• Add the option values for that option
• Add additional prices for the product option value (Additional Cost)
• Add some descriptions (Additional Description)
• Link the product options to a page (Linked Product)
• Add stock quantity to manage each product option’s inventory easily (Manage Stock)

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.

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.

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.

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.

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.

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.

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

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.