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.