WISDM Custom Product Boxes

What is a Custom Product Bundle?

A custom product bundle refers to the customized set of products bound together to be sold as a single package.

Custom Product Bundle

Benefits of bundling the products together? ↑ Back to top

  • It helps to sell more, simplify management & boost profits through bundling.
  • Increase average cart value by easily creating custom product bundles on your WooCommerce store.
  • You can take advantage of marketing strategies based on bundles, offering different products at a special price, and increase conversions in your e-commerce store.

User Guide ↑ Back to top

Creating a User Assorted Product Bundle or a Custom Product Box. ↑ Back to top

To create a user assorted bundle, you will have to set the product type as ‘Custom Product Box’. Add product details in the – ‘Custom Box Settings’ – tab.

Custom Product Settings

  • Pricing Type: This field allows you to set a fixed price for the box, or calculate the price dynamically, using one of the below option:
    • Fixed Pricing: Fixed price regardless of add-ons added in the box.
    • This option allows you to set a fixed price for the box. You can set a fixed price for the box as the ‘Regular Price’ of the product.
    • Base Price + Add-on products: Base price of a box + sub-total of add-on products added in the box. This option allows you to set a base price for the product (‘Regular Price’), but calculates the price dynamically by adding on the prices of the products being added.
    • Only Add-on products: Sub-total of add-on products added in the box. This option does not take into account the price of the box, but rather calculates the price by dynamically adding the prices of the products being added.

Box Items

In this field, enter the capacity of the box (the number of items/product pieces which can be added to the box). For example, for an assorted box of chocolates, say a user can add 12 pieces, then set ‘Box Quantity’ to 12

Box Layout Settings

Select Box Layout:
The Admin can select either the Card 4.0 and Modern Layout (Vertical/Horizontal) for the Custom Box and the Product layout to be displayed from the.
Go to Customize -> Custom Product Boxes -> Layout Type-> Select your layout.
This feature is now available in customiser option of Custom Product Boxes.
And the individual product layouts are no more supported.

Allow Partially-Filled Box:

Selecting this option allows the user to add the custom box to the cart without having to fill the box to its capacity.

You can disable this setting if you want the product to be purchased to its full capacity.

Sort Products by Date:

Selecting this option displays the new product at the top in the product grid.

Many times we add a new product to our store and that product doesn’t comes into notice of customers because it is in the end of the product list.

This feature lets you add the newly added product to the top of list so that the new product comes into customers notice.

Enable Gift Box:

Allows Customers to send a gift message along with a gift box.

This feature can be used as an order note or Gift a message to shop owner.

Gift Message Label: The admin can set a message label for the custom box.
This is a label that will be displayed on the product page.
ex: Add Note.

Gift Message Placeholder: The admin can set a placeholder text for the text area for the customer to type the gift message.
ex: Add a gift message here.

Pre-Filled Box:

With this option, the custom box will be pre-filled with one or more products of your choice. You can select the Mandatory checkbox so that the product will be mandatory purchased.

Remove Mandatory Products: Selecting this option enables the users to remove the mandatory products if they are out of stock since the custom box cannot be added to the cart if the products are out of stock.

Add-On Products

Using the product selector field, select the Simple and Variable Products which can be added to the Custom Product Box as an addon. The product selector makes it simple to select the products and add them to the list.

Addon selection section

Addon selection types:

Refer to the above image,

Product Addons:

For setting up the box now you can add simple as well as variable products as addons using the new selection tool.

Simple Product addon steps:

  • In the left search element type and search for the addons you want.
  • You will a list of searched addons below click on the addons name and they will get moved to the right selected list. Clicking on the addons name in the right list you will remove the addons from the selected list.
  • You can view the list of all the selected addons in the “Addon’s list” tab beside the Add/Remove tab.
  • If you want to add some more addons you need to visit the Add/Remove tab and add the addons as per step one.
  • Save and update the box.
Addons list tab

Variable Product addon steps:

  • In the left search element type and search for the addons you want.
  • You will a list of searched addons below click on the addons name and they will get moved to the right selected list. Clicking on the addons name in the right list you will remove the addons from the selected list.
  • You can view the list of all the selected add-ons in the “Addon’s list” tab beside the Add/Remove tab.
  • To select specific variation you can visit the Addon’s list tab and find the list of variable product below simple products list.
  • In the variable product list, you’ll find a checkbox to enable that check box to select specific variations to the box else all the variations of all the selected variable products will be added as addon to the box.
  • For selecting specific variations click on the variable product name and that will expand with the list of variations under it.
  • Select the variations you want to add as addon.
  • Save and update the box.
Including the Specific variations

Category Addons:

Now we can also add categories as addons. The products under the selected categories will be added as addons to the box.

To select categories for addons you can visit the category tab and type your category in the search field. You will get the list of categories below the search field.

Select the categories you need to set up the box with.

The selected categories will be listed above the search field.

Category selection section

Custom Product Boxes Administrator Settings ↑ Back to top

In the dashboard go to CPB Settings and you will see the options to change the text of Grand Total, Additional Box charges, Box Total.

You also have the option to hide/display fields like Additional Box charges, Box Total, Stock Messages.

Setting Subscriptions for Custom Box Products: ↑ Back to top

After selecting the product type as ‘Custom Product Boxes’ you will see the ‘Enable Subscription’ checkbox. Selecting this checkbox will show you the subscription settings for the custom product box.

You will see the corresponding subscription price set at the frontend.

Features ↑ Back to top

Fixed Pricing : ↑ Back to top

  • Specify a fixed price for the entire bundle.
  • The bundle will be sold for the specified price independent of the prices of the products in the bundle.
Fixed Pricing

Dynamic/Variable Pricing : ↑ Back to top

  • The bundle will be priced dynamically according to the products selected by the user.
  • Refer to the following image to know more
Dynamic Pricing

Works with Variable Products ↑ Back to top

Choose from simple or variations of a variable WooCommerce product as add-ons for your dynamic bundles

  • You can add a main variable product to the Add-On Product list, the list includes all of its variations.
  • You can select or de-select its variations from the section added as shown in the following image.

Create pre-filled Bundles ↑ Back to top

Simplify the buying process for your customers by creating pre-filled or pre-assorted product bundles

  • You can create a fully pre-filled product bundle or a partially pre-filled product bundle.

Select from different Product Layouts ↑ Back to top

For CPB Product type we have 2 layouts designed.

  • Card Layouts
  • Modern Layouts

Choose the orientation of the Product Box– Horizontal or Vertical that best suits your WooCommerce store’s layout.

Support for Partially-filled Bundles ↑ Back to top

Allow customers to check-out partially filled custom boxes to put customers in control and in turn maximize your sales.

Gift Message ↑ Back to top

Convert the product bundle into a gift box! Allow customers to send a custom ‘Gift Message’ for their loved ones

Sort Products by Date ↑ Back to top

For a long list of add-on products, allow customers to sort and view the most recent products at the top of the product grid

Placeholder Image for empty add-on boxes. ↑ Back to top

Supports: Only Modern Layout

Example of empty addon boxes
Example of empty addons placeholder image
Example of the empty addons placeholder image

Did you wonder about having a default image for all the empty add-on boxes?

Your wait is now over, from version 4.1.0 of the plugin we have introduced a setting for the same reason.
This setting will allow you to add a placeholder image for the empty add-ons boxes.

You can set the placeholder image on 2 levels:

  • Global level.
  • Product level.

 

Global level placeholder image

A global level placeholder image will be applied to all the box products throughout the site.

ex:
Global placeholder image can be used by a shop owner selling Juice or wines bottles.
Where he can set a global placeholder image of a bottle.

How to set a global placeholder image:

Go to Custom Product Boxes settings page > Global Add-on Placeholder Image (Only Modern Layout)
Here, click on the upload button and select from your media files or upload an image as a placeholder image and then save changes.

Global placeholder image settings

Here’s how the placeholder image looks on the box product page.

Box with global placeholder image

Product level placeholder image

Product-specific will be applied only to that specific box product.

ex:
Product-specific can be used by a sweet shop owner having different boxes like Box of cookies and Box of Donuts.
So for Box of cookies, he can select the image of a cookie 🍪 as a placeholder.
And for Box of Donuts, he can select the image of a donut 🍩 as a placeholder.

How to set a product-specific placeholder image:

While editing the box product,
go to Custom Products Settings accordion tab > Custom Add-on Placeholder Image (Only Modern Layout)

Here, click on the upload button and select from your media files or upload an image as a placeholder image and then publish/update the product.

Product level placeholder image setting

Here’s how it looks on the Donuts box page.

Generate recurring revenue with subscription boxes ↑ Back to top

Sell more with setting up monthly or yearly subscriptions on custom product bundles and genereat recurring revenue on every renewal.

Customize Box Layouts that match with your store theme ↑ Back to top

You can now adjust layout design from the customise option on the product page and take an overview of the changes made side by side.

Frontend Box customizer option

Maintain your brand identity with the flexibility to set layouts, colours, and style of bundles on your store.

Once you create and publish a ‘Custom Product Bundle’ product, it will be added as usual to the WooCommerce shop page. When a user selects the product, he will be shown a grid layout which represents the box and a product’s layout which contains the add-on products (which can be added to the box).

How to Customize Box Layouts ↑ Back to top

You need to select a layout for your box from the customise option

Visit Product Page > Customise > Custom Product Boxes > Layout Type > Card (4.0) – Vertical
Select your desired layout under the section Layout Type.

From the Custom Product Boxes customizer option you can customize the following things:

Card Layout Settings

customize -> Custom Product Boxes -> Layout 4.0 settings
Empty Box Height

The height of the outer box of the empty card items.

Empty Box Background Colour

The colour for the outer box of the empty card items.

Empty Box Item Background Colour

The background of the empty card item itself.

Empty Box Position

Position of the empty box. Where it should be placed to the left of the product selection list or to the right.

Add-ons Product Box Height

The height of the outer box of the add-ons item list.

Add-ons Products Box Background Colour

The colour for the outer box of the add-ons items list.

Box-Item Width

For the width of single card item.

Progress Bar Colour

Colour of the progress bar filling on the top of the add-ons item listing.

Hide Expand Button

To hide the expand button in the empty items list. (Displayed on hover of the box)

Add-on product title colour

Colour of the addon’s title.

Stock status colour

Colour of the addons stock message.

Add-on product price colour

Colour of addons price text.

Legacy Layout settings (Will be discontinued soon)

customize -> Custom Product Boxes -> Legacy Layout settings
Columns in Gift Box

The number of items in a row for Gift Box (Empty Add-on Boxes).

Columns in Product Layout

The number of items in a row for the Add-ons list (Add-on Boxes).

Background colour for the Gift box (Horizontal Layout)

The colour for the outer box of the empty items boxes.

Colour for Gift boxes

The background of the empty item itself.

Items per row in Gift Box (Horizontal Layout)

For Horizontal Layout, the number of items in a row for Gift Box (Empty Add-on Boxes).

Items per row in Product Layout (Horizontal Layout)

For Horizontal Layout, the number of items in a row for the Add-ons list (Add-on Boxes).

Allow Scroll Lock

Enables the scroll of the gift box. While the user scrolls through the addons list the selected items list will scroll with the list.

Note: We will be discontinuing the legacy layouts in future release. Recommended to use 4.0 layouts only. Legacy layouts are available for backward compatibility.

Shortcode: CPB Product Layout ↑ Back to top

Using a page builder to set up a product page? CPB product layout is not displayed as expected?
We have come up with a solution for this by adding a shortcode for the CPB product layout.

This shortcode can be used for setting up a custom page that includes CPB product as a part of that page.

Add the following shortcode to your page template or a custom page:

[cpb_product_layout] Only works on the product page itself.
[cpb_product_layout product_id="enter_box_product_ID_here"] For custom page and product page also.

product_id attribute Product id of the product (required for the product page itself).

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top