Página de producto de WooCommerce sin pestañas, como en Amazon

¿Te acuerdas que siempre digo que para no equivocarte al vender lo mejor es imitar a los más grandes como Amazon?

Y ¿te has fijado en que la página de producto de Amazon no tiene pestañas de información?

Pues sí, mientras que en cualquier instalación estándar y tema para WooCommerce, donde siempre tendrás por separado pestañas para la descripción amplia del producto, los detalles y las valoraciones.

En Amazon no hay pestañas, tienes una sección a continuación de la otra, a medida que navegas hacia abajo por la página.

¿Qué tipo de navegación es mejor, por pestañas o todo seguido?

Pues no sabría decirte en realidad…

  • Si no quieres arriesgar y quieres aprovechar la experiencia de usuario mejor sin pestañas, pues todo el mundo sabe comprar en Amazon.
  • Si tus clientes están acostumbrados a tener la información por pestañas, en páginas más cortas pero más concretas, deja el ajuste de WordPress mediante pestañas.

Y sino, siempre puedes hacer una prueba para comprobar qué estructura convierte más, cómo consigues más ventas.

Me he decidido, no quiero pestañas

Si te decides por no mostrar pestañas, sencillo, solo tienes que añadir un código que las hace desaparecer, y la información de tus productos se mostrará toda seguida, como en Amazon.

El código es este:

/* Productos WooCommerce sin pestañas */
function woocommerce_output_product_data_tabs() {
$product_tabs = apply_filters( 'woocommerce_product_tabs', array() );
if ( empty( $product_tabs ) ) return;
echo '<div class="woocommerce-tabs wc-tabs-wrapper">';
foreach ( $product_tabs as $key => $product_tab ) {
?>
<div id="tab-<?php echo esc_attr( $key ); ?>">
<?php
if ( isset( $product_tab['callback'] ) ) {
call_user_func( $product_tab['callback'], $key, $product_tab );
}
?>
</div>
<?php 
}
echo '</div>';
}

El código anterior debes añadirlo de una de estas dos maneras, a elegir:

Cuando guardes los cambios tus páginas de producto ya no tendrán pestañas, se mostrará toda la información seguida.

Como verás, fácil y efectivo.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(3 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

9 comentarios en “Página de producto de WooCommerce sin pestañas, como en Amazon”

  1. Hola Fernando.
    Muchas gracias por este aporte. Lo he intentado poner en una web a través del plugin Code Snippets y me dice que hay un error en la línea 3:

    $product_tabs = apply_filters( 'woocommerce_product_tabs', array() );

    ¿Sabes que puede ocurrir?.
    Un saludo.

  2. Disculpa Fernando,
    La línea 3 no es la que te comenté ya que cuenta también el <?php como una línea, esto es lo que indica el programa:

    El fragmento de código ha sido desactivado debido a un error en la línea 3:
    No se puede redeclarar la función

    woocommerce_output_product_data_tabs

    Un saludo.

      1. Hola Fernando lo primero darte las gracias por el aporte, me pasa igual que enrique error El fragmento de código ha sido desactivado debido a un error en la línea 3:

        No se puede redeclarar la función woocommerce_output_product_data_tabs.

        Al ver que no se podía redeclarar me di cuenta que mi tema tiene esa función puede ser que le pase lo mismo a enrique.

        Un saludo

        Posdata tu formulario no cumple la RGPD si necesitas un código para que salga el check de la política de privacidad dímelo y te lo mando.

  3. Gracias Fernando por tu código y explicaciones.
    Cargando en forma de plugin de funciones me da error (Tema Astra):
    «Cannot redeclare woocommerce_output_product_data_tabs() (previously declared in /home/w4issoclothing/public_html/wp-content/plugins/woocommerce/includes/wc-template-functions.php:1544) in /home/dominio/public_html/wp-content/plugins/mis-funciones/functions.php on line 40»
    Pero directamente cargado en el functions.php del tema sí.

    Pero tengo una duda. A diferencia de tu ejemplo del post a mi me desaparecen las pestañas y también los encabezados. Y me gustaría mantener los encabezados
    Saludos

    1. Es una función pensada para un tema, debe ir siempre en el tema 🙂

      Sobre lo de los encabezados no está pensado para eso, es raro, lo he probado con varios temas (TwentyTwenty, Astra y Proteo) y sin problemas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba Ir al contenido