Woocommerce dimensions – display suffix

Hi there,

You could use the woocommerce_format_dimensions filter to change how the dimensions are displayed. Something like the following would make it display like “Length: 5 in”. You can change the parts around to display how you want, and can also add the “width” and “height” in the same way if you want.

add_filter('woocommerce_format_dimensions', 'my_custom_dimensions', 10, 2);
function my_custom_dimensions( $dim_string, $dimensions ) {
    $dim_string = 'Length: ' . $dimensions['length'] . ' ' . get_option( 'woocommerce_dimension_unit' );
    return $dim_string;
}

I hope that helps! Have a wonderful day!

That’s perfect! Thanks so much

@kellymetal

Hi, I just noticed this works perfect on products that only have the one ‘length’ dimension, which is most of our products. But we do have a small number of products which will include the other dimensions, how can I have it also show the other dimensions if they are also entered, but ignore the sides that are not entered (i.e. it will ignore the dimension if no value is entered on the product but display the other one or two).

I tried to extend your code, as below, but it will only show one of the dimensions.

add_filter('woocommerce_format_dimensions', 'my_custom_dimensions', 10, 2);
function my_custom_dimensions( $dim_string, $dimensions ) {
    $dim_string = 'Length: ' . $dimensions['length'] . ' ' . get_option( 'woocommerce_dimension_unit' );
	$dim_string = 'Width: ' . $dimensions['width'] . ' ' . get_option( 'woocommerce_dimension_unit' );
	$dim_string = 'Height: ' . $dimensions['height'] . ' ' . get_option( 'woocommerce_dimension_unit' );
    return $dim_string;
}

• This reply was modified 4 years, 6 months ago by PossiblyMaybe.

I’ve found the following snippets, but both are not quite right.

This one is fine, but I want it display the full word ‘length’ ‘width’ ‘height’ and not just the initial

add_filter( 'woocommerce_format_dimensions', 'custom_formated_product_dimentions', 10, 2 );
function custom_formated_product_dimentions( $dimension_string, $dimensions ){
    if ( empty( $dimension_string ) )
        return __( 'N/A', 'woocommerce' );

    $dimensions = array_filter( array_map( 'wc_format_localized_decimal', $dimensions ) );
    $label_with_dimensions = []; // Initialising

    // Loop Though dimensions array
    foreach( $dimensions as $key => $dimention )
        $label_with_dimensions[$key] = strtoupper( substr($key, 0, 1) ) . ' ' . $dimention;

    return implode( ' x ',  $label_with_dimensions) . ' ' . get_option( 'woocommerce_dimension_unit' );
}

This one is displaying the full word, but it is displaying dimensions that have no value and should be hidden. I also like that the above code puts a X between each dimension.

add_filter( 'woocommerce_format_dimensions', 'woocommerce_format_dimensions', 10, 2 );

function woocommerce_format_dimensions( $dimension_string, $dimensions ) {

    if ( !empty( $dimension_string ) ) {
        $dimension_string    = '';
        $dimension_unit      = ' ' . get_option( 'woocommerce_dimension_unit' );
        foreach ( $dimensions as $dimension => $value ) {
            $dimension_string .= ucwords( $dimension ) . ": " . $value . $dimension_unit . " ";
        }
    } else {
        $dimension_string = __( 'N/A', 'woocommerce' );
    }
    return $dimension_string;
}

I’ve been trying to get the best of both but cant quite get it working.

Hi there,

I tweaked the first snippet you posted in your last message so that it displays the full label instead of just the initial. Also, it looks like it correctly leaves out any dimensions that are not set.

add_filter( 'woocommerce_format_dimensions', 'custom_formated_product_dimentions', 10, 2 );
function custom_formated_product_dimentions( $dimension_string, $dimensions ){
    if ( empty( $dimension_string ) )
        return __( 'N/A', 'woocommerce' );

    $dimensions = array_filter( array_map( 'wc_format_localized_decimal', $dimensions ) );
    $label_with_dimensions = []; // Initialising

    // Loop Though dimensions array
    foreach( $dimensions as $key => $dimension )
        $label_with_dimensions[$key] = ucfirst($key) . ' ' . $dimension . ' ' . get_option( 'woocommerce_dimension_unit' );

    return implode( ' x ',  $label_with_dimensions);
}

I hope that helps! : )

@kellymetal

Thanks again, this is just what I needed!

Hi there @possiblymaybe,

Very glad to hear it worked!! ??

@kellymetal

Alas! Although this code looked perfect I have just been through all my plugins and then all my code snippets to find out what was causing my variable products to stop working, and it seems to be this. Now I have turned it off my variable products are working again.

With this snippet activated, when in a variable product I get all my product variation in the dropdown but if I try to add one to cart it says “Please select some product options before adding this product to your basket.” Also the image doesnt change according to the attribute selected.

Doing Inspect Element in Chrome showed this error: https://ibb.co/C14BmJ8

Is there a way to tweak this code?

Thank you!

Hi there @possiblymaybe,

It took a while to reproduce the jQuery error you were seeing in your console. The majority of my variable products that I tested with seemed to be working, but then I got to a Variable Subscription product without any dimensions set, and I saw the same error being reported.

Initially, I had just tweaked the snippet you had found to change the way it displayed the dimensions. However after actually playing around with it a bit, I see that for products without dimensions, it is checking to see if the $dimension_string is empty. Checking the value though, I see it is coming in as N/A though.

I added a bit to check that as well — maybe sometimes that comes in as empty, and sometimes as N/A ??

Anyway, this seems to be working with all my variable products, whether they have dimensions or not:

add_filter( 'woocommerce_format_dimensions', 'custom_formated_product_dimensions', 10, 2 );
function custom_formated_product_dimensions( $dimension_string, $dimensions ){
    kel_write_log($dimension_string);
    if ( empty( $dimension_string ) || $dimension_string === 'N/A')
        return __( 'N/A', 'woocommerce' );

    $dimensions = array_filter( array_map( 'wc_format_localized_decimal', $dimensions ) );
    $label_with_dimensions = []; // Initialising

    // Loop Though dimensions array
    foreach( $dimensions as $key => $dimension )
        $label_with_dimensions[$key] = ucfirst($key) . ' ' . $dimension . ' ' . get_option( 'woocommerce_dimension_unit' );

    return implode( ' x ',  $label_with_dimensions);
}

Please try that out and see if it works for you!

Have a good one!

Hi, thanks for this, I finally got a chance to try it on my staging site. Unfortunately it didn’t work. When I clicked to go in to a variable product the page displayed strangely and said there was a critical error. Inspecting the page in Chrome the message is coming from wp-die-message. I cant see any other information to give you. This is proving harder expected! Thanks for taking the time to help.

Hi there,

That is unfortunate to hear it didn’t work on your site. I’m not sure what to say in this case though, as it seems to be working without any issues on my site now — whether the variable product has no dimensions set, some dimensions set, or all dimensions set.

If you switch back to Storefront and have only WooCommerce active, do you see the same issue?

Would you mind sending the URL to one of the variable products on your site so I can see the issue you are referring to?

Thank you!

We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.