Cómo agregar un campo de texto personalizado de Woocommerce en la página del producto

Publicado: 2020-09-21

Agregar campo de texto personalizado de Woocommerce en la página del producto En esta publicación, le mostraré una solución muy simple para agregar un campo de texto personalizado de WooCommerce en la página del producto. Estos campos personalizados también se denominan complementos de productos e incluyen campos de texto, campos de selección, casillas de verificación, etc. La razón principal para agregar esto es permitir que el cliente ingrese información adicional y personalizada sobre un producto a un costo.

WooCommerce es una poderosa solución de comercio electrónico para WordPress que ha ganado popularidad a lo largo de los años. Se estima que WooCommerce impulsa más del 42% de todas las tiendas en línea disponibles.

Este es un porcentaje muy alto y si está buscando una tienda en línea que sea fácil de configurar y administrar, entonces WooCommerce es la mejor opción para usted. Es una solución gratuita y de código abierto, que se ha convertido en una solución de comercio electrónico muy competente para sitios web basados en WordPress.

Campo de texto personalizado de Woocommerce en la página del producto

Si realiza una búsqueda rápida en Internet, muchas personas le brindarán soluciones complejas que son difíciles de implementar. En este breve tutorial, compartiré un fragmento de código PHP que agregará esta funcionalidad a su página de producto.

Al final de este tutorial, los usuarios de su tienda en línea podrán agregar una nota personalizada a cada producto. Si el campo personalizado no está lleno, arrojará un error.

Además, si está buscando una forma más sencilla de agregar campos personalizados, entonces el complemento Extras de productos para WooCommerce será la mejor solución para usted. Sin embargo, es un complemento premium y tendrá que pagar una tarifa anual de $59. Extras del producto para el complemento WooCommerce

¿Por qué agregaría campos personalizados en la página del producto?

La razón principal para hacer esto es mejorar la retención de clientes, lo que probablemente aumente las ventas, ya que los clientes podrán agregar una nota personalizada en el pedido.

Por ejemplo, un cliente puede querer envolver regalos o tarjetas de felicitación personalizadas en el producto y él o ella puede agregar la nota personalizada en el producto.

Con todo lo que está sobre la mesa, echemos un vistazo a los pasos que debe seguir para agregar un campo de texto personalizado en la página del producto en su tienda WooCommerce. La página de producto predeterminada se ve así:

Pasos para agregar un campo de texto personalizado de Woocommerce en la página del producto

Estos son los pasos que debe seguir:

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú del panel, haga clic en Menú de apariencia > Menú del editor de temas . Cuando se abra la página del Editor de temas , busque el archivo de funciones del tema donde agregaremos la función que agregará el campo personalizado de WooCommerce en la página del producto .
Agrega el siguiente código al archivo functions.php :

 /**

 * @snippet Agregue un campo de entrada a los productos - WooCommerce

 */

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

// 1. Mostrar el campo de entrada personalizado arriba de Agregar al carrito

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

función njengah_product_add_on() {

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

    echo '<div><label>Complemento de texto personalizado <abbr class="required" title="required">*</abbr></label><p><input name="custom_text_add_on" value="' . $valor . '"></p></div>';

}

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

// 2. Lanzar error si el campo de entrada personalizado está vacío

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

función njengah_product_add_on_validation( $aprobado, $product_id, $cantidad){

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

      wc_add_notice('El complemento de texto personalizado es un campo obligatorio', 'error');

      $aprobado = falso;

   }

   devolver $aprobado;

}

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

// 3. Guarde el valor del campo de entrada personalizado en los datos del artículo del carrito

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

función njengah_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'] );

    }

    devuelve $cart_item;

}

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

// 4. Mostrar el valor del campo de entrada personalizado en el carro

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

función njengah_product_add_on_display_cart ($datos, $cart_item) {

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

        $datos[] = matriz(

            'name' => 'Complemento de texto personalizado',

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

        );

    }

    devolver $datos;

}

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

// 5. Guarde el valor del campo de entrada personalizado en el meta del artículo de pedido

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

función njengah_product_add_on_order_item_meta ($ item_id, $ valores) {

    if ( ! vacío( $valores['custom_text_add_on'] ) ) {

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

    }

}

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

// 6. Mostrar el valor del campo de entrada personalizado en la tabla de pedidos

add_filter('woocommerce_order_item_product', 'njengah_product_add_on_display_order', 10, 2);

función njengah_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'];

    }

    devuelve $cart_item;

}

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

// 7. Mostrar el valor del campo de entrada personalizado en los correos electrónicos de pedidos

add_filter('woocommerce_email_order_meta_fields', 'njengah_product_add_on_display_emails');

función njengah_product_add_on_display_emails ($ campos) {

    $fields['custom_text_add_on'] = 'Complemento de texto personalizado';

    devolver $campos;

}

Para ver el resultado , simplemente actualice la página del producto y debería ver esto:

Si un usuario no ha ingresado los detalles, se mostrará un error hasta que el usuario agregue el texto personalizado como se muestra a continuación: error si el usuario no ha ingresado los detalles

La nota personalizada también aparecerá en los detalles del pedido como se muestra aquí: complemento de texto personalizado en el carrito

Cómo funciona el código

Primero, el código muestra el campo de entrada personalizado arriba de Agregar al carrito y luego se agrega un error si el campo de entrada personalizado está vacío. Luego, el valor del campo de entrada personalizado se guarda y se muestra en el carrito, el artículo del pedido, la tabla de pedidos y en los correos electrónicos del pedido.

Conclusión

En esta publicación, le proporcioné una solución más simple para los usuarios no tan expertos en tecnología que involucran el uso de un complemento. Luego compartí un fragmento de código PHP que debe colocarse en el archivo functions.php para mostrar el complemento del cliente en el carrito, el artículo del pedido, la tabla de pedidos y en los correos electrónicos del pedido. Espero que esta publicación lo haya ayudado a agregar un campo de texto personalizado de WooCommerce en la página del producto.