Home » BLOG » WordPress » How to set up Flower shop with Elementor Pro – Part 4

How to set up Flower shop with Elementor Pro – Part 4

category:  WordPress

Product Add-Ons plugins

Install WPC Composite Products for WooCommerce plugin (Free & Paid version)

To build the product addons, we will need the plugins. We will use the free plugin names “WPC Composite Products for WooCommerce“. Go head install and active the plugin. 

Add Product Add-Ons

After activate the WPC Composite Products plugin, we will create 3 product addons which are:

  • Ribbon 
  • Wrapping paper
  • Gift card

Add New Ribbon

We will add new Ribbon product with 2 color. So the buyers can choose the ribbon color they like. 

  • Add New Product
  • name it as Ribbon
  • Product Data chooses Variable product
  • At Attributes, you will see Custom product attribute as pre-selected. Leave it as it is and clicks on Add button
  • For the new attribute, we will create Color and give two values which are Red and Blue. It requires to use “|” to separate each value. And choose “Used for variations” checkbox.
  • Click “Save attributes
  • Give some product short description if you want to show on the product page.
variable attribute
Add attributes to a product

Next, we will create the variations from the attributes we just create. With variations, we can add image, price, stock control and more for each variation.

  • go to Variations
  • choose “Add variation” and clicks Go button
  • You will see new dropdown list then choose the color you want to set.
  • Then set the all fields you need for that variation. For the image, if you don’t set the image variation, it will use the image from the product image.
set variation product
Add and set variation

At the end, you will have two color as it shows below.

add variations to product

Hide Product Add-Ons from the shop

If you don’t want to sell the individual product add-ons, you can hide them from the shop. To do that, you will set the catalog visibility as Hidden.

hide product from shop displaying
Hide Product Add-Ons from the shop

Add Wrapping Paper and Gift Card

Adding the wrapping paper and gift card are the same way as adding the color variation.

wrapping paper variation
Adding wrapping paper variation
giftcard variation
Adding gift card variation

Add all variable products to the parent product

Now you should have the color, wrapping paper and gift card products already. Next, we will add these products to the parent product which are the bouquet.

  • go to All Products
  • select the product you want to add our product addons.
  • at Product data, choose Composite product
  • Then you will see the new Components tab show up under Advanced tab.
  • At Components tab, add new component 
  • At Component section, we will create three component which are color, flower wrapping paper and gift card.
  • At the pricing, we will choose “Include base price” so our product pricing will calculate from the variable products and regular base price.
product addons 1
Adding product addons to parent product
add 3 variable products
After adding 3 variable products

Once all product add-ons are added then view the product on the front end. You will see something like below. You will see the total price including the base price and variable product price.

single product addons
Parent product and product add-ons

Add a note input field(custom field) on the single product

It would be nice if we provide a note input field on the single product page. So buyers can leave the note for the gift card or anything else for their order.

To do that, we will use another free plugin called “Extra Product Options (Product Addons) for WooCommerce“. This plugin will add the new fields and displaying on the frontend. If you want to add the custom fields for the backend, you will use “Advanced Custom Fields” plugin.

Go ahead, install and activate the Extra Product Options plugin. Once the plugin is activated, follow the steps below.

  • go to Products>Extra Product Option.
  • Add new field and names it as “gift_card_message” and choose textarea as the input type.
  • Display Rules chooses Category and choose the specific category for your parent product. You can add more rules as much as you want.
Add Field Form
add note fields product page
New field displaying on single product page

On the frontend, my single product page will see the new field as shown below.

new custom fields on product page
Displaying new custom fields on the single product page

The custom fields will display on the single product page, cart page, checkout page and order details page. You can control the display of custom fields values via the plugin. It is very useful plugin. More plugin detail.

Summary

In Part 4, we add the product add-ons (product options) to our parent product by using the WPC Composite Products plugin. This way, we allow the buyers build their own product and encourage them to buy more add-ons. Meaning you increase more sales. Plus, we add new custom field on the single product page which allows buyers leaving the note to the shop. You can create a custom field to let the buyers tell you which flowers they don’t want or they allergies to.

In Part 5, we will setup the delivery method as well as the shipping fee. Also, we will setup the shipping tracking number and send it to the buyer via email.