En un artículo anterior vimos cómo modificar elementos en página de producto de WooCommerce, sin embargo en la página de detalle de producto de WooCommerce también aparecen pestañas o tabs los cuales podemos personalizar a través de código.
1- Generalidades
Primero añadiremos contenido adicional en la pantalla de edición/creación de un producto usando campos personalizados de WordPress, posteriormente mostraremos este contenido en un Tab en la pantalla de detalle de producto de Woocommerce.
El resultado final será algo similar a lo que se muestra en la siguiente imagen:
2- Agregando campo personalizado
Agregaremos un campo llamado resumen en la pantalla de edición del producto a través de un campo personalizado de WordPress.
Primero asegúrate de tener habilitada la opción para mostrar los campos personalizados, puedes hacerlo ingresando a la pantalla de edición de producto.
Luego verás que aparece en la parte inferior un formulario para agregar el nombre del nuevo campo y su valor
En nuestro caso el campo tendrá el nombre de resumen
3- Código para crear el tab en el detalle de producto
Luego que has agregado el campo personalizado con su valor, necesitarás un espacio en donde mostrarlo en el detalle de producto en el front-end de tu sitio, para esto usaremos un nuevo tab.
Puedes usar el siguiente código para agregar un nuevo tab llamado resumen:
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
$tabs['resumen_tab'] = array(
'title' => __( 'Resumen', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
return $tabs;
}
function woo_new_product_tab_content() {
echo '<h2>Resumen</h2>';
echo get_post_meta( get_the_ID(), 'resumen', true );
}
En el código anterior:
- En el código usamos el hook woocommerce_product_tabs que administra los tabs
- El hook hace referencia a la función woo_new_product_tab la cual tiene como argumento el array de tabs
- Dentro de la función woo_new_product_tab agregamos un nuevo elemento al array, uno de los valores del nuevo array será una función callback
- La función woo_new_product_tab_content será el callback y es en esta función en donde se escribirá el código para mostrar el campo personalizado
- Para mostrar el campo personalizado usamos la función de WordPress get_post_meta
4- Conclusión
Woocommerce te permite administrar los tabs que se muestran en la página de detalle de producto, en este artículo aprendiste cómo agregar un tab personalizado de WooCommerce, de manera práctica y evitando el uso de plugins adicionales.
¿Aún con dudas?, en el siguiente video se detalla los puntos tratados anteriormente.
Artículos Relacionados
(2 votos, promedio: 5,00 de 5)
Cargando…
Hola, gracias por el artículo! me ha ayudado, pero tengo una duda, al hacer esto, muestra la pestaña nueva creada, pero se puede poner alguna funcion, que por ejemplo, si no hay nada escrito en el, no se muestre? Gracias
Se me olvidaba, si quieres añadir una segunda pestaña, con este metodo que habría que cambiar? Gracias!
Hola, si quieres validar que se muestre sólo si hay algún contenido, tendrías que colocar una condiciona en la función woo_new_product_tab , justo antes de que se crea el tab. Si quieres agregar otro tab simplemente agrega $tabs[‘otro_tab’], tienes que cambiar otro_tab y también el nombre de la función callback (en el ejemplo woo_new_product_tab_content) al que hace referencia y agrega igualmente una nueva función de callback.
El añadir otro tab, lo he logrado, pero lo de poner esa condición, de que solo se muestre si tiene contenido, no doy con ello. No soy muy experto. Gracias por contestarme!