Hola, buenos días,
Veréis, quiero que los campos de "Descripción", "Información Adicional" y "Valoraciones", de la ficha de los productos, sólo se muestre su contenido si doy clic en cada uno de ellos, de lo contrario no quiero que se muestre ningún texto, es decir, sólo se verán los nombres de las pestañas y, que sea el visitante, quien decida dar clic sobre cada pestaña si quiere ver el contenido. Es posible hacer esto y cómo puede hacerse?. Mi plantilla es Storefront con el tema hijo Child Theme Storefront.
Agradeciendo vuestra colaboración, les saludo atentamente.
Guillermo.
URL del sitio: Contenido solo visible a usuarios registrados
Hola Guillermo.
Veo que ya se muestra como tu indicas, por defecto descripción siempre se mostrara.
¿ Lo que quieres es que no muestre la descripción ? personalmente no lo haría ya que estas privando al usuario de una descripción de tu producto y puede confundir al cliente y privar de contenido para el SEO.
Una cosa que puedes hacer es mostrar las tablas en horizontal, para eso añade el siguiente código en el archivo style.css que encontraras en la carpeta del tema hijo:
.product .woocommerce-tabs ul.tabs { width: 100%; float: none; margin-right: 5.8823529412%; } .woocommerce div.product .woocommerce-tabs ul.tabs { list-style: none; padding: 0 0 0 1em; margin: 0 0 1.618em; overflow: hidden; position: relative; } .woocommerce div.product .woocommerce-tabs ul.tabs::before { position: absolute; content: ' '; width: 100%; bottom: 0; left: 0; border-bottom: 1px solid #d3ced2; z-index: 1; } .woocommerce div.product .woocommerce-tabs ul.tabs li { border: 1px solid #d3ced2; background-color: #ebe9eb; display: inline-block; position: relative; z-index: 0; border-radius: 4px 4px 0 0; margin: 0 -5px; padding: 0 1em; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: #fff; z-index: 2; border-bottom-color: #fff; } .woocommerce div.product .woocommerce-tabs ul.tabs li::after, .woocommerce div.product .woocommerce-tabs ul.tabs li::before { border: 1px solid #d3ced2; position: absolute; bottom: -1px; width: 0; height: 0; content: ' '; } .woocommerce div.product .woocommerce-tabs ul.tabs li::before { left: -6px; border-bottom-right-radius: 4px; border-width: 0 1px 1px 0; box-shadow: 2px 2px 0 #ebe9eb; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active::before { box-shadow: 2px 2px 0 #fff; } .woocommerce div.product .woocommerce-tabs ul.tabs li::after { right: -6px; border-bottom-left-radius: 4px; border-width: 0 0 1px 1px; box-shadow: -2px 2px 0 #ebe9eb; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active::after { box-shadow: -2px 2px 0 #fff; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { display: inline-block; padding: .5em 0; font-weight: 700; color: #515151; text-decoration: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: inherit; text-shadow: inherit; }
Un saludo
Hola Pepe,
Muchas gracias por tu ayuda. Verás, es que la descripción a que hago referencia, es diferente a la que se muestra al lado del producto y que en realidad es la que más interesa al visitante, ya que en ella se muestran las características principales, el nombre de lo que está comprando, precio y, alguna información más. Sin embargo, en el campo de "Descripción" al que me refiero, se detallan otros aspectos, tales como, de qué material está hecho, quienes lo hacen, quiénes son, de qué país y pueblo es originaria dicha artesanía, etc.. Es por esto, que que estos campos sólo se muestren si el visitante da clic en cada uno de ellos, ya que si con la descripción e imagen de la parte es superior le motiva, pase luego a mirar el resto de información. Espero que me haya hecho entender. También lo quiero así, por dar un diseño más limpio en la ficha. Por lo tanto, te vuelvo a preguntar, es posible hacer que no se muestre la información en esos tres campos hasta que el visitante no dé clic en cada uno de ellos?. Muchas gracias por gran disposición.
Un Saludo.
Guillermo.
Hola Guillermo.
Puedes eliminarlas o por ejemplo cambiar el orden, es decir que muestre primero por ejemplo la información adicional, pero siempre se mostrara información a no se que lo elimines.
Revisa lo siguiente:
-> https://docs.woocommerce.com/document/editing-product-data-tabs/
Un saludo
Hola Pepe,
Mira, como alternativa que me sugieres, quiero entonces que se muestre inicialmente la información del campo "Información Adicional", pero al aplicar el código para reordenar las pestañas, según las instrucciones del enlace que me has indicado, se genera un error, no sé si es porque no lo estoy colocando en la línea que corresponde, te describo a continuación las líneas del fichero funtions.php del tema hijo y dime por favor, debajo de cuál línea debo colocar el código. Gracias.
<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
add_filter( 'woocommerce_get_breadcrumb', '__return_false' );
// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:
// END ENQUEUE PARENT ACTION
El error que me muestra es el siguiente:
syntax error, unexpected '/', expecting end of file
Quedo a la espera de tu respuesta.
Un saludo.
Guillermo.
Hola Guillermo.
Añade lo siguiente al final del archivo fuctions.php:
add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 ); function woo_reorder_tabs( $tabs ) { $tabs['reviews']['priority'] = 10; // Reviews first $tabs['description']['priority'] = 15; // Description second $tabs['additional_information']['priority'] = 5; // Additional information third return $tabs; }
La ultima linea que tengas libre del archivo, lo añades tal cual lo tienes en el código que te pase.
Hola Pepe,
Ya he procedido a realizar tus indicaciones y ha funcionado perfectamente, muchas gracias, eres un crack.
Que tengas una excelente tarde.
Guillermo.
Hola Guillermo.
Jejeje, Gracias amigo pero nosotros solo indicamos el camino, el trabajo lo realizas tu 😉
Ya sabes cualquier consulta que tengas nos encontraras por aquí 😉
Cerramos el tema.
Un saludo