Use these snippets to customize the appearance and functionality of WooCommerce Product Bundles.
To use a snippet, download the linked file and activate it as you would with any other plugin. Alternatively, copy the contained code into your child theme’s functions.php file.
Note: We are unable to provide support for customizations under our Support Policy. If you need to customize a snippet, or extend its functionality, seek assistance from a qualified WordPress/WooCommerce Developer. We highly recommend Codeable, or a Certified WooExpert.
Snippets
↑ Back to topMake optional bundled items checked/selected by default
↑ Back to topBy default, optional bundled item checkboxes are unticked by default. This can be changed with the following snippet:
Show an “optional” suffix in optional bundled item titles
↑ Back to topTo add an “- optional” suffix next to the title of bundled items that have been marked as optional, use the following snippet/plugin:
Calculate discounted bundled item prices over regular prices
↑ Back to topBy default, a bundled item discount can co-exist with a sale price, reducing the final price of a bundled product even further.
Alternatively, you may prefer to ignore sale prices and apply bundled product discounts over the regular prices of bundled products. This is possible with the following snippet:
Prevent product bundles price strings from showing up in range-format
↑ Back to topEnsure that you are using the latest version of Product Bundles, then use the following snippet/plugin:
Change the number of bundled product columns displayed when the Grid Layout option is active
↑ Back to topThe following snippet demonstrates how to adjust the number of bundled item columns to 4:
Change the appearance of item subtotals in the cart/orders
↑ Back to topWhen the Grouped selection is active under Item Grouping, the subtotals of parent/child line items in cart/order templates are added together and the actual subtotal of the parent item is replaced by the aggregated subtotal. Additionally, the subtotals of individually-priced items are indented and displayed with a Subtotal: prefix.
To prevent this, use the following snippet/plugin:
Hide the remaining stock of the parent item
↑ Back to topBy default, the stock of a Product Bundle is calculated based on the remaining stock of the bundled items.
To calculate the stock of the bundle based on the stock of parent item instead, which is defined under Product Data > Inventory, use the following snippet:
Hide the short description that shows up for each Bundle-Sell
To hide the short description that shows up for each Bundle-Sell, use the following snippet:
Set the Bundle Sells layout to Grid
To change the default Bundle-Sells layout and make them show up in a Grid layout, use the following snippet:
Set the Bundle Sells layout to Tabular
To change the default Bundle-Sells layout and make them show up in a Tabular layout, use the following snippet:
Display the bundled products’ full description
By default, bundled items display the short description of the corresponding Simple/Variable products.
To display the full description, use the following snippet:
Display bundles in a grid layout on mobile screens
↑ Back to topBy default, bundled items show up in a list in mobile screens.
However, we understand that in some cases it is preferable to display bundled items on mobile using the same layout as in desktop view. To achieve this, please use the following snippet:
add_filter( 'woocommerce_bundle_front_end_params', 'sw_pb_change_responsive_breakpoint' );
function sw_pb_change_responsive_breakpoint( $frontend_params ) {
$frontend_params[ 'responsive_breakpoint' ] = 0;
return $frontend_params;
}
How to resolve custom theme issues with the Tabular layout in mobile screens
In the past, we have received reports from store owners that the Tabular layout does not work well in mobile screens with their custom theme. One of the most common issues is that a part of the table is cut off or looks like it doesn’t fit entirely in the screen.
To modify the way Tabular layout works in mobile screens so that:
- it looks similar to the ‘Standard’ layout, and;
- better fits small pages;
you can use the following CSS snippet:
@media (max-width: 568px) {
.woocommerce #content div.product .bundle_form div.bundled_product_summary .bundled_product_images, .woocommerce div.product .bundle_form div.bundled_product_summary .bundled_product_images, .woocommerce-page #content div.product .bundle_form div.bundled_product_summary .bundled_product_images, .woocommerce-page div.product .bundle_form div.bundled_product_summary .bundled_product_images {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0; }
.bundle_form div.bundled_product_summary:not(.thumbnail_hidden) .details {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0; }
.bundle_form div.bundled_product_summary .bundled_product_images {
max-width: 50%; }
.bundle_form div.bundled_product_summary .bundled_product_images img {
margin-bottom: 1em; }
.bundle_form table.bundled_products td {
display: block; }
.bundle_form table.bundled_products thead {
display: none; }
.bundle_form table.bundled_products tr td.bundled_item_images_col {
width: 100%;
padding-bottom: 0; }
.bundle_form table.bundled_products tr td.bundled_item_images_col, .bundle_form table.bundled_products tr td.bundled_item_details_col {
padding-bottom: 0; }
.bundle_form table.bundled_products tr td.bundled_item_images_col {
width: 100%; }
.bundle_form table.bundled_products tr td.bundled_item_qty_col {
max-width: 100%;
text-align: left; } }
Hide bundles from Upsells if all bundled products are out of stock
↑ Back to topadd_filter( 'woocommerce_product_is_visible', 'wc_hide_insufficient_stock_bundles_from_upsells', 10, 2 );
function wc_hide_insufficient_stock_bundles_from_upsells( $visible, $product_id ) {
if ( ! $visible ) {
return $visible;
}
$product_type = WC_Data_Store::load( 'product' )->get_product_type( $product_id );
if ( 'bundle' === $product_type ) {
$bundle = wc_get_product( $product_id );
if ( 'yes' === get_option( 'woocommerce_hide_out_of_stock_items' ) && ! $bundle->is_in_stock() ) {
$visible = false;
}
}
return $visible;
}
Hide out of stock items in a bundle
↑ Back to topTo remove optional out of stock bundled items from a bundle, use the following snippet:
add_filter( 'woocommerce_bundled_items', 'sw_remove_out_of_stock_items', 10, 2 );
function sw_remove_out_of_stock_items( $bundled_items, $bundle ) {
foreach ( $bundled_items as $key => $bundled_item ) {
if ( $bundled_item->is_optional() || $bundled_item->get_quantity( 'min' ) == 0 ) {
if ( 'outofstock' === $bundled_item->product->get_stock_status() ) {
unset( $bundled_items[ $key ] );
}
}
}
return $bundled_items;
}
Note: it is not possible to remove mandatory out of stock products as this would trigger an add to cart validation error.
Change the size of bundled item images
When you upload an image to WordPress, it automatically generates four additional image sizes:
- Thumbnail (150px square)
- Medium (up to 300px width and height)
- Large (up to 1024px width and height)
- Full (the original size you uploaded)
WooCommerce adds three more image sizes:
- woocommerce_thumbnail – Used in product grids, such as the shop page. Defaults to 600px width, square-cropped for consistency. The aspect ratio can be customized.
- woocommerce_single – Used on single product pages. Displays the full product image as uploaded, uncropped by default. Defaults to 600px width.
- woocommerce_gallery_thumbnail – Used for gallery navigation below the main product image. Always square-cropped and defaults to 100×100 pixels.
By default, bundled item images use the large image size. To change this, use the following filter:
add_filter( 'bundled_product_large_thumbnail_size', 'sw_wc_pb_change_thumbnail_size', 10, 1 );
function sw_wc_pb_change_thumbnail_size( $thumbnail_size ) {
return 'woocommerce_gallery_thumbnail';
}
How to add a title / heading before bundled items
The following code snippet can be used to add a title before bundled products that are created with the Product bundle product type:
add_action( 'woocommerce_before_bundled_items', 'wc_display_bundled_items_heading' );
function wc_display_bundled_items_heading() {
echo '<h3> Bundled items: </h3>';
}
How to replace “each” with a custom string in bundled items prices
↑ Back to topBundled items that are priced individually and have a max quantity of greater than 1, display an “each” suffix in their price string. To replace this suffix with a custom string, use the following snippet:
add_filter( 'woocommerce_bundled_item_price_html', 'sw_pb_remove_pc', 10, 3 );
function sw_pb_remove_pc( $price_html, $price, $bundled_item ) {
$price_html = str_replace( 'each', 'test', $price_html );
return $price_html;
}
Note; Before using this snippet, replace test
with your desired custom string.
How to use the Product Bundles JavaScript API
To start writing custom code that uses the Product Bundles JavaScript API, you can use the following template:
add_action( 'wp_footer', function() {
?>
<script type="text/javascript">
jQuery( function( $ ) {
$( '.bundle_data' ).on( 'woocommerce-product-bundle-initialized', function( event, bundle ) {
// Write your custom code here.
} );
} );
</script>
<?php
} );
Remove bundled items’ downloadable files
↑ Back to topTo remove downloadable files associated with bundled items, use the following snippet:
add_filter( 'woocommerce_order_get_downloadable_items', 'sw_pb_remove_bundled_items_files', 10, 2 );
function sw_pb_remove_bundled_items_files( $downloads, $order ) {
$downloads = array();
foreach ( $order->get_items() as $item ) {
if ( ! is_object( $item ) ) {
continue;
}
if ( wc_pb_is_bundled_order_item( $item ) ) {
continue;
}
if ( $item->is_type( 'line_item' ) ) {
$item_downloads = $item->get_item_downloads();
$product = $item->get_product();
if ( $product && $item_downloads ) {
foreach ( $item_downloads as $file ) {
$downloads[] = array(
'download_url' => $file['download_url'],
'download_id' => $file['id'],
'product_id' => $product->get_id(),
'product_name' => $product->get_name(),
'product_url' => $product->is_visible() ? $product->get_permalink() : '', // Since 3.3.0.
'download_name' => $file['name'],
'order_id' => $order->get_id(),
'order_key' => $order->get_order_key(),
'downloads_remaining' => $file['downloads_remaining'],
'access_expires' => $file['access_expires'],
'file' => array(
'name' => $file['name'],
'file' => $file['file'],
),
);
}
}
}
}
return $downloads;
}
Questions & Support
↑ Back to topHave a question before you buy? Please fill out this pre-sales form.
Already purchased and need assistance? Get in touch with us via the Help Desk!