1

Estoy haciendo un proyecto en el cual estoy usando woocommerce y en la vista de los productos necesito crear una clase para distinguir cuando hay tres o cuatro pestañas y asi adaptar el modo responsive del sitio. En mi tema hijo quiero hacer algo como lo siguiente.

$numero_pestanas=false;
function pestanas_de_pedido_woo ($tabs) {
   $numero_pestanas=count($tabs);
}
add_action( 'woocommerce_product_tabs', 'pestanas_de_pedido_woo', 10 );
function my_body_classes( $classes ) {
  $classes[] = $numero_pestanas;
  return $classes;
}
add_filter( 'body_class','my_body_classes' );

Estoy acostumbrado a trabajar con PHP "puro" y esto es nuevo para mi, ya se que tal y como planteo el código es imposible por varias razones. Peo no hay alguna opcion? estoy muy perdido en el tema y no se como continuar. (lo quería agregar en el functions.php)

Un cordial saludo y gracias de antemano

PD: sé que se puede hacer con javascript pero prefería hacerlo con php

1 respuesta 1

1

Aplicando la cadena de filtros del hook woocommerce_product_tabs a un array vacío te devuelve las pestañas definidas para el producto actual ( es como se renderizan en el template tabs.php ).

primer intento

  • contar las tabs desde un filtro del body class y aplicar una clase CSS extra al <body>

En el filtro de clases para el <body> preguntas si es un "single product page" y agregas la nueva clase con el número al array de clases del body.

<?php

function my_body_classes( $classes ) {
  if ( is_product() ){
    $product_tabs = apply_filters( 'woocommerce_product_tabs', array() );
    $numero_pestanas = count( $product_tabs );
    $classes[] = "pestanias-{$numero_pestanas}";
  }
  return $classes;
}
add_filter( 'body_class','my_body_classes' );

En las pruebas realizadas devuelve siempre 1, con lo cual pareciera que las tabs extra ( por default tiene la de comentarios ) se agregan luego de que el tag body reciba sus clases ( el theme padre haría apply_filters( 'body_class', [] ) en el header ).


opción recomendada por woocommerce

Copiar el archivo /wp-content/plugins/woocommerce/templates/single-product/tabs/tabs.php a la carpeta del child-theme como /child-theme/woocommerce/single-product/tabs/tabs.php y editar donde se imprime el <ul> de las tabs.


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

if ( ! empty( $product_tabs ) ) : $numero_pestanas = count( $product_tabs ); ?>

  <div class="woocommerce-tabs wc-tabs-wrapper">
    <ul class="tabs wc-tabs pestanias-<?php echo $numero_pestanas;?>" role="tablist">

La "contra" que tiene esto es que si se actualiza el template de woocommerce para las tabs, hay que actualizar el archivo en el child-theme.


opción propuesta

Para no incluir el archivo tabs.php en el child-theme, buscar donde abrir y cerrar un div que contenga el número de tabs como una clase CSS.

Según este artículo la secuencia de renderizado de las tabs en un product page es:

// Tabs, upsells and related products
add_action(
  'woocommerce_after_single_product_summary',
  'woocommerce_output_product_data_tabs', 10 
);
add_action(
  'woocommerce_product_additional_information',
  'wc_display_product_attributes', 10 
);
do_action( 'woocommerce_product_after_tabs' );

add_action( 
  'woocommerce_after_single_product_summary', 
  'woocommerce_upsell_display', 15 
);
add_action( 
  'woocommerce_after_single_product_summary',
  'woocommerce_output_related_products', 20 
);

Es decir que las tabs se renderizan en el action woocommerce_after_single_product_summary con prioridad 10 y luego tenemos un action woocommerce_product_after_tabs que por el nombre es luego de imprimir las tabs. Viendo el source de tabs.php este último action se ejecuta justo antes de cerrar un div que sólo se abre cuando hay tabs, así que hay que tener cuidado de no abrir el div si no hay tabs.

function soes116586_my_tabs_count_ABRE(){
  write_log( 'afterSingleSummary' );
  $product_tabs = apply_filters( 'woocommerce_product_tabs', array() );
  $numero_pestanas = count( $product_tabs );
  write_log( $product_tabs );
  // solo si hay 1 o mas
  if ( 1 <= $numero_pestanas ){
    echo "<!-- START {$numero_pestanas} -->" . PHP_EOL;
    echo "<div class=pestanias-{$numero_pestanas}";
  }
}
function soes116586_my_tabs_count_CIERRA(){
  write_log( 'afterTabs' );
  $product_tabs = apply_filters( 'woocommerce_product_tabs', array() );
  $numero_pestanas = count( $product_tabs );
  write_log( $product_tabs );
  // solo si hay 1 o mas
  if ( 1 <= $numero_pestanas ){
    echo "<!-- END {$numero_pestanas} -->" . PHP_EOL;
    echo "</div";
  }
}

/*
// según este action en el template de single product
add_action(
  'woocommerce_after_single_product_summary',
  'woocommerce_output_product_data_tabs', 10
);
//*/
// las tabs van luego de summary con prioridad 10,
// asi que le inyectamos html con prioridad 5
add_action(
  'woocommerce_after_single_product_summary',
  'soes116586_my_tabs_count_ABRE', 5
);
add_action(
  'woocommerce_product_after_tabs',
  'soes116586_my_tabs_count_CIERRA', 10
);

12
  • Hola, gracias por tu respuesta. Me muestra un error crítico por culpa de la línea: $product_tabs = apply_filters( 'woocommerce_product_tabs', array() ); el 23 nov. 2020 a las 13:40
  • pueden ser varias cosas para probar : la mas simple es la prioridad del filter body_class, probá con add_filter( 'body_class','my_body_classes', 9999 );, sigue verificar que el snippet esté definido en functions.php ( o un include ) en el childtheme ( wp-cli eval-file puede necesitar un update del cli ), la otra que se me ocurre es que alguno de los callbacks asociados a woocommerce_product_tabs aún no exista o dependa de algo que aún no se define: esos callbacks son los que arman las tabs y apply_filters lo que hace es llamarlas en el orden establecido el 23 nov. 2020 a las 17:48
  • para debugear un hook ( ver que callbacks tiene asociado con sus prioridades ) podes probar esta función stackoverflow.com/a/26680808/1423096 o el gist gist.github.com/helgatheviking/2d9e1208a96978b2154b el 23 nov. 2020 a las 17:50
  • info extra para ver donde meter el filtro de body o buscar una opción por css o mediaquery: las tabs extra se crean por código o por plugin? el template que renderiza las tabs está siendo reemplazado por código o plugin? ( fijate en /wp-admin/admin.php?page=wc-status en la parte templates->Overrides si aparece tabs.php ) el 23 nov. 2020 a las 17:55
  • PHP Fatal error: Uncaught Error: Call to a member function has_attributes() on string in ..../wp-content/plugins/woocommerce/includes/wc-template-functions.php creo que el problema esta en woocommerce_default_product_tabs #0 .....woocommerce_default_product_tabs el 23 nov. 2020 a las 20:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.