If you have a WooCommerce store selling stickers or decals, you might want the option to let users upload their own designs. Most probably, you’ll want to allow users to select a size and choose the quantity of stickers as well. The price will be calculated according to a formula based on size and quantity. In this article, I’ll show you how to do this with a WooCommerce product.

WooCommerce stickers product

Our finished WooCommerce stickers product will look something like this:

WooCommerce stickers product

You can view a fully working demo product here.

WooCommerce product add-ons plugin

To be able to create the size, quantity and upload fields, we’ll need the WooCommerce Product Add-Ons Ultimate plugin.

Product Add-Ons plugin

Product Add-Ons Ultimate allows you to add different fields to WooCommerce so that the user can customise your products.

Step One: create a new WooCommerce product

After installing and activating Add-Ons Ultimate, the first step is to add a new WooCommerce product. Give it a title and set the product price to 0. We’re going to calculate the price dynamically based on the size and quantity selected by the customer.

But because we don’t want the customer to get the idea that this is a free product, we’ll hide the price label. Add-Ons Ultimate gives us the option to either change the product price label or hide it altogether:

Instead, Add-Ons Ultimate will display the calculated price just above the ‘Add to Cart’ button.

WooCommerce calculated product price

Step Two: create your product add-on fields for size and quantity

Now we need to insert our add-on fields into our WooCommerce stickers product. There is comprehensive guidance on adding fields in this support document but, in essence, all you need to do is:

  1. Click the ‘Product Add-Ons’ tab in the ‘Product Data’ section
  2. Click ‘Add Group’ then ‘Add Field’
  3. Give your first field a title in the ‘Field Label’ field (e.g. ‘Select a size’), then choose ‘Radio Group’ as the ‘Field Type’
  4. Enter the sizes as options by clicking the ‘Add Option’ button
WooCommerce stickers product 'select a size' field

Note that I’ve also entered a price against each option. We’ll use this price in the product price calculation field later.

Repeat this step for the product quantities field:

WooCommerce stickers product 'select a quantity' field

Again, note that I’ve put a price against each quantity.

Step Three: create a field for customers to upload artwork

Next, we’ll need to add a field for customers to upload their artwork. There’s a detailed article on uploading files to WooCommerce product pages here, but you can also follow the steps below:

  1. Click ‘Add Field’ and choose ‘Upload’ as the ‘Field Type’
  2. Enter a label for the field
  3. Select the ‘Required Field’ checkbox if you want to ensure customers upload a file here

Step Four: create a price calculation field

Finally, we need to create a field that will calculate the price for our WooCommerce stickers product. You’ll need the Pro version of the Add-Ons Ultimate plugin if you want to use a calculation field.

Add the calculation field in the same way as above but choose ‘Calculation’ as the ‘Field Type’.

Let’s look at each of the field settings here:

Formula

This is where you enter the formula used to calculate the product price. There’s a fully detailed support article on calculation field settings here but for the purposes of this demo we’re just multiplying the price of the selected ‘size’ option and the price of the selected ‘quantity’ option. Your price calculation may be more complex than this so it’s worth checking out the support article above for more information.

Hide calculation

I’ve selected the ‘Hide calculation’ checkbox so that the calculation isn’t displayed as a field. We just use the result to update the product price.

Action

Because the calculation result is being used to update the product price, I’ve selected ‘Display as cost’ here.

Step Five: hide the option prices

By default, when you add prices to radio group options, they’ll be displayed along with the option labels. But because we are using the prices as part of a calculation, we don’t want to display them with the option labels.

To hide option prices, we just add this filter to our snippets file:

<?php
add_filter( 'pewc_show_option_prices', '__return_false' );

See this article on how to add snippets to your site.

View the finished product

That’s it – we’ve created our WooCommerce stickers product in only a few short steps. Don’t forget to check out the finished product here.

Similar tutorials

If you would like to look at some further examples of using the calculation field, check out this article on WooCommerce measurement price calculators.

And don’t forget the Product Add-Ons Ultimate plugin:

Product Add-Ons plugin

Popular Posts

Leave a Reply

Your email address will not be published. Required fields are marked *