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.
Eliminar el SKU o referencia
Para ciertos productos no tiene mucho sentido mostrar el número de referencia en la página de producto. En tal caso puedes ocultarlo con el siguiente snippet
add_filter( 'wc_product_sku_enabled', '__return_false' );
Cambiar el número de columnas de la galería
Debajo de la foto destacada del artículo, aparecen las miniaturas del resto de fotos del producto. Si crees que tendría un mejor aspecto cambiando el número de columnas, incluye este snippet:
add_filter ( 'woocommerce_product_thumbnails_columns', 'xx_thumb_cols' ); function xx_thumb_cols() { return 4; }
Mostrar el número de unidades vendidas del producto
Puede ser muy interesante mostrar el número de unidades vendidas, ya que es una buena señal de que un producto tiene éxito. Para hacerlo añade este snippet
add_action( 'woocommerce_single_product_summary', 'bbloomer_product_sold_count', 11 ); function bbloomer_product_sold_count() { global $product; $units_sold = get_post_meta( $product->id, 'total_sales', true ); echo '<p>' . sprintf( __( 'Unidades vendidas: %s', 'woocommerce' ), $units_sold ) . '</p>'; }
Cambiar el número y columnas de Upsells
Los upsells son sugerencia de compra para un determinado artículo. Con este snippet puedes cambiar el número de ellos que va a aparecer así como el número de columnas
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 ); add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_upsells', 15 ); if ( ! function_exists( 'woocommerce_output_upsells' ) ) { function woocommerce_output_upsells() { woocommerce_upsell_display( 3,3 ); // Muestra 3 productos en filas de 3 } }
Eso es todo! Los snippets de este post y del anterior han sido recopilados de la documentación de WooCommerce y de Businessbloomer.com.
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.
necesito ayuda css justo para ese mismo problema, ya que me gustaria cambiar el tamaño de la fuente de la descripción corta
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.
Hola, quisiera hacerle una consulta y por favor espero que puedan contestarme. Como hago para modificar la pestaña “Valoracion”, he podido modificar esa palabra, y modifique esa pestaña con el nombre de “Preguntar”. Pero al abrir la caja de comentarios dice “Tu valoracion” o “Se el primero es valorar”… como hago para modificar esas palabras, porque quiero modificarlo con ponerle “Realiza tu pregunta”, o donde dice “Tu valoracion*” cambiarlo por “Tu pregunta*”.
Espero me puedan decir como hago para modificarlo o me puedan pasar un snippets.
Saludos espero puedan responderme.
Hola Mati, es posible que cambiando la traducción te funcione. Instala un plugin como Loco Translate y busca esas cadenas de texto para cambiarlas por las que más te convengan.
Saludos.
Muy buenas!! Otra vez un gran post! Me gustaría poder modificar la pagina de producto para añadirle imagenes de producto a tamaño mas grande como hace https://www.hawkersco.com/products/gafas-sol-rubber-black-sky-one-ls en sus fichas, he conseguido esconder la glaeria y substituirla por una imagen pero las imagenes de abajo no consigo ponerlas, para que queden lo mas parecido posible al ejemplo del enlace que te he pasado.
Hola Enric, gracias por comentar. Pero la modificación que me comentas se escapa a lo que puedo resolver en los comentarios del post. Puedo presupuestar cualquier trabajo de modificación de WooCommerce si me escribes al correo.
Buenas Tardes, en que archivo se modifica este codigo ?
Puedes añadir el código en el archivo functions.php de tu tema hijo.
Buenas!! Gracias por tu saber!! Para poder poner las tabs de vertical a horizontal hay algún tipo de snippet???
Hola Sonia, me temo que no conozco ninguno. Un saludo.