Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Customization on WooCommerce variable product with custom fields

We have created a site using WooCommerce and WordPress with predefined products.
However, Product A must have variations, to resolve this, we added custom fields such as Colors, Dimensions, etc…

Now once the end-users are navigating to the product, we are able to fetch the custom field values. We also modified the UI so that users can pick and choose from these custom fields. (We have a preview of the modifications done via JS/CSS), so for instance, if they choose a green color we use JS to add a layer of green so that the preview is real time.

Now, we have one challenge.
-> What is the best way to go about adding this product PLUS all modifications done to the cart?
So for instance Product A was modified (on the front-end) using data pulled from the custom fields to include Color: Green and Size: 100×100 instead of defaults values. How do we store this and pass the customized product to the cart?

Appreciate the help!. Glad to add more details if something is not clear.

(There are plugins out there that can provide this functionality; Things similar to WooCommerce Product Add-On, etc… However, we have to custom develop the feature.)

Tags:

2

Answers


  1. 0

    The variations have a post_id, you would just use the variation post_id instead of the main product one.

    Login or Signup to reply.
  2. 0

    It requires some steps.

    1). For your product page:

    First you might need to add hidden fields to the add to cart form for each custom field like (example):

    add_action( 'woocommerce_before_add_to_cart_button', 'add_hidden_empty_input_fields' );
function add_hidden_empty_input_fields() {
    ?>
    <input type="hidden" name="hidden_color" id="hidden_color" value="">
    <input type="hidden" name="hidden_dimensions" id="hidden_dimensions" value="">
    <?php
}

    Then you will have to make some changes to your Javascript code to set the custom fields chosen values in those hidden fields.

    2). Pass the custom fields selected values as custom cart item data (example):

    add_filter('woocommerce_add_cart_item_data', 'add_custom_field_data', 10, 3 );
function add_custom_field_data( $cart_item_data, $product_id, $variation_id ) {
    if ( isset($_POST['hidden_color']) && ! empty($_POST['hidden_color']) ) {
        $cart_item_data['color'] = esc_attr($_POST['hidden_color']);
    }
    if ( isset($_POST['hidden_dimensions']) && ! empty($_POST['hidden_dimensions']) ) {
        $cart_item_data['dimensions'] = esc_attr($_POST['hidden_dimensions']);
    }
    return  $cart_item_data;
}

    And optionally display values on cart items (example):

    add_filter( 'woocommerce_get_item_data', 'display_custom_cart_item_data', 10, 2 );
function display_custom_cart_item_data( $cart_data, $cart_item ) {
    if ( isset($cart_item['color']) ) {
        $cart_data[] = array( "name" => __("Color"),  "value" => $cart_item['color']  );
    }
    if ( isset($cart_item['dimensions']) ) {
        $cart_data[] = array( "name" => __("Dimensions"), "value" => $cart_item['dimensions'] );
    }
    return $cart_data;
}

    3). Save the custom cart item data as custom order item meta data (example):

    add_action( 'woocommerce_checkout_create_order_line_item', 'save_custom_order_item_meta_data' , 10, 4 );
function save_custom_order_item_meta_data( $item, $cart_item_key, $values, $order ) {
    if ( isset($values['color']) ) {
        $item->add_meta_data( __("Color"), $values['color'] );
    }

    if ( isset($values['dimensions']) ) {
        $item->add_meta_data( __("Dimensions"), $values['dimensions'] );
    }
}

    Note: The data is going to be displayed on everywhere on orders and email notifications.

    Code goes in functions.php file of the active child theme (or active theme). It should work.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search