Campos para datos de productos personalizados en WooCommerce.

Cómo añadir pestaña de datos de producto personalizados en WooCommerce

Como desarrollador de plugins para WordPress, algo con lo que me he encontrado con mayor frecuencia es añadir datos de producto personalizados en WooCommerce.

Algunas veces, estos datos pueden definirse como atributos o variaciones del producto, por ejemplo las tallas o colores de prendas de ropa. Pero hay otras ocasiones en las que es algo más complejo, como integrar WooCommerce con plugins de suscripción o pasarelas de pago diferentes a las habituales, un ejemplo, Lemon Squeezy.

Bueno, pues en esos casos, la mejor forma de hacerlo es recurrir a algunos hooks de WooCommerce que son muy útiles para crear una pestaña adicional en la edición de productos.

Pestañas Generales en Datos de Producto de WooCommerce

Lo primero será definir nuestra pestaña en el menú de datos de producto y para ello usaremos el hook «woocommerce_product_data_tabs» de la siguiente forma:

add_filter( 'woocommerce_product_data_tabs', 'ar_product_edit_tab' );
function ar_product_edit_tab( $tabs ){
    $tabs['ar_tab'] = array(
        'label'         => __( 'Mis Datos', 'alex-rivas' ),
        'target'        => 'ar_custom_tab',
        'priority'      => 20,
        'class'         => array()
    );

    return $tabs;
}

La función que intercepta al hook recibe como parámetro un array con las pestañas actuales. Así que lo que haremos será crear un nuevo elemento que será un array con los siguientes elementos básicos:

  • label: el texto de la pestaña.
  • target: relaciona la pestaña al contenedor con los campos que contendrá la misma, más adelante verás la utilidad de este campo.
  • priority: indica la prioridad de renderizado de la pestaña, o su posición respecto a las demás, a menor prioridad más arriba estará.
  • class: para agregar clases a la pestaña.

Para la propiedad class hay una serie de clases predefinidas que nos servirán para indicar si la pestaña será visible solo para determinado tipo de productos. Por ejemplo, si queremos que no sea visible para productos virtuales entonces agregaremos la clase «hide_if_virtual».

El resultado de esto será una nueva pestaña en el menú de datos de productos con el título que definimos:

Agregar pestaña de datos de producto personalizados en WooCommerce

Hasta aquí ya tenemos nuestra pestaña, ahora solo hace falta agregar el contenido de la misma, y para ello lo haremos así:

add_action( 'woocommerce_product_data_panels', 'ar_product_data_fields' );
function ar_product_data_fields(){
    global $woocommerce, $post;
    ?>
    <div id="ar_custom_tab" class="panel woocommerce_options_panel">
        <p class="form-field">
            <?php woocommerce_wp_text_input( array(
                'id'            => 'ar_custom_field',
                'type'          => 'text',
                'label'         => __( 'Campo personalizado', 'lemon-squeezy' ),
                'placeholder'   => '',
                'class'         => 'short',
                'desc_tip'      => 'true',
                'description'   => __( 'Campo personalizado', 'lemon-squeezy' ),
                'value'         => ''
            ) ); ?>
        </p>
    </div>
    <?php
}

Lo primero a destacar en este fragmento es el id del div contenedor. Este id debe ser el mismo que la propiedad target que definimos en la creación de la pestaña en el primer fragment. Si son diferentes, tu sección se mostrará vacía. Así que ojo con esto.

En cuanto a los campos, aquí no hay límite alguno. Podemos agregar cuantos campos queramos y de la forma en que más nos plazca, pueden ser tags estándar de html o, como se muestra aquí, puedes recurrir a las funciones de WooCommerce, que en lo personal, te lo recomiendo, ya que mostrarán los campos con un estilo homogéneo.

En este caso hemos usado la función woocommerce_wp_text_input que recibe como parámetros un array con las propiedades del campo. Algunas de estas propiedades son:

  • id: el identificador html del campo y que nos servirá para guardar los datos.
  • type: en este caso, el type sirve para indicar que tipo de input es, texto, números, emails, etc.
  • label: etiqueta del campo.
  • class: array con clases que se agregaran al campo.
  • desc_tip: habilita o deshabilita el tooltip con la descripción del campo.
  • description: descripción del campo, se muestra si desc_tip es true y muestra un icono negro con un signo de interrogación.
  • value: valor por defecto para el campo.

Este sería el resultado:

Campos para datos de productos personalizados en WooCommerce.

Ya tenemos nuestra sección de datos de producto personalizados en WooCommerce, pero todavía falta guardar dichos datos cuando el usuario haga clic en actualizar producto.

Para ello usaremos el hook «woocommerce_process_product_meta» que está disponible desde WooCommerce 3.

add_action( 'woocommerce_process_product_meta', 'ar_save_fields' );
function ar_save_fields( $post_id ){
    if( isset( $_POST['ar_custom_field'] ) ){
        $field = sanitize_text_field( $_POST['ar_custom_field'] );
        update_post_meta( $post_id, 'ar_custom_field', $field );
    }
}

Si tienes una versión de WooCommerce inferior a la 3, puedes usar el hook «save_post» para guardar los datos, el procedimiento no cambia mucho.

Con nuestro dato personalizado guardado es momento de mostrarlo en la página de producto. Hay una gran variedad de hooks en WooCommerce que te permitirán mostrar información adicional en diferentes secciones de la pagina de producto.

Algunas opciones son antes o después de la descripción corta del producto, después del botón de añadir al carrito o incluso hasta el final del todo.

En nuestro caso vamos a añadirlo después de la descripción corta haciendo uso del hook «woocommerce_before_add_to_cart_form» de la siguiente forma:

add_action( 'woocommerce_before_add_to_cart_form', 'ar_show_custom_field' );
function ar_show_custom_field(){
    global $product;
    $custom_field = get_post_meta( $product->get_id(), 'ar_custom_field', true );
    echo "<p><strong>" . __( 'Campo personalizado', 'alex-rivas' ) . ":</strong> " . $custom_field . "</p>";
}

¡Listo! Ahora podemos ver el resultado al guardar nuestros datos personalizados de producto en WooCommerce:

Datos de producto personalizados en WooCommerce

Bueno, eso es todo, como puedes ver, es bastante sencillo de implementar una vez que conoces los hooks necesarios, lo que a su vez te ayudará a tener un proyecto mejor estructurado y siguiendo las mejores prácticas para el desarrollo de plugins.

Espero que este post te haya sido de utilidad, nos vemos en otros artículos en los que seguiré hablando de cómo desarrollar tus propios plugins para WordPress.

Please wait...

Thank you for signing up!