WooCommerce: Convierte las pestañas de la página de producto en párrafos

En WooCommerce, la página de producto por defecto incluye pestañas como «Descripción», «Información adicional» y «Valoraciones». Si deseas eliminar estas pestañas y mostrar su contenido en formato de párrafos dentro de la página, puedes hacerlo con algunos ajustes en el código.

A continuación, te mostramos cómo lograrlo con ejemplos en PHP.

Eliminar las pestañas predeterminadas

WooCommerce permite modificar las pestañas de la página de producto mediante el filtro woocommerce_product_tabs. Para eliminarlas, puedes usar el siguiente código:

<?php
function removeProductTabs( $tabs ) {
    unset( $tabs['description'] );       // Elimina la pestaña de descripción
    unset( $tabs['additional_information'] ); // Elimina la pestaña de información adicional
    unset( $tabs['reviews'] );           // Elimina la pestaña de valoraciones
    return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'removeProductTabs' );

Este código elimina todas las pestañas de la página del producto. Ahora, necesitamos agregar el contenido en formato de párrafos.

Mostrar la descripción corta y larga en la página

Para mostrar la descripción corta y la descripción completa como párrafos dentro del contenido del producto, usa los siguientes hooks:

<?php
function displayProductDescription() {
    global $post;
    $product = wc_get_product( $post->ID );

    // Descripción completa del producto
    $fullDescription = $product->get_description();
    if ( ! empty( $fullDescription ) ) {
        echo '<div class="woocommerce-product-details__description">';
        echo '<h2>' . __( 'Descripción del producto', 'woocommerce' ) . '</h2>';
        echo '<p>' . wp_kses_post( $fullDescription ) . '</p>';
        echo '</div>';
    }

    // Información adicional (atributos)
    $attributes = $product->get_attributes();
    if ( ! empty( $attributes ) ) {
        echo '<div class="woocommerce-product-details__additional-info">';
        echo '<h2>' . __( 'Información adicional', 'woocommerce' ) . '</h2>';
        echo '<ul>';
        foreach ( $attributes as $attribute ) {
            echo '<li><strong>' . wc_attribute_label( $attribute->get_name() ) . ':</strong> ' . esc_html( implode( ', ', $attribute->get_options() ) ) . '</li>';
        }
        echo '</ul>';
        echo '</div>';
    }
}
add_action( 'woocommerce_single_product_summary', 'displayProductDescription', 20 );

Este código:

• Obtiene la descripción completa y la muestra como un párrafo dentro de la página.
• Recupera los atributos del producto y los lista en formato de puntos.

Mostrar las valoraciones como párrafos

Si deseas incluir las valoraciones en la página sin usar una pestaña, usa este código:

<?php
function displayProductReviews() {
    comments_template();
}
add_action( 'woocommerce_after_single_product_summary', 'displayProductReviews', 15 );

Esto inserta la sección de valoraciones en la parte inferior del producto, justo después de la descripción.

Con estos ajustes, hemos eliminado las pestañas predeterminadas y mostrado la información del producto en un formato más simple y accesible. Esto puede mejorar la experiencia de usuario en algunos diseños de tiendas WooCommerce.

Si deseas personalizar más el diseño, puedes agregar clases CSS y estilos para mejorar la presentación.