How to create custom signs and banners in WooCommerce

Custom signs and banners are more complex than a standard “buy now” WooCommerce product. Customers need to specify size, material and artwork, and you also need to dynamically calculate pricing based on the options they select.

WooCommerce Product Add-Ons Ultimate solves this. It turns your product page into a live product builder, where customers configure their sign and can see the price update as they go.

In this tutorial, we’ll look at how to create a custom sign product using a live product builder. Users customize their design and requirements directly on the product page, and see the price update as they go.

We’ll cover how to:

• Let buyers select their dimensions, layers, shapes, and materials
• Create dynamic pricing to calculate totals based on what the user enters for size, quantity, custom text length, etc
• Accept file uploads so that clients can upload print-ready vector files or artwork

We’ll also look at a couple of real-world examples of custom sign builders using Add-Ons Ultimate.

Why let customers personalize their signs online?

Custom sign orders are usually handled over the phone or by email. That usually means multiple phone calls or messages and manual quotes – which can delay orders.

A live product builder makes all that much quicker and easier. Customers configure their own sign and see the price update instantly, so they can buy the moment they’re ready.

It also cuts your admin time. Every option and price rule is built into the product page, so there’s no manual quoting for standard orders, and fewer errors from mistyped specs in an email thread.

The customer will see the options they’ve selected in the cart and checkout before they confirm the order, and you’ll receive those options as part of the order. They’ll also be included in customer and admin email confirmations.

How to sell custom signs in WooCommerce

Here’s each step in more detail.

How do you create custom signs and banners in WooCommerce?

We’ll look at making a custom vinyl banner in this tutorial. And the methods that we use should cover pretty well all your custom signage product requirements.

Other typical applications include:

• Vinyl or fabric banners – e.g. for trade show booths, grand openings, outdoor events
• Aluminum signs – e.g. for real estate yard signs, business premises signage
• Feather flags – e.g. for car dealerships, outdoor sales and promotions
• Vinyl lettering – e.g. for storefront windows, office glass doors
• Foam boards – e.g. for trade show displays, real estate presentation boards
• Retractable or pole banners – e.g. for conference booths, in-store promotions
• Window decals or frosted lettering – e.g. for office privacy film, retail branding
• Custom flags – e.g. for sports clubs, event branding
• Vehicle or boat lettering and decals – e.g. for fleet branding, boat names and registrations
• Pop up displays – e.g. for trade shows and exhibitions

In fact, just about any application you can think of.

All aspects of the product will be customizable by your clients to whatever parameters you set. So if you only offer certain materials or set sizes, you can specify these.

Real-world examples

Let’s have a look at some real-world examples of sign and banner shops using Product Add-Ons Ultimate on their WooCommerce store to allow their customers to configure their products online.

Banneroo – Custom Vinyl Banners and Event Signs

Banneroo make a wide selection of custom banners and signs including military, birthday and graduation banners. They use Product Add-Ons Ultimate to allow their customers to personalize banners direct on their website.

Sailflags -Custom Sail Flags and Feather Flags

Sailflags make promotional flags and banners – for outdoor advertising, forecourt flags and table flags for indoor displays. They also use Product Add-Ons Ultimate to allow their users to customize their signs and banners directly on their product pages.

Now let’s look at how to create a similar product.

Tutorial: How to make a custom banner product in WooCommerce

Let’s look at our example product, a custom vinyl banner. You can see this product in action here.

Custom sign specifications

The customer is going to be able to set a number of different options and we’ll calculate the price based on their selections.

Options will include:

• Size
• Material thickness
• Number of printed sides
• Hem type
• Grommet frequency
• Pole pockets
• Select some accessories

And of course they’ll be able to upload their artwork.

Step #1: Install and activate Add-Ons Ultimate

In order to allow the user to enter all their personalized information for their custom banner, we’ll need to use the WooCommerce Product Add-Ons Ultimate plugin. This allows us to insert add-on fields on WooCommerce products.

Step #2: Create your product

Once you’ve got Add-Ons Ultimate installed, you’ll need to create your custom sign product in WooCommerce.

Step #3: Add your extra fields

Okay, now let’s look at adding extra fields for the user to customize their banner. We’re going to let them enter the width and length of the banner and choose from several other options.

Create a number field

After you’ve added your new product, you can add your first field:

• Go to the Product Data section and click on the Product Add-Ons tab
• Click Add Group and enter a title for your group. In our example, we’ll call the first group ‘Size’
• Click Add Field and enter a title for your first field. In the example, we’ll call our first field ‘Width’
• Choose ‘Number’ for the Field Type. This means that the field will be displayed as a number input on the front end – so users can only enter a number

It’s likely that you can only produce your custom signs within certain size limits. So you can add a minimum and maximum value for the number field – just click on the ‘Number’ tab. In our example, users can only enter a width between 500 and 4000 mm – but you can choose whatever values you like here.

Repeat this step to create a ‘Length’ field.

Create a radio group

In the demo product, there’s also an option for the user to select the thickness of the material used for their banner. Instead of a number field, we’ll use a ‘Radio Group’ so that we can limit the user’s choice to certain options.

The set up is similar:

• Click ‘Add Field’
• Enter the field title, in this case ‘Thickness’
• Choose ‘Radio Group’ as the field type
• Click on the ‘Options’ tab then click ‘Add Option’ and type in your first option
• Repeat for each option

You can also see that a value can be entered in the ‘Price’ column for each option. Usually, this would just add that value to the overall product price when the user selects that option.

But in this case we’re going to use these values as factors when we come to calculate the product price. We’ll look at that later.

Setting required fields and defaults

Notice that in all the fields we’ve created so far, the setting for ‘Required Field’ has been checked. This is to ensure that the user enters a value in these fields – otherwise they can’t add the product to their cart.

You can also enter a value in the ‘Default’ field. This will ensure that this value will be the default when the user first accesses the product page.

Step #4: Uploading artwork

It’s likely that you’ll want to allow your users to upload their own artwork. Let’s create a new group for fields specifically relating to artwork:

• Click ‘Add Group’ to create the new group
• Call it ‘Print’ or ‘Artwork’ or similar
• If you want to allow different print options, create a new radio group field. In the demo, we’ve got a radio group that allows users to select one or two sided printing. This is called ‘Printed Sides’

• Create one or more fields with the ‘Upload’ field type

Creating conditional fields

In our demo product, we’re allowing the user to choose between one or two sided printing. If they choose two-sided printing, then they will see an additional upload field for artwork for the back of the banner.

To create a conditional field:

• Create a new ‘Upload’ field, just as you did above
• Select the ‘Conditions’ tab and click ‘Add Condition’
• Choose to ‘Show this field if’ and ‘All rules match’
• Then select the radio button group you created above
• Choose ‘Is’ and select ‘Two Side’

This means that this field will only be displayed if the user selects ‘Two Side’ in the ‘Printed Sides’ field.

Repeat for the remaining fields

You can now add any further fields that you like. In our demo product, we created radio group fields for ‘Hem’, ‘Grommets’, and ‘Pole Pockets’.

Adding upsells to your custom banner product

One surefire way to increase the value of your sales is to offer the user additional products to buy. In our demo, we’re going to offer the user the chance to buy some ropes or bungees.

Add accessories as products

We’re going to offer other products as accessories. To do this:

• Create products for the accessories in the same way that you would create any other product
• In the custom banner product, add a new field. This will have the field type ‘Products’
• On the ‘Products’ tab, in the ‘Child Products’ field, choose the products that you’re offering as accessories

Note that we set ‘Products Layout’ to ‘Checkboxes’. This means that the user can select multiple options from this field.

We also set ‘Products Quantities’ to ‘Independent’. This means that the user can enter the quantity for each accessory product.

Calculating dynamic product prices for custom banners

Custom signs and banners are usually priced based on multiple factors. It’s not necessarily a fixed price.

In our demo product, the price is calculated by multiplying the width and length to work out the area. This is then divided by a factor to create a cost per square meter / foot.

We then multiply the square meter cost by factors based on the choices the user made in the radio group fields. So if they chose the ’10mm’ option in the ‘Thickness’ radio group that we created above, the price will be multiplied by a factor of 1.2.

Note that this calculation is purely for demonstration purposes. You can apply any calculation and pricing model that you need.

Creating a calculation field

To create your calculation field to work out the product price:

• Click ‘Add Field’ to create a new field
• Choose ‘Calculation’ as the field type
• Click on the ‘Calculation’ tab and enter your formula

The formula in the demo product:

( ( ( {field_1825} * {field_1826} ) / 35000 ) * {field_1827_option_price} * {field_1829_option_price} * {field_1833_option_price} * {field_1833_option_price} * {field_1834_option_price} * {field_1835_option_price} ) + {field_1837_field_price}

Breakdown:

• The calculation field uses tags, e.g. {field_1825}
• A tag like {field_1825} just gets the value from the field with the ID 1825. In this case, that’s the width field
• So the section ( ( {field_1825} * {field_1826} ) / 35000 ) is where the area is calculated then divided by a factor for cost per square meter
• A tag like {field_1834_option_price} gets the value of an option from a radio group or select field. In this case it’s the value of the option chosen in the ‘Thickness’ field
• Finally, a tag like {field_1837_field_price} gets the price of a field. Here, it’s getting the price of any accessories that have been chosen

Watch how the price at the bottom of the demo product page changes as you update different fields.

Finally, set a couple of parameters in the calculation field:

• Check the ‘Hide Calculation’ field. This will hide the field on the front end
• Set the ‘Action’ field to ‘Set Product Price’. This will override any other prices on the page and set the product price with the result of the calculation

Live text preview

If your signs include personalized text, Text Preview lets customers see their text rendered live on the product image as they type it, before they buy. Customers pick from hundreds of Google Fonts, or you can upload your own custom fonts, and you can charge based on character count if you want to price by text length.

Find out more about the Text Preview extension for Product Add-Ons Ultimate.

Recap – creating a custom sign and banner in WooCommerce

So that’s how to create a custom sign in WooCommerce. In this article, we looked at:

• How to make a custom vinyl banner
• Allowing users to personalize the product by selecting size, material and other options
• Adding upload fields for users to add their artwork direct to the product page
• Providing upsell products to the user
• Calculating the final product price using a formula based on the user’s selections

All you need is the WooCommerce Product Add-Ons Ultimate plugin.

Product Add-Ons Ultimate works with all major themes and page builders, comes with a 14-day money-back guarantee, and is backed by world-class support.