How to sell business cards with WooCommerce

Looking for a way to sell business cards? You can easily create a customizable business card product in WooCommerce.

Creating a business card product in WooCommerce is a great way to let your customers design their own business cards and place bulk orders. However, if you’re only working with default WooCommerce, you’re limited to the default product customization options that come with it out-of-the-box.

In this article, we’ll show you how you can start selling business cards with WooCommerce using a product customizer plugin.

Let’s put everything into context before we begin.

Different types of business card products in WooCommerce

Before we jump into creating a business card product in WooCommerce, it’s important to take a step back and understand what it is and what it will look like.

Usually, business card products come in 2 forms:

1. “Design your own” business cards. This is a product which allows the customer to upload their own design. You are responsible for printing that design on the business cards. All relevant information (name, email, etc.) will be embedded in the customer’s design.
2. “Ready to go” business cards. This is a product allowing the customer to pick a pre-designed business card. You are responsible for collecting the information that should be embedded in the design.

Both types require you to add different input fields to your WooCommerce product.

Design-your-own business cards

This type of business card is the easiest to build in WooCommerce since your customer will do most of the work (as they have to design their own card). You only need to offer a way for them to upload their final design. Additionally, you can offer instructions to help customers create the correct file. Here are some of the form fields you’ll need to add to your WooCommerce product:

• Size. Business cards often have various sizes. The standard size for a business card is 85 x 55 mm, but you can offer a square or more narrow style too.
• Material. Business cards also come in different materials. You can often choose between standard paper, premium paper, or recycled paper. These materials offer different finishes too (most commonly matte and gloss) and will often influence the final product price.
• Upload your design. Users can upload their own designs, for the front and back of the business card.

Expresta uses a file upload field where customers can upload PDF, JPG, PNG, or Adobe files:

Ready-to-go business cards

This type of product lets customers select a design for their card (out of a list of predefined designs) and enter the details that should be printed on the cards.

Making such a product is also quite easy in WooCommerce, but it requires a bit more work from you to set it up. Here are some of the form fields you’ll need to add to your WooCommerce product:

• Business card design. One of the most important parts of any customizable business card is the unique business card design each customer decides to go with. You can let customers select a pre-made design for their business card using a checkbox image selector field.
• Logo. Since business cards typically have a logo that represents the business printed on them, you will need to offer customers the option to upload their own logo file. For this, you can add an upload field to your business card product in WooCommerce.
• Name & details. One of the more obvious ones, a business card requires a name and details to be printed on it. For this, you can simply add a text field that lets customers enter their first and last names. Optionally, you can also create a field for the middle initial and limit it to one letter only.
• URL & socials. These days, business cards include a URL to the business’s website. You can use a text field to let customers enter their business website’s URL. Some people also want to display their business’s (or personal) social media handles (Facebook, Twitter, and Instagram) on their business cards.

To top it off, you can show live previews of the data on the business card design. This gives your customers a good impression of what the final printed product will look like.

Namecheap offers a beautiful business card maker with live preview:

Quantity discounts

All business card products, regardless of the type, have one thing in common: bulk discounts. Customers can select their desired quantity and receive a discount for choosing higher quantities. This is often referred to as “bulk quantity discounts”, “tiered pricing” or “quantity brackets”. You can also create something similar with WooCommerce!

With a better understanding of what a business card product in WooCommerce is supposed to look like, we can move on to how you can create them in your store.

How to sell business cards using WooCommerce

As you may already know, WooCommerce only offers limited options that allow users to customize products. They have variable products with which customers can only select options from a dropdown list. Unfortunately, those features are insufficient for business card products. Users would need to be able to upload files, enter free text, and select various options that influence the final product price.

This is why you need to use a product customization plugin to do this.

We recommend using our all-in-one but lightweight Advanced Product Fields for WooCommerce plugin to add customization fields to your WooCommerce business card product.

The power of Advanced Product Fields for WooCommerce

The Advanced Product Fields for WooCommerce plugin lets you add extra options to your products. You can choose from over 16 different additional fields, including text boxes, number fields, dropdown lists, checkboxes, radio buttons, and file upload fields. This allows you to create and offer a fully customizable product in WooCommerce.

This is perfect for creating a product that lets customers select a design and upload their details. Customers can do that by using the additional product options that were created using the plugin and that would otherwise not be available with default WooCommerce.

The Advanced Product Fields for WooCommerce plugin also offers advanced conditional logic. This way, you can create an interactive shopping experience by displaying or hiding additional fields of any product based on other fields’ values. For example, you can display a text input field only when the customer selects a checkbox field or display a date selector only when the customer selects the “Do you want to get this delivered on a specific date?” checkbox.

In addition to all of these great features, the Advanced Product Fields for WooCommerce plugin also lets you use formula-based pricing for calculating the final price of the product after customers are done selecting additional options. This way, you can either charge an additional flat fee, a quantity-based fee, or a percentage-based fee to calculate the total price of your customizable business card in WooCommerce.

In this tutorial, we’ll go over the details to create a customizable business card for your online store using the robust plugin.

How to create a business card product in WooCommerce

In this tutorial, we’ll make a “design-your-own” business card product in WooCommerce. We’ll offer the customer a way to upload their own design. Note that Advanced Product Fields is also perfectly capable of creating “ready-to-go” business cards. Here’s a demo of what we’ll create:

Step 1: install the Advanced Product Fields for WooCommerce plugin

For starters, get the Advanced Product Fields for WooCommerce (APF) plugin and install it on your WooCommerce site. This is essential for creating a customizable business cards product that lets customers select additional product options before placing a bulk order.

Once the plugin is installed on your WooCommerce site, navigate to WooCommerce → Settings → Product fields to activate the license key given to you at the time of purchase.

Once you paste your license key, click on the Activate button and the Save changes button to continue.

Step 2: create a business cards product

With the APF plugin installed on your WooCommerce site, you can start creating a business card product. To do this, navigate to Products → Add New from the WordPress admin panel to create a new product.

• Enter the basic details: give your product a name and set the main product image.
• On the General tab of the Product data section, set the price to 0. This is because the APF plugin installed in step 1 will calculate the final product price for us. The final price depends on what quantities and other options your customer selects.
• Change the Price display setting to Replace with text.
• Write an alternative text for the price in the Price label setting. If we don’t add a label, WooCommerce will show “$0” as the product price in the shop page. We don’t want that because our product is not free. To fix this, we can write our own label. Usually, you’d enter the price of the cheapest package of your business card. We chose the label “starting from $15”, which is the price for the lowest quantity with the lowest quality of paper.

Step 3: add your first customization options (input field) to your product

First, we want to create the “Shape” option for our business cards. It allows users to choose what shape they want their business cards in: rectangle, square, or semi-circle.

Navigate to the Custom fields tab. This is where you create all additional input fields that will appear on the product page. Click Add your first field. The field appears with a bunch of extra settings:

• Set the Type to Image swatches. This field type allows us to create clickable image buttons. It makes it visually more appealing to the user than plain checkboxes.
• As Label, set “Shape”. The label appears above the input field to give it extra context.
• Set the field as required.
• In the Options section, click Add option to add 3 images. Set their option label. You can pre-select the first option by turning on the Selected checkbox.

Publish or update your WooCommerce product. It should look something like this on your website:

There’s not much to see yet, but it’s a great start! Let’s continue.

Step 4: add the other customization options

Our business card needs more customization options. A customer can select which paper type they want, select the size, and upload a custom design (front or back). You can also add an up-sell for rush orders to offer faster print & delivery times. Lastly, the user should be able to select how many cards they need.

Let’s add those options now!

Create your first select list

Edit your product and go back to the Custom fields tab. Click Add a field every time you want to make a new field.

• Set the Type to Select list. This renders a typical dropdown list.
• Set the Label to “Materials”.
• Set the Field as required.
• In the Options section, add your paper options. We chose Coated paper, Recycled paper, and Kraft (cardboard) paper.
• Mark one of the options as Selected so that it’s pre-selected when someone visits your product page.

Repeat this process for the Size select list. After that, repeat the process again for the Print sides select list. This is where the user chooses if they want to upload a design for one side (the front) or both sides (the front & back).

Adding file upload options to your WooCommerce product

Next, we need to create a file upload field so the customer can upload their design. Click Add a field again and set the field’s Type to File Upload:

• Set the Label to “Design (front)”.
• Add Instructions to explain what file types can be uploaded and what the maximum allowed file size is.
• Enable Required so the customer has to upload a file before adding the product to cart.
• Set Accepted file types to the most common file types for uploading designs: JPG, PNG, and PDF.
• Set the Maximum file size to prevent users from uploading extra large files.

You’ve now created your first file upload field, allowing customers to upload their front-facing design. Next, let’s add another file upload field that only shows when the user has selected “Front & Back” as their preferred printing mode.

Duplicate your file upload field. You can do that by clicking the button as shown below:

• In your duplicated field, change the label to “Design (back)”.
• In the Conditionals section, click Add new rule group. Here, you can define when this field should be shown. Set it to Show only when the field “Print Sides” is set to “Front and back”.

Add the printing time & quantity options

Similar to the previous fields, add 2 more select lists: Printing Time and Quantity. The printing time list acts as an up-sell with options to speed up printing & delivery for an additional fee. In the quantity select list, users can select how many units they want, all the way from 25 to 5,000.

If all went well, you’ve created these fields:

Step 5: configure the final product price

In our example, the final price of the business cards depend on 3 things:

1. What type of material (paper) is chosen?
2. Has the user chosen a faster printing & delivery time (express printing)?
3. Which quantity does the customer want?

The points above all influence the final product price in different ways. The price per card goes up when a customer selects higher-quality paper. On the other hand, we also want to offer bulk discounts to customers ordering a larger quantity. Because there are multiple factors at play, this results in a more complex pricing structure. Luckily, the Advanced Product Fields (APF) plugin has you covered!

We can solve this with APF’s variable features. A variable is a number that can change based on the values of other product options. We can then use that variable in our pricing. Let’s look at a simple example:

Using a variable

Our pricing will be based on a unit price per card. Let’s say we start of with a unit price of $0.5 per card. If higher-quality paper is selected, we want to increase that unit price to $0.6 (so we add $0.1) because it’s more expensive to print. To do this, we can create a variable that increases by 0.1 when higher-quality paper is selected. Let’s build it now!

Find the Custom variables section and click Add new variable:

• Give your variable a name. We chose “paper_type” as our name. You’ll need the name in your formula-based pricing later.
• Set the Standard value to zero. This means the variable does nothing by default.
• In the Value changes section, we can set when this variable should change. Click Add new rule and change the rule’s settings:
  • When the customer selected Coated Paper as their preferred Material, the variable will be 0.025 because we want to increase our card’s unit price with $0.025 for this type of paper.
  • When the customer selected Kraft Paper as their preferred Material, the price per card increases with $0.03.

Rushed delivery flat fee

We also want to increase the final product price when the customer chooses a faster delivery time. We don’t need to create a variable for this as choosing this option does not increase the card’s unit price. Instead, it will just add a flat fee to the final product’s price for rushed delivery.

Find the Printing Time field and edit the settings in the Options section:

• Set Adjust pricing to Flat fee.
• Set the correct price increase. We chose to add a flat fee of $25 for orders that need to go out in 3-4 days and $45 for orders that need to go out in 1-2 days.
• The default option (in our case “5-7 days”) should not increase the final product price.

Bulk quantity discounts

The final piece of the pricing puzzle is to add quantity-based discounts. It’s simpler than it sounds: the unit price (price per card) simply decreases when the customer selects a higher quantity.

Find the Quantity field and edit the settings in the Options section:

• Set the Adjust pricing setting to Formula based pricing. We’ll write a simple formula to change the product’s price.
• In the Pricing amount setting of the first row, add the following formula: ( 0.6 + [var_paper_type]) * 25. It may look daunting, but it’s a simple formula:
  • 0.6 is the unit price corresponding to the quantity.
  • [var_paper_type] points to the variable we created earlier. It increases the price based on the selected quality of paper.
  • 25 is the chosen quantity.
• Add the same formula to all other entries, but update your unit price (0.6 in our first example) to match the decreased unit price for the higher quantity.

Bonus step: change the product image when options are selected

We’ve got quite a powerful set-up already, but we can go a little further. Wouldn’t it be great if the main product image changed depending on which options the user selects? This would increase the user experience as it helps them visualize what the final product would look like in the end.

See the example below. The first image shows a rectangular business card on coated paper. If the user selects a square card with kraft paper, the image automatically changes to display the final product:

To create something similar, find the Layout section and enable the Change product image setting. Next, click the Add new button to add a rule for changing the main image.

Each rule has a combination of field values. When that combination is selected by the user, the main product image will change to the image you selected:

You can add as many rules as you like. There’s no maximum!

Advanced file upload features

Our business card product requires the customer to upload an image file as their design. Advanced Product Fields allows you to do a lot more advanced things with image uploads than we’re covering in this tutorial. If you’d like to find out what other great features there are in store for image uploads, read it here: studiowombat.com/image-uploads.

Conclusion

Creating a customizable product with additional fields works great if you’re looking to sell business cards on your online store. This is mainly because you can let your customers set all extra options, such as the business card design, logo, name, email address, and contact number.

However, you’re very limited with the default WooCommerce product options. That is why we recommend using the all-in-one product customizer plugin: Advanced Product Fields for WooCommerce.

It packs everything you need to create advanced, responsive additional fields and add them to any customizable product on your online store. The best part is that the plugin is very intuitive to first set up and use on your WooCommerce site, even if you’re not very tech savvy.

Ready to start selling business cards on your WooCommerce site? Get Advanced Product Fields for WooCommerce today!