How do I add a field on the WooCommerce product pa

Question

I am trying to add a text field that accepts a text value from user on the product page before he/she clicks the "Add To Card" button. Here is the code that I have added in functions.php file:

    function action_woocommerce_before_add_to_cart_button(  ) 
{
    // make action magic happen here...

    echo "<input type='text' name='engrave-text' id='engrave-text' placeholder='Your Engraving Text'>";
};

// add the action
add_action( 'woocommerce_before_add_to_cart_button', 'action_woocommerce_before_add_to_cart_button', 10, 0 );
//Store the custom field
add_filter( 'woocommerce_add_cart_item_data', 'add_cart_item_custom_data_vase', 10, 2 );
function add_cart_item_custom_data_vase( $cart_item_meta, $product_id ) {
  global $woocommerce;
  $cart_item_meta['test_field'] = $_POST['engrave-text'];
  return $cart_item_meta; 
}

//Get it from the session and add it to the cart variable
function get_cart_items_from_session( $item, $values, $key ) {
    if ( array_key_exists( 'test_field', $values ) )
        $item[ 'Engraved-Text' ] = $values['test_field'];
    return $item;
}
add_filter( 'woocommerce_get_cart_item_from_session', 'get_cart_items_from_session', 1, 3 );

But it is not working. Can you please help?

Thank you

Answer 1

You can add the fields or any thing like image or text to display using this hook

add_action( 'woocommerce_before_add_to_cart_button', 'addFieldsBeforeAddToCart' );

/* This function will add text field in the front end when plugin is activated*/
function addFieldsBeforeAddToCart() {
    ?>
    <table>
        <tr>
            <td>
                <?php _e( "Name:", "aoim"); ?>
            </td>
            <td>
                <input type = "text" name = "customerName" id = "customerName" placeholder = "Name on Gift Card">
            </td>
        </tr>
        <tr>
            <td>
                <?php _e( "Message:", "aoim"); ?>
            </td>
            <td>
                <input type = "text" name = "customerMessage" id = "customerMessage" placeholder = "Your Message on Gift Card">
            </td>
        </tr>
    </table>
    <?php
}

use this hook in functions.php or in your plugin file

Answer 2

I figured it out. The following code works:

function action_woocommerce_before_add_to_cart_button(  ) 
{
    // make action magic happen here...

    echo "<input type='text' name='engrave-text' id='engrave-text' placeholder='Your Engraving Text'>";
};

// add the action
add_action( 'woocommerce_before_add_to_cart_button', 'action_woocommerce_before_add_to_cart_button', 10, 0 );


function engrave_text_validation() { 
    if ( empty( $_REQUEST['engrave-text'] ) ) {
        wc_add_notice( __( 'Please enter a Name for Engraving', 'woocommerce' ), 'error' );
        return false;
    }
    return true;
}
add_action( 'woocommerce_add_to_cart_validation', 'engrave_text_validation', 10, 3 );


function save_engrave_text_field( $cart_item_key, $product_id = null, $quantity= null, $variation_id= null, $variation= null ) {
    if( isset( $_REQUEST['engrave-text'] ) ) {
        WC()->session->set( $cart_item_key.'_engrave_text', $_REQUEST['engrave-text'] );
    }
}
add_action( 'woocommerce_add_to_cart', 'save_engrave_text_field', 1, 5 );

function render_meta_on_cart_item( $title = null, $cart_item = null, $cart_item_key = null ) {
    if( $cart_item_key && WC()->session->__isset( $cart_item_key.'_engrave_text' ) ) {
        echo $title. '<dl class="">
                 <dt class="">Engrave Text : </dt>
                 <dd class=""><p>'. WC()->session->get( $cart_item_key.'_engrave_text') .'</p></dd>         
              </dl>';
    }else {
        echo $title;
    }
}
add_filter( 'woocommerce_cart_item_name', 'render_meta_on_cart_item', 1, 3 );

function render_meta_on_checkout_order_review_item( $quantity = null, $cart_item = null, $cart_item_key = null ) {
    if( $cart_item_key && WC()->session->__isset( $cart_item_key.'_engrave_text' ) ) {
        echo $quantity. '<dl class="">
                 <dt class="">Engrave Text: </dt>
                 <dd class=""><p>'. WC()->session->get( $cart_item_key.'_engrave_text') .'</p></dd>
              </dl>';
    }
}
add_filter( 'woocommerce_checkout_cart_item_quantity', 'render_meta_on_checkout_order_review_item', 1, 3 );

function engrave_text_order_meta_handler( $item_id, $values, $cart_item_key ) {
    if( WC()->session->__isset( $cart_item_key.'_engrave_text' ) ) {
        wc_add_order_item_meta( $item_id, "Engrave Text", WC()->session->get( $cart_item_key.'_engrave_text') );
    }
}
add_action( 'woocommerce_add_order_item_meta', 'engrave_text_order_meta_handler', 1, 3 );

function engrave_force_individual_cart_items($cart_item_data, $product_id)
{
    $unique_cart_item_key = md5( microtime().rand() );
    $cart_item_data['unique_key'] = $unique_cart_item_key;

    return $cart_item_data;
}
add_filter( 'woocommerce_add_cart_item_data','engrave_force_individual_cart_items', 10, 2 );