Agregar campos personalizados en la página de productos en WooCommerce

WooCommerce es una plataforma de comercio electrónico extremadamente flexible que permite a los usuarios personalizar casi todos los aspectos de su tienda en línea. Una de las personalizaciones más comunes es la adición de campos personalizados en la página de producto. Estos campos pueden ser útiles para recopilar información adicional del cliente, como grabados, tallas personalizadas o cualquier otro dato relevante para tu negocio. En este artículo, exploraremos cómo agregar campos personalizados y asegurarnos de que esta información se incluya en el pedido final.

Agregar campos personalizados a la página de producto

Para agregar campos personalizados a la página de producto de WooCommerce, necesitamos usar filtros y ganchos de WordPress. Aquí hay un ejemplo de cómo agregar un campo personalizado para ingresar un mensaje personalizado en la página de producto:

// Add custom field to the product form
add_action('woocommerce_before_add_to_cart_button', 'add_custom_field');
function add_custom_field() {
    echo '<div class="custom-field"><label for="personalized_message">Personalized Message:</label><input type="text" id="personalized_message" name="personalized_message" value=""></div>';
}

// Validate and save custom field when adding product to cart
add_filter('woocommerce_add_cart_item_data', 'save_custom_field_to_cart', 10, 2);
function save_custom_field_to_cart($cart_item_data, $product_id) {
    if(isset($_POST['personalized_message'])) {
        $cart_item_data['personalized_message'] = $_POST['personalized_message'];
    }
    return $cart_item_data;
}

Mostrar Campos Personalizados en el Carrito y en el Pedido

Una vez que hemos agregado el campo personalizado al carrito, necesitamos asegurarnos de que se muestre en todas las etapas del proceso de compra. Para hacerlo, podemos utilizar ganchos de WooCommerce para agregar esta información a las visualizaciones del carrito y del pedido. Aquí tienes cómo hacerlo:

// Display custom field in the cart
add_filter('woocommerce_get_item_data', 'display_custom_field_in_cart', 10, 2);
function display_custom_field_in_cart($cart_data, $cart_item) {
    $custom_items = array();
    if(!empty($cart_item['personalized_message'])) {
        $custom_items[] = array(
            'name' => __('Personalized Message', 'woocommerce'),
            'value' => $cart_item['personalized_message']
        );
    }
    return !empty($custom_items) ? array_merge($cart_data, $custom_items) : $cart_data;
}

// Display custom field in the order
add_action('woocommerce_checkout_create_order_line_item', 'display_custom_field_in_order', 10, 4);
function display_custom_field_in_order($item, $cart_item_key, $values, $order) {
    if(!empty($values['personalized_message'])) {
        $item->add_meta_data(__('Personalized Message', 'woocommerce'), $values['personalized_message']);
    }
}

Con este código, el campo personalizado se mostrará tanto en la página del carrito como en la del pedido, permitiendo al cliente revisar su mensaje personalizado antes de finalizar la compra.

Agregar campos personalizados en la página de producto de WooCommerce y asegurarse de que estos campos se incluyan en el pedido final puede mejorar la experiencia del cliente y proporcionar información adicional para satisfacer sus necesidades. Con los filtros y ganchos adecuados de WordPress y WooCommerce, este proceso se puede lograr de manera sencilla y efectiva, adaptándose a las necesidades específicas de tu tienda en línea. Espero que este artículo te haya sido útil para entender cómo implementar esta funcionalidad en tu sitio web WooCommerce.