If you have a WooCommerce store selling stickers or decals (like Sticker Mule), 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 create a site like Sticker Mule in WordPress.
WooCommerce stickers product
Our finished WooCommerce stickers product will look something like this:
WooCommerce product add-ons plugin
To be able to create the size, quantity and upload fields, you’ll need the WooCommerce Product Add-Ons Ultimate plugin. If you plan to use the calculation feature discussed below, you’ll need the Pro version of the 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.
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:
- Click the ‘Product Add-Ons’ tab in the ‘Product Data’ section
- Click ‘Add Group’ then ‘Add Field’
- Give your first field a title in the ‘Field Label’ field (e.g. ‘Select a size’), then choose ‘Radio Group’ as the ‘Field Type’
- Enter the sizes as options by clicking the ‘Add Option’ button
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:
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:
- Click ‘Add Field’ and choose ‘Upload’ as the ‘Field Type’
- Enter a label for the field
- 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:
This is where you enter the formula used to calculate the product price. There’s a fully detailed article on calculation field and measurements 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.
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.
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:
|add_filter( 'pewc_show_option_prices', '__return_false' );|
See this article on how to add snippets to your site.
Bonus Step: allow the user to enter custom sizes
Maybe we want to let the user enter their own sticker sizes. We can do this using conditional fields.
Let’s go back to the radio group we created for the sticker size and add a new option for ‘Custom’:
Now, let’s add number fields for the custom width and height of the stickers:
You’ll need to create two fields – one for width and one for height.
Then, you add a condition to these number fields so that they will only be displayed if the user has selected ‘Custom’ in the ‘Select a size’ field:
Create conditional calculation fields
If you’re giving users the option of entering custom sizes, you’ll probably need to create a custom calculation for the price. This means that you’ll need to the calculation field you created above if the user chooses a custom size.
To do this, just add a condition to the calculation field that will only display the field if the ‘Select a size’ field is not ‘Custom’.
You then create an alternative calculation field that will set the product price if the user has chosen a custom size.
In this field, the formula is different (taking into account the value of the width and height fields). It also has a condition to ensure that it only display if the user has chosen a custom size.
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.
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 check out this article for a complete guide to setting up a WooCommerce print shop.
And don’t forget the Product Add-Ons Ultimate plugin: