New Woo brand announcement v2 | Feb 4, 2025

Added by Mahrie - https://woomarketingstudio.wordpress.com/2024/12/20/studio-request-logo-rollout-customer-comms/

Snippets

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 top

Make optional bundled items checked/selected by default

↑ Back to top

By default, optional bundled item checkboxes are unticked by default. This can be changed with the following snippet:

View on Github

Show an “optional” suffix in optional bundled item titles

↑ Back to top

To add an “- optional” suffix next to the title of bundled items that have been marked as optional, use the following snippet/plugin:

View on Github

Calculate discounted bundled item prices over regular prices

↑ Back to top

By 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:

View on Github

Prevent product bundles price strings from showing up in range-format

↑ Back to top

Ensure that you are using the latest version of Product Bundles, then use the following snippet/plugin:

View on Github

Change the number of bundled product columns displayed when the Grid Layout option is active

↑ Back to top

The following snippet demonstrates how to adjust the number of bundled item columns to 4:

View on Github

Change the appearance of item subtotals in the cart/orders

↑ Back to top

When 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:

View on Github

Hide the remaining stock of the parent item

↑ Back to top

By 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:

View on Github

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:

View on Github

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:

View on Github

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:

View on Github

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:

View on Github

Display bundles in a grid layout on mobile screens

↑ Back to top

By 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 top
add_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 top

To 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 top

Bundled 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 top

To 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 top

Have 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!