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
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 settingsEmpty 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 settingsColumns 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.