Congratulations!

Congratulations!

You've unlocked the about me and contact me pages!

Trophy Icon

Unlock Additional Pages:

Key Icon 1
Unlock Locked Icon

WooCommerce Plugin: Quick Product Options

Tech Used: PHP, JS, CSS, HTML

There are numerous Woocommerce plugins available to add product options to the product edit page. I’ve used several of them and frustrated with bugs and long support conversations, I felt the need to make my own.

First I made the Product Builder, but it was more limited than it needed to be. This plugin is the overhaul of that base.

Product Builder relied on making custom product types and had a fraction of the functionality.

With Quick Product Options, an ECommerce admin can add options to any product page.

A Product Options tab is added to the Product Data section on a product edit’s page.

 

Once an admin clicks “Add Product Option”, they’ll specify what kind of option it is.

All sorts of things can be done with Quick Product Options, and combining these features in one product page gives shop owners nearly limitless potential to customize their product offerings.

Let’s go over the different features in the section below!

Feature Explanation

Here’s a quick breakdown of many of the features:

  • Option Name = What the option category is called on the frontend, i.e. “Choose a Color”.
  • Choice Name = What the choice is called on the front end, i.e. “Red”.
  • Input Type = How the choice is made- multiple choice, checkbox, dropdown, etc. This can also be toggled to receive text or numbers from the visitor.
  • Order = What visual order the option or choice is listed in.
  • Classes/Tags/Mods = Adds a custom tag to the option. Useful for styling, toggling visibility, or custom modifiers.
  • Prefix/Suffix = Modify how the option is presented, example: “Choose a” + “Color” + “:”
  • Show Input = For some inputs like Checkboxes or Radio Inputs, the selectable circle or square can be hidden or shown.
  • Required = Will prevent adding the product to cart if a selection is not made, and glow red.
  • Description = Add a line of descriptive text next to or under the choice name.
  • Price = How much that choice counts towards the total tally.
  • Shipping = If my shipping plugin Versatile Shipping is installed, this input appears. It allows shop owners to add a custom shipping modifier per selected choice.
  • SKU = Will display the product’s sku on the frontend.
  • Image ID = If the specified id matches an image id in the products photo gallery, selecting the choice will make the gallery show the matching image.
  • Show Tags = If the choice is selected then any option or choice with the show tag in the tag/mod field will appear, otherwise, it will be hidden.
  • Hide Tags = If the choice is selected then any option or choice with the hide tag in the tag/mod field will disappear, otherwise it will be visible.
  • Enable Modifiers = Enables the modifier specified.
  • Modifiers = Modifiers allow the shop owner to adjust the price of a choice if it is enabled. Mods can be added to any choice or option, and then enabled by default or enabled based upon choice selection.

 

A modifier called “vinyl-price” increases the price of any tarp, regardless of size, by 1.3x if the material selected is 18oz Vinyl.

Quick Product Options visible on the product purchase page.