C贸mo agregar un campo de texto a un producto en WooCommerce

Si deseas agregar un campo de texto a un producto en tu tienda WooCommerce, nos puede hacerlo sin algo de c贸digo o un plugin.

No hay forma de a帽adir opciones de personalizaci贸n en art铆culos de manera nativa en WooCommerce. Pero vamos a intentar cambiar eso.

Veremos 2 pasos: utilizando un complemento de campos de productos (Advanced Product Fields (Product Addons) for WooCommerce y Flexible Product Fields (Product Add-ons) for WooCommerce) y a帽adiendo c贸digo.

En el caso de los plugins, ambos en su versi贸n free, pueden cubrir nuestras necesidades. No se explicar谩 su funcionamiento pues es realmente sencillo, por lo que pasaremos a la parte de c贸digo.

C贸mo a帽adir un campo de texto a un producto usando c贸digo

/**
 * @snippet
 * A帽adir un campo de texto a un producto de WooCommerce  
 */

// -----------------------------------------

// 1. Mostrar el campo de texto antes de a帽adir al carrito

add_action( 'woocommerce_before_add_to_cart_button', 'yanezpro_product_add_on', 9 );

function yanezpro_product_add_on() {

    $value = isset( $_POST['custom_text_add_on'] ) ? sanitize_text_field( $_POST['_custom_text_add_on'] ) : '';

    echo '<div><label>Texto a a帽adir <abbr class="required" title="required">*</abbr></label><p><input name="custom_text_add_on" value="' . $value . '"></p></div>';

}

// -----------------------------------------

// 2. Muestra mensaje de error si el campo est谩 vacio

add_filter( 'woocommerce_add_to_cart_validation', ' yanezpro_product_add_on_validation', 10, 3 );

function yanezpro_product_add_on_validation( $passed, $product_id, $qty ){

   if( isset( $_POST['custom_text_add_on'] ) && sanitize_text_field( $_POST['custom_text_add_on'] ) == '' ) {

      wc_add_notice( 'Rellene el campo de texto para continuar', 'error' );

      $passed = false;

   }

   return $passed;

}

// -----------------------------------------

//3. Almacena el campo de texto para a帽adirlo al carrito

add_filter( 'woocommerce_add_cart_item_data', ' yanezpro_product_add_on_cart_item_data', 10, 2 );

function yanezpro_product_add_on_cart_item_data( $cart_item, $product_id ){

    if( isset( $_POST['custom_text_add_on'] ) ) {

        $cart_item['custom_text_add_on'] = sanitize_text_field( $_POST['custom_text_add_on'] );

    }

    return $cart_item;

}

// -----------------------------------------

// 4. Mostramos en valor del campo de texto en el carrito

add_filter( 'woocommerce_get_item_data', ' yanezpro_product_add_on_display_cart', 10, 2 );

function yanezpro_product_add_on_display_cart( $data, $cart_item ) {

    if ( isset( $cart_item['custom_text_add_on'] ) ){

        $data[] = array(

            'name' => 'Campo de texto',

            'value' => sanitize_text_field( $cart_item['custom_text_add_on'] )

        );

    }

    return $data;

}

// -----------------------------------------

// 5. Almacenamos el valor del campo 

add_action( 'woocommerce_add_order_item_meta', ' yanezpro_product_add_on_order_item_meta', 10, 2 );

function yanezpro_product_add_on_order_item_meta( $item_id, $values ) {

    if ( ! empty( $values['custom_text_add_on'] ) ) {

        wc_add_order_item_meta( $item_id, 'Campo de texto', $values['custom_text_add_on'], true );

    }

}

// -----------------------------------------

// 6. Muestra el contenido del campo de texto en la tabla de pago
add_filter( 'woocommerce_order_item_product', ' yanezpro_product_add_on_display_order', 10, 2 );

function yanezpro_product_add_on_display_order( $cart_item, $order_item ){

    if( isset( $order_item['custom_text_add_on'] ) ){

        $cart_item['custom_text_add_on'] = $order_item['custom_text_add_on'];

    }

    return $cart_item;

}

// -----------------------------------------

// 7. Muesta el campo de texto en el email que recibe el cliente

add_filter( 'woocommerce_email_order_meta_fields', ' yanezpro_product_add_on_display_emails' );

function yanezpro_product_add_on_display_emails( $fields ) {

    $fields['custom_text_add_on'] = 'Campo de texto';

    return $fields;

}