Search code examples
phpwordpresswoocommerceproductcustom-dimensions

Additional custom dimensions for products in Woocommerce


I have a products with the following size parameters:

  • Length (Woocomerce standard)
  • Width (Woocomerce standard)
  • Height (Woocomerce standard)
  • Diameter
  • Thickness
  • Circuit

In the product edit page I have only Length, Width, Height (Woocomerce standard)

I would like to add my other sizes parameters

How can I add this extra sizes properly?

Is there any filter for this?


Solution

  • There is multiple ways…

    1) Using Product attributes: (without any coding need):

    • You should create 3 new product attributes (one for each other missing dimension).

      enter image description here
    • You should set each of them in each product with the correct options (displayed on products option) and values.

      enter image description here

    Advantage: Those other dimention attributes will be displayed on product pages.

    Disadvantages:

    • Each attribute Needs to be set for each product and each value is going to be a term of this product attribute.
    • There are no specific existing WC_Product methods to get those custom product attributes like the default dimension ones. So is going to be more complicated to get them outside the product page.

    2) Using custom setting fields:

    // Add custom fields to product shipping tab
    add_action( 'woocommerce_product_options_dimensions', 'add_product_options_other_dimensions');
    function add_product_options_other_dimensions(){
        global $product_object;
    
        $product_id = method_exists( $product_object, 'get_id' ) ? $product_object->get_id() : $product_object->id;
    
        echo '</div><div class="options_group">'; // New option group
    
        woocommerce_wp_text_input( array(
            'id'          => '_diameter',
            'label'       => __( 'Diameter', 'woocommerce' ),
            'desc_tip'    => 'true',
            'description' => __( 'Diameter description help.', 'woocommerce' )
        ) );
    
        woocommerce_wp_text_input( array(
            'id'          => '_thickness',
            'label'       => __( 'Thickness', 'woocommerce' ),
            'desc_tip'    => 'true',
            'description' => __( 'Thickness description help.', 'woocommerce' )
        ) );
    
        woocommerce_wp_text_input( array(
            'id'          => '_circuit',
            'label'       => __( 'Circuit', 'woocommerce' ),
            'desc_tip'    => 'true',
            'description' => __( 'Circuit description help.', 'woocommerce' )
        ) );
    
    }
    
    // Save the custom fields values as meta data
    add_action( 'woocommerce_process_product_meta', 'save_product_options_other_dimensions' );
    function save_product_options_other_dimensions( $post_id ){
    
        if( isset( $_POST['_diameter'] ) )
            update_post_meta( $post_id, '_diameter', esc_attr( $_POST['_diameter'] ) );
    
        if( isset( $_POST['_thickness'] ) )
            update_post_meta( $post_id, '_thickness', esc_attr( $_POST['_thickness'] ) );
    
        if( isset( $_POST['_circuit'] ) )
            update_post_meta( $post_id, '_circuit', esc_attr( $_POST['_circuit'] ) );
    
    }
    
    // Add custom fields to product variation settings
    add_action( 'woocommerce_product_after_variable_attributes','add_variation_options_other_dimensions', 10, 3 );
    function add_variation_options_other_dimensions( $loop, $variation_data, $variation ){
    
        $variation_diameter = get_post_meta($variation->ID,"_diameter", true );
        if( ! $variation_diameter ) $variation_diameter = "";
    
        $variation_thickness = get_post_meta($variation->ID,"_thickness", true );
        if( ! $variation_thickness ) $variation_thickness = "";
    
        $variation_circuit = get_post_meta($variation->ID,"_circuit", true );
        if( ! $variation_circuit ) $variation_circuit = "";
    
        echo '<p class="form-field dimensions_field">';
    
        woocommerce_wp_text_input( array(
            'id'          => '_diameter' . '_' . $loop,
            'label'       => __( 'Diameter', 'woocommerce' ),
            'desc_tip'    => 'true',
            'description' => __( 'Diameter description help.', 'woocommerce' ),
            'value'       => $variation_diameter
        ) );
    
        woocommerce_wp_text_input( array(
            'id'          => '_thickness' . '_' . $loop,
            'label'       => __( 'Thickness', 'woocommerce' ),
            'desc_tip'    => 'true',
            'description' => __( 'Thickness description help.', 'woocommerce' ),
            'value'       => $variation_thickness
        ) );
    
        woocommerce_wp_text_input( array(
            'id'          => '_circuit' . '_' . $loop,
            'label'       => __( 'Circuit', 'woocommerce' ),
            'desc_tip'    => 'true',
            'description' => __( 'Circuit description help.', 'woocommerce' ),
            'value'       => $variation_circuit
        ) );
    
        echo '</p>';
    }
    
    
    // Save product variation custom fields values
    add_action( 'woocommerce_save_product_variation','save_variation_options_other_dimensions', 10 ,2 );
    function save_variation_options_other_dimensions( $variation_id, $loop ){
    
        $built_lenght = $_POST["_diameter_$loop"];
        if( isset($built_lenght) )
            update_post_meta( $variation_id, '_built_lenght', esc_attr($built_lenght) );
    
        $built_width = $_POST["_thickness_$loop"];
        if( isset($built_width) )
            update_post_meta( $variation_id, '_built_width', esc_attr($built_width) );
    
        $built_height = $_POST["_circuit_$loop"];
        if( isset($built_height) )
            update_post_meta( $variation_id, '_built_height', esc_attr($built_height) );
    }
    

    This code goes on function.php file of your active child theme (or theme).

    You will get that for products:

    enter image description here

    And that for product variations (in variable products "variations settings):

    enter image description here

    Now to display and get those values, you will have to override the woocommerce template via your theme as explained in this documentation.

    The file to copy and override via your theme is: single-product/product-attributes.php template.

    You will have to add some code to it to display your custom additional dimension labels and values just after the displayed default dimentions.

    To output the correct values you will use get_post_meta() function.

    For example to display the diameter value you will use:

    <?php echo get_post_meta( $product->get_id(), '_diameter', true ); ?>