Blog / Personalizar las pestañas de la página de producto de Woocommerce

Muchas veces no necesitamos todas las opciones que nos ofrece Woocommerce en el backend de nuestra página de producto, y puede ser que además necesitemos otras que no están. Editando el archivo functions.php de nuestro tema podemos conseguirlo. En este post aprenderemos a:

  • Crear custom fields para cualquier pestaña
  • Crear pestañas personalizadas (custom tabs)
  • Esconder las pestañas que no nos interesan.

Empecemos pues!

Añadir un custom field

1. Creamos la función que generará nuestros custom fields:

function crear_custom_fields() {
global $woocommerce, $post;
echo ‘<div class=»opciones»>’;
// Aquí van los campos
echo ‘</div>’; }

Pueden ser de muchos tipos: text, textarea, select, checkbox… Por ejemplo, para introducir una área de texto:

// Textarea
woocommerce_wp_textarea_input( array( ‘id’ => ‘_textarea’, ‘label’ => __( ‘Área de texto’, ‘woocommerce’ ), ‘placeholder’ => », ‘description’ => __( ‘Descripción del campo.’, ‘woocommerce’ ) ) );

y llamamos a la función:

add_action( ‘woocommerce_product_options_general_product_data’, ‘crear_custom_fields’ );

en este caso añadirá el campo a la pestaña «General», porque estamos utilizando «woocommerce_product_options_general_product_data». Cambiando este dato podemos apuntar a las otras pestañas, como «woocommerce_product_options_reviews«. Podemos encontrar todas las opciones en woocommerce/admin/post-types/writepanels/writepanel-product_data.php.

2. Creamos la función que guardará el contenido de nuestros campos:

// Guardar contenido
function guardado_de_contenido( $post_id ){
// Textarea
$woocommerce_textarea = $_POST[‘_textarea’];
if( !empty( $woocommerce_textarea ) ) {
update_post_meta( $post_id, ‘_textarea’, esc_html( $woocommerce_textarea ) );
}
}

y la llamamos:

add_action( ‘woocommerce_process_product_meta’, ‘guardado_de_contenido’ );

Crear una nueva pestaña

1. Con una simple función crearemos una nueva pestaña en el menú de producto:

function crear_una_nueva_tab() { ?>
<li class=»measure_tab»><a href=»#measure_tab_data»><?php _e(‘Medidas’, ‘woocommerce’); ?></a></li>
<?php
}
add_action( ‘woocommerce_product_write_panel_tabs’, ‘crear_una_nueva_tab’ );

Si queremos incluir los campos que hemos creado anteriormente en esta nueva tab, tendremos que crearlos dentro de la div con el identificador que hemos enlazado al crear la pestaña (en este caso measure_tab_data). Entonces la función crear_custom_fields quedaría:

function crear_custom_fields() {
global $woocommerce, $post;
// Text Field woocommerce_wp_textarea_input( array( ‘id’ => ‘_textarea’, ‘label’ => __( ‘Área de texto’, ‘woocommerce’ ), ‘placeholder’ => », ‘description’ => __( ‘Descripción del campo.’, ‘woocommerce’ ) ) );
}

Esconder pestañas

Ya creada nuestra pestaña con su contenido, puede ser que nos interese esconder otras pestañas. En nuestro caso, como estamos creando un catálogo sin opción a venta, esconderemos las opciones de envío y inventario:

add_action(‘admin_head’, ‘remove_tabs’);
function remove_tabs() {
global $user_level;
if ($user_level != ’10’ ) { //Si el usuario no es admin
echo ‘<style> .shipping_tab, .inventory_tab {display: none !important;} </style>’;
}
}

En este caso hemos elegido que se escondan para todos los usuarios menos el administrador.

Fuentes:

http://www.remicorson.com/mastering-woocommerce-products-custom-fields/