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.
