Cart Add-Ons

For an alternative solution, we suggest Product Recommendations. Use it to increase average order value (AOV) by offering more intelligent upsells, cross-sells, or products frequently bought together. You can even build your own rule-based recommendations and measure their impact with in-depth analytics.

Cart Add-Ons is a tool for driving incremental and impulse purchases once customers are in the shopping cart. It extends the concept of upsells and cross-sells at the product level, and engages your customers at the moment they are most likely to increase spending.

If you’re using the shortcode version of the Cart page, follow these steps to set up your upsells:

1. Go to: WooCommerce > Cart Add-Ons.
2. Enter a Display title. Give the section a name.
3. Enter Maximum products to show – specify the maximum number of upsell products to show in the shopping cart.
4. Select Default Add-Ons – products shown to customers in the cart if more detailed (category or product-specific) recommendations are undefined. Leave blank to show default products.
5. Select Category Matches – click + Add Category to define upsells for that category. Use as few or as many as you wish. Use priority to order recommended products when the shopper’s cart has multiple matches.
6. Select Product Matches – click + Add Product to define upsells for that product. Use as few or as many as you wish. Use priority to order recommended products when the shopper’s cart has multiple matches.
7. Save changes.

If using WooCommerce Blocks Cart block, you can set up your upsells by adding the Cart Add-ons block as follows:

1. Either go to the page that has the Cart block, or create a new page and add the Cart block.
2. Underneath the Cart block, add the Cart Add-ons block

Customizing the Cart Add-ons block

Once you have the block on the page, you can customize it. With the Cart Add-ons block selected, a list of options appears on the right-hand side.

1. Adjust the number of products to display by dragging the slider
2. Edit the default products that are shown to customers in the cart, if more detailed (category or product-specific) recommendations are undefined. Leave blank to display default products.
3. Edit Category Matches – click + Add Category Match to define upsells for that category. Use as few or as many as you wish. Use priority to order recommended products when the shopper’s cart has multiple matches.
4. Edit Product Matches – click + Add Product Match to define upsells for that product. Use as few or as many as you wish. Use priority to order recommended products when the shopper’s cart has multiple matches.
5. Click Update to save changes

Add-ons are added to the cart by default, but there are a couple more options to display cart add-ons;

• Use one of the Widgets by going to Appearance > Widgets in your admin area.
• Use shortcodes on any page or post – including the shopping cart page:

Use your theme’s template:

[display-addons length=5 mode=loop]

Shows the product image along with the product name

[display-addons length=4 mode=images_name]

display product images with name and price

[display-addons length=8 mode=images_name_price]

Display products with an “AJAX” add-to-cart button:

[display-addons add_to_cart=1]

Cart Add-Ons first looks for matches at the product level. If a product in the shopping cart matches a product defined in the admin, those recommendations are shown to the shopper. If no products match, then Cart Add-Ons will look for a match for a category and display recommendations as defined in the admin. If no product or category matches exist, then Cart Add-Ons will display default recommendations for your store.

When multiple products are in the shopper’s cart, Cart Add-Ons looks at priorities defined above – Product, Category, Default. If it finds that there are multiple products or category matches, the selected products or matches are shown according to the priority set in the admin for Product or Category Matches.

Note: We are unable to provide support for customizations under our Support Policy. If you need to customize a snippet or extend its functionality, we recommend working with a Woo Agency Partner or finding a WooCommerce developer on Codeable.

• Use directly in your theme:
  $num = the maximum number of add-ons to display
  $display can be one of the following:  
  • 'loop'
  • 'images'
  • 'images_name'
  • 'images_name_price'
  • 'names'
  • 'names_price'
• Use the following code to show these recommendations anywhere in your theme:

<?php
     if ( function_exists( 'sfn_display_cart_addons' ) ) {
         sfn_display_cart_addons();
     }
?>

The default number of add ons columns is 2. If one would wish to change that number WooCommerce provides a filter that can be used to change the value. This filter ( described below ) can affect other cross sells displays in the site. It is the responsibility of the merchant to verify that the interface in other places that use upsells is acceptable with a different number of columns.

In order to change the number of displayed columns, we can use the woocommerce_cross_sells_columns filter with the following snippet.

function change_addons_columns() {
    return 3;
}
add_filter( 'woocommerce_cross_sells_columns', 'change_addons_columns' );