Cuando trabajamos con WooCommerce para desarrollar tiendas online, puede sucedernos que las opciones por defecto se nos queden cortas. Hay negocios cuyos productos tienen determinadas particularidades que necesitan que ampliemos estas opciones o simplemente el cliente quiere incluir determinadas cosas por el motivo que sea. Para estos casos tenemos la posibilidad de acudir a algún plugin que nos permita de un modo sencillo implementarlo o programarlo nosotros mismo. En este caso vamos a ver cómo hacerlo sin plugins, en concreto cómo crear una nueva pestaña o tab dentro de los datos del producto que nos permita añadir en su interior campos personalizados.
Primero crearemos todo lo necesario en el backend del producto, dividido por pasos y después pasaremos a mostrar la información de esos campos personalizados en el frontend. Por suerte WooCommerce nos facilita mucho la tarea de personalización programando ya que sigue la misma filosofía de WordPress y dispone de herramientas así como documentación para ello. En cualquier caso, si necesitas hacer una personalización pero la parte técnica no es tu fuerte, siempre puedes contactar conmigo y decirme qué necesitas, como desarrollador web freelance estaré encantado de atenderte. Vamos al lío.
Back-end
Creando una pestaña (tab)
Supongamos que nuestra tienda es para vender libros y queremos una pestaña específica para mostrar algunos datos propios de este tipo de producto. Abriremos el archivo functions.php de nuestro tema y en primer lugar crearemos la pestaña que contendrá después las opciones, para eso usaremos woocommerce_product_data_tabs que nos permitirá añadir a las pestañas por defecto la nuestra. Las indicaciones que iré dando serán para trabajar directamente en el archivo de funciones, pero si prefieres organizar tu código en diferentes archivos puedes hacerlo como más te convenga.
// Creamos la pestaña y definimos sus atributos
function libro_tab( $tab ){
$tab['libro'] = array(
'label' => __( 'libro', 'dominiotraduccion' ),
'target' => 'panel_libro',
'class' => array( 'show_if_simple', 'show_if_variable' ),
'priority' => 1,
);
return $tab;
}
add_filter('woocommerce_product_data_tabs', 'libro_tab' );Dentro de la función creamos un array donde le indicaremos el texto que se verá sobre el tab, le asignaremos un target para vincularlo posteriormente con el panel que contendrá las opciones, indicaremos enqué tipo de productos queremos que sea visible y por último la prioridad a la hora de mostrarse respecto a las otras pestañas.
Creando el panel de campos personalizados
Una vez tenemos la pestaña creada, WooCommerce necesita que definamos el espacio que contendrá nuestros campos personalizados. A este espacio se le llama panel e irá vinculado al tab mediante un identificador. Para crearlo usaremos woocommerce_product_data_panels que nos permitirá añadir un nuevo panel al listado inicial como en el caso anterior. Siguiendo el ejemplo de los libros, dentro del panel añadiremos un campo de texto para poder meter el ISBN así como el año de publicación y para eso nos valdremos de la función woocommerce_wp_text_input().
// Creamos el panel
function libro_panel(){
echo '<div id="panel_libro" class="panel woocommerce_options_panel hidden">'; // en el id va el valor del target
echo '<div class="options_group">';
woocommerce_wp_text_input( array(
'id' => 'libro_isbn',
'value' => get_post_meta( get_the_ID(), 'libro_isbn', true ),
'label' => __( 'ISBN', 'dominiotraduccion' ),
'desc_tip' => true,
'description' => __( 'Campo para introducir el ISBN del libro.', 'dominiotraduccion' )
) );
woocommerce_wp_text_input( array(
'id' => 'libro_publicacion',
'value' => get_post_meta( get_the_ID(), 'libro_publicacion', true ),
'label' => __( 'Año de publicación', 'dominiotraduccion' ),
'desc_tip' => true,
'description' => __( 'Introduce el año de publicación del libro.', 'dominiotraduccion' )
) );
echo '</div>';
echo '</div>';
}
add_action( 'woocommerce_product_data_panels', 'libro_panel' );
Como puedes ver primero usamos dos divs con clases predefinidas de WooCommerce y que son importante que conserves. El primero es para contener todos los campos y que será el que identificaremos con el valor que introdujimos en el target de la pestaña. El otro es para indicar que es un grupo de opciones reacionadas, esto es solo para indicar si queremos mostrar una separación entre distintos grupos de opciones.
Después usamos la función woocommerce_wp_text_input() que indicamos antes y mediante un array pasamos los valores que necesarios para definir los campos. Asignamos un id, el valor del campo (que deberemos rescatar de la base de datos), la etiqueta del campo y como algo opcional vamos a añadir un tooltip que muestre un pequeño texto explicativo al pasar por encima.
Si bien nosotros estamos viendo cómo definir campos de texto, lo normal será que quieras usar de diferentes tipos combinando entre texto, checkbox, etc. Para más información, puedes consultar la página de documentación técnica sobre las funciones de WooCommerce para campos que hay disponibles.
Por el momento deberíamos poder ver dentro del producto la nueva pestaña a la izquierda en primer lugar dentro de los datos del producto y a la derecha los dos nuevos campos de tipo texto que hemos creado, con sus correspondientes globos de ayuda. Si no fuera así revisa tu código porque algo no debe estar correcto.
Guardando campos personalizados
La última parte relacionada con el backend es la relativa a guardar los campos, ya que los hemos creado, pero la información que escribamos no se guardará. Por eso lo que vamos a hacer es guardarlos en los metadatos del producto usando woocommerce_process_product_meta_simple para los productos simples y woocommerce_process_product_meta_variable para los variables, dependiendo de dónde estemos mostrando la pestaña.
// Guardamos datos de los campos personalizados
function guardar_datos( $product_id ){
$keys = array(
'libro_isbn',
'libro_publicacion'
);
foreach ( $keys as $key ) {
if ( isset( $_POST[$key] ) ) {
update_post_meta( $product_id, $key, $_POST[$key] );
}
}
}
add_action( 'woocommerce_process_product_meta_simple', 'guardar_datos' );
add_action( 'woocommerce_process_product_meta_variable', 'guardar_datos' );En un array metemos todos los id de los campos personalizados y luego hacemos un foreach para actualizar los metadatos del producto. Esto nos permite guardar los datos para que después estén disponibles a la hora de cargar los campos de nuevo.
Front-end
Ahora es el momento de mostrar el contenido en la página del producto visible para los usuarios. WooCommerce nos permite acceder a cualquier parte de la página del producto, sin embargo ya que estamos personalizando iremos un paso más allá y vamos a crear una nueva pestaña en la zona inferior junto al resto. El proceso será similar en cuanto a concepto a cómo lo hemos hecho en el backend: primero creamos el tab y luego el panel con el contenido personalizado.
Creando la pestaña pública
Usaremos woocommerce_product_tabs para dar de alta la pestaña y a través de un array de nuevo, le pondremos un título, diremos la posición que queremos y asignaremos un callback que definiremos posteriormente.
// Creamos la pestaña en la página pública del producto
function libro_tab_front( $tab ) {
$tab['physical_tab'] = array(
'title' => __( 'Libro', 'dominiotraduccion' ),
'priority' => 40,
'callback' => 'libro_tab_contenido_front'
);
return $tab;
}
add_filter( 'woocommerce_product_tabs', 'libro_tab_front', 40, 1 );Mostrando el contenido personalizado
Ahora es el momento de definir la función a la que se hará callback desde la pestaña anterior. Esta función será sencilla, simplemente rescataremos comprobaremos si los campos personalizados tienen contenido y en caso afirmativo los mostraremos con un echo.
// Mostramos el contenido dentro de la pestaña
function libro_tab_contenido_front() {
global $product;
if ( $product->get_meta( 'libro_isbn' ) != '' ) :
echo '<div class="clase-personalizada">'. __( 'ISBN:', 'dominiotraduccion' ) . ' ' . $product->get_meta( 'libro_isbn' ) . '</div>';
endif;
if ( $product->get_meta( 'libro_publicacion' ) != '' ) :
echo '<div class="clase-personalizada">'. __( 'Año de publicación:', 'dominiotraduccion' ) . ' ' . $product->get_meta( 'libro_publicacion' ) . '</div>';
endif;
}Dentro de nuestra función debemos llamar primero al objeto $product que es el que contiene los datos guardados del producto. Luego lo usamos para extraer los metadatos de nuestros campos personalizados.
Recuerda que en desarrollo web no hay un único modo fijo de hacer las cosas, así que siéntete libre de adaptar lo que hemos visto a tu caso concreto. Si quieres más información consulta la documentación para desarrolladores de WooCommerce.
Deja una respuesta