En este post he recopilado varios snippets (trozos de código) para modificar la página de producto de WooCommerce. Es decir la página donde aparece la información detallada de cada producto.
Para usar los snippets, añádelos al final del archivo functions.php si estás utilizando un tema hijo. En caso contrario necesitarás crear un plugin.
Estos snippets te van a permitir modificar las pestañas ( tabs ). Un lugar muy importante para reunir toda la información posible del producto.
Quitar cualquiera de las pestañas
Por defecto WooCommerce trae las siguientes pestañas o tabs:
- Description, donde se muestra la descripción larga del producto
- Reviews, aquí aparecen las reseñas si las tienes activadas
- Aditional_information, muestra los atributos del producto
Si quieres desacerte de cualquiera de ellas utiliza este snippet. Borra la linea de código de aquellas pestañas que quieras conservar.
/** * Remove product tabs * */ function woo_remove_product_tab($tabs) { unset( $tabs['description'] ); // Quitar la pestaña de descripción larga unset( $tabs['reviews'] ); // Quitar la pestaña de reseñas unset( $tabs['additional_information'] ); // Quitar la pestaña de información adicional return $tabs; } add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tab', 98);
Añade una pestaña con información general
Es posible que quieras añadir una pestaña con información general de la tienda. Por ejemplo gastos de envío, métodos de pago etc. Así le puedes dar al comprador toda la información sin salir de la página.
El siguiente snippet añadirá una pestaña con la misma información en todos los productos:
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' ); function woo_new_product_tab( $tabs ) { // Adds the new tab $tabs['test_tab'] = array( 'title' => __( 'Título de la pestaña', 'woocommerce' ), 'priority' => 50, 'callback' => 'woo_new_product_tab_content' ); return $tabs; } function woo_new_product_tab_content() { // Añadir debajo el contenido de la pestaña echo '<h2>Gastos de envío</h2>'; echo '<p>Gastos de envío y devoluciones gratis para envíos nacionales.</p>'; }
Mover los productos relacionados a una pestaña
Puedes mover los productos relacionados a una pestaña. Así puedes ganar espacio para mostrar otros elementos interesantes:
// Quitar los productos relacionados de su posición original remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20); // Agregar una nueva tab add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' ); function woo_new_product_tab( $tabs ) { $tabs['related_products'] = array( 'title' => __( 'Título de la pestaña', 'woocommerce' ), 'priority' => 50, 'callback' => 'woo_new_product_tab_content' ); return $tabs; } // Añadir los productos relacionados a la pestaña function woo_new_product_tab_content() { woocommerce_related_products(); }
Cambia el número de productos relacionados
Ahora que has movido los productos relacionados a una pestaña, quizás te interese cambiar la cantidad que van a aparecer:
function woo_related_products_limit() { global $product; $args = array( 'post_type' => 'product', 'no_found_rows' => 1, 'posts_per_page' => 6, 'ignore_sticky_posts' => 1, 'orderby' => $orderby, 'post__in' => $related, 'post__not_in' => array($product->id) ); return $args; } add_filter( 'woocommerce_related_products_args', 'woo_related_products_limit' );
En la línea de código que dice ‘posts_per_page’ => 6, cambia el número por la cantidad que necesites.
Reorganiza las pestañas
Ya tienes todas tus pestañas a tu gusto. Pero quizás quieras reorganizarlas para que aparezca antes la información más importante.
add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 ); function woo_reorder_tabs( $tabs ) { $tabs['reviews']['priority'] = 5; // Reseñas primera $tabs['description']['priority'] = 10; // Descripción segunda $tabs['additional_information']['priority'] = 15; // Información adicional tercera return $tabs; }
Como puedes ver, cuanto más bajo sea el número asignado a prioridad, antes aparecerán.
Cambiar el título
Si el nombre que traen las pestañas no te convence puedes cambiarlo con este trozo de código. Solo cambia ‘Descripción’, ‘Reseñas’ y ‘Otra información’ pero dejando las comillas simples.
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 ); function woo_rename_tabs( $tabs ) { $tabs['description']['title'] = __( 'Descripción' ); // Rename the description tab $tabs['reviews']['title'] = __( 'Reseñas' ); // Rename the reviews tab $tabs['additional_information']['title'] = __( 'Otra información' ); // Rename the additional information tab return $tabs; }
¿Necesitas más pestañas?
Si necesitas añadir campos extra como:
- Vídeos
- Descargas
- Formularios de contacto
- Preguntas frecuentes
- Añadir cualquier shortcode
Entonces echa un vistazo al plugin WooCommerce Tabs Pro. Además también podrás añadir iconos y cambiar el aspecto de las tabs sin importar el tema que utilices.
Espero que te haya servido de ayuda!
photo credit: Amelia Lashes – 164/365 via photopin (license)
Muy bueno el post
¿Y para cambiar el H1 del Titulo de los Productos de Woocomerce? No sé como cambiarlos desde el codigo del plugin
se podria aplicar el codigo para agregar una nueva pestaña pero en cada producto?
Hola Nelson, si te refieres al segundo código, añade una pestaña para todos los productos con la misma información.
Buenas, respecto a la creación de una nueva pestaña. Sigo los pasos y me sale bien pero el problema es que debajo de la nueva pestaña no aparece nada, no hay ningún cuadro con lo que hemos puesto:
Gastos de envío
Gastos de envío y devoluciones gratis para envíos nacionales.
Simplemente aparece la nueva pestaña y ninguna información debajo.
¿A qué podría deberse?
Hola Samot, creo que te falta copiar parte del código.
Tengo un problema serio con la descripción corta del producto.
Queda mucho espacio entre el texto descriptivo y el botón de añadir al carrito, lo que impide que en un primer vistazo el usuario pueda acceder al botón sin tener que desplazarse hacia abajo para llegar hasta él, lo que creo puede ejercer de efecto disuasorio a la hora de estimulalrle a comprar.
Utilizo la plantilla de Storefront.
¿Puede ser porque el tamaño de la imagen impide dicho acercamiento?
Entiendo que no debería ser así, porque la imagen está optimizada para tener poco peso.
¿Es otro problema que no acierto a dar con él?
Gracias por la contestación
Hola Ana, ese tipo de problemas se solucionan fácilmente con un poco de código CSS. Si quieres que te eche una mano ponte en contacto conmigo y vemso como puedo ayudarte.
Saludos.
Hola, trucos geniales, gracias! Yo tengo la duda de cómo cambiar el nombre del epígrafe “productos relacionados” a ” a conjunto con” o algo así. ¿Es posible? Gracias
Hola Raquel, no tengo una respuesta rápida porque depende del tema que estés utilizando. Si necesitas ayuda ponte en contacto.
Saludos!
Y como hago para cambiar el texto que aparece en el tab, si por ejemplo quiero que ponga RECOMENDACIONES en lugar de DESCRIPCION ???
Qué tal Ramiro? Acabo de actualizar el post para añadir la solución a tu duda.
Saludos.