Dynamically setting the shipping box dimensions for live rates

When using live rate shipping for your store, the shipping rate request will utilise a default box dimension along with the total weight and address to determine rates. Currently those default dimensions are a 5“x5”x5“ package for UPS, 5”x5“x0.5” for USPS, and for FedEx it's determined based on the package type selected in your store's shipping settings.

You can use this snippet to provide custom dimensions for shipping rate requests based upon a condition that you set, such as the categories or types of products in the cart.

Note: Foxy currently only allows for a single box configuration per order. This snippet will not allow you to calculate shipping for multiple different boxes. For faking multiple boxes for a shipment, you can review this snippet.

Add the custom javascript

In your store's administration - navigate to the Configuration page, and within the Cart section look for “Add custom header and footer code to your templates”. Enable that option if it isn't already, and place the following code into the “Footer” textbox:

<script>
function getCustomDimensions(params) {
    // Do your custom logic in here
    if (someCondition) {
        return {"length": 18, "width": 16, "height": 10};
    } else {
        return null;
    }
}
FC.client.on("cart-shipping-options-update", function(params) {
    params.address.dimensions = getCustomDimensions(params);
});
FC.client.on("checkout-shipping-options-update", function(params) {
    params.address.dimensions = getCustomDimensions(params);
});
</script>

You'll obviously need to edit the getCustomDimensions() function to correctly set the dimensions based on your conditions such as certain products or categories in the cart.

The getCustomDimensions() function is passed a params variable, which contains two arrays:

  • address: Contains the shipping address that the customer as entered so far
  • fields: Contains the shipping_city, shipping_postal_code, shipping_region and shipping_region_name as entered by the customer to trigger this rate request

The getCustomDimensions() function needs to return an object with three parameters like this: {"length": 18, "width": 16, "height": 10}, the value for each dimension being a number.

If you want to leave the dimensions as the store default, return null from the getCustomDimensions() function.

Make sure you test your shipping results before and after applying this snippet, ensuring you're getting the results that you expect. Different carriers have different allowances for box sizes for their various rates - you can review your chosen carrier(s) website to check on what those maximums are.

Examples

Example 1: Returning the largest dimensions from product level attributes

Foxy products have product level reserved attributes for length, width and height. These values aren't currently utilised anywhere, but can be used in this snippet to determine the shipping dimensions. As an example, the following code would use the largest dimensions for the products in the cart as the dimensions for shipping. The product level attributes would be passed as part of an add to cart, for example https://yourstore.foxycart.com/cart?name=My+Product&code=abc123&price=15.95&length=3&width=3.5&height=2

<script>
function getCustomDimensions(params) {
    var volume = 0,
        dimensions = null;
 
    for (var i = 0; i < FC.json.items.length; i++) {
        var width = parseFloat(FC.json.items[i].width),
            height = parseFloat(FC.json.items[i].height),
            length = parseFloat(FC.json.items[i].length);
 
        var v = width * height * length;
 
        if (v > volume) {
            volume = v;
            dimensions = {"length": length, "width": width, "height": height};
        }
    }
 
    return dimensions;
}
FC.client.on("cart-shipping-options-update", function(params) {
    params.address.dimensions = getCustomDimensions(params);
});
FC.client.on("checkout-shipping-options-update", function(params) {
    params.address.dimensions = getCustomDimensions(params);
});
</script>

Site Tools