Soporte » Plugins y Hacks » WooCommerce » Descripción de producto como desplegable

  • Al entrar en un producto muestra la descripción. El título «Descripción» parecería estar enlazado pero a nada específico. Según la dirección a la que apunta es «el nombre del producto #tab-description

    Me gustaría mucho poder hacer de eso un desplegable. Es decir que al entrar al producto se vea el título «Descripción del producto» y al hacer clic se muestre y se vuelva a esconder la descripción… como expandir y reducir la descripción.

    Alguna idea… 😉

    • Este debate fue modificado hace 5 años, 5 meses por dafonk.

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 5 respuestas - de la 1 a la 5 (de un total de 5)
  • Hola @dafonk puedes hacerlo perfectamente con javascript (o con jQuery), lo primero que debes hacer es mediante CSS ocultar la descripción con un hidden (por ejemplo en la hoja de estilos de tu tema hijo).

    Después deberás añadir un listener «que escuche» si se hace click en el título de la descripción y ejecutar una función, por ejemplo muestra_oculta_descripcion() cuya función en javascript mirará si está oculta la descripción y en ese caso la mostrará y si está visible la ocultará.

    Este código javascript podrás ponerlo en el functions de tu tema hijo (con las correspondientes etiquetas de js) o en otro sitio donde puedas insertar javascript.

    Saludos.

    Iniciador del debate dafonk

    (@dafonk)

    Carlos,

    Muchas gracias por tu respuesta. Entiendo lo que me dices, tengo woocomerce son el tema storefront, esto ya trae un «customizador» css integrado en «Apariencia» pienso que se puede usar como el de un css de un tema hijo. También hice un functions.php que puse en la carpeta de los plugins y lo active desde el admin, archivo en el que hago los cambios de funciones..

    Entiendo lo que me dices pero de ahí a saber realizarlo es otra cosa. Estoy estudiando la web a ver si encuentro información cómo hacerlo, es decir, cómo se vería el css para ocultar la «Descripción» y ponerlo en el customizador y cómo se vería el listener en javascript para poner en el functions.php (y las etiquetas de js)

    No se si es mucho pedir si me puedes ayudar con esto… de lo contrario seguiré buscando 😉

    Saludos.

    Iniciador del debate dafonk

    (@dafonk)

    Como se ve en la página del producto hay como un menú «Descripción» con una flechita y cuando pongo el mouse sobre él cambia como si estuviese enlazado, abajo veo que apunta a:“el nombre del producto» #tab-description.

    Investigándolo con la «Herramienta para desarrolladores» de Chrome encuentro que hay un jquery en «js/jquery/jquery-migrate.min.js?ver=1.4.1″…. ahora de ahí ya no se si todo está pensado para realizar un cambio y customizarlo……o qué? Sigo investigando 😉

    Descripción tiene un id=»tab-title-description» y por ejemplo utilizando jQuery puedes «escuchar» cuando se hace click ahí con:

    $( '#tab-title-description' ).click( function() {
      console.log( 'Has hecho click en la descripción' );
    });

    Eso lo que hace es enviar un mensaje a la consola cada vez que haces click en el título.

    Teniendo en cuenta que la descripción tiene id=»tab-description» y se supone que habías ocultado dicho id con CSS, solo te queda mostrar/ocultar dicho id, que en jQuery lo tienes tan fácil como utilizar toggle

    Con esto prácticamente te he escrito el código, solo tienes que juntar dos sentencias y voilá, ya lo tienes 😉

    Iniciador del debate dafonk

    (@dafonk)

    Bueno… gracias. Para mi suena como chino básico…. ahora hay que ver si puedo aprender chino.

    Gracias

Viendo 5 respuestas - de la 1 a la 5 (de un total de 5)
  • El debate ‘Descripción de producto como desplegable’ está cerrado a nuevas respuestas.