• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Plugins / Atributos como parte de la descripción del producto en WooCommerce

Atributos como parte de la descripción del producto en WooCommerce

Atributos como parte de la descripción del producto en WooCommerce

[ hace 9 meses ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

mejoras woocommerce

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Cuando agregas atributos a un producto estos se muestran en un tab de Información Adicional, en este artículo veremos cómo quitar ese tab y mostrar los atributos de productos en la descripción.

 

Resultado Final

Al final obtendremos algo similar a lo que se muestra en la siguiente imagen:

Mover atributos del tab información adicional

 

Código para mostrar los atributos en la descripción

Puedes agregar el siguiente código como parte del archivo functions.php de tu tema hijo o usando algún plugin de Snippets.

add_filter( 'woocommerce_product_tabs', 'dcms_remove_tab_additional_information' );
function dcms_remove_tab_additional_information( $tabs ){
  unset($tabs['additional_information']);
  return $tabs;
}

add_action('woocommerce_before_add_to_cart_quantity', 'woocommerce_product_additional_information_tab');
// add_filter('woocommerce_product_additional_information_heading', '__return_empty_string' );

En el código anterior:

  • La primera parte del código oculta el tab de Información Adicional, que es donde se muestran los atributos del producto por defecto.
  • La segunda parte agrega el contenido de información adicional, dada por la función woocommerce_product_additional_information_tab() en un hook de la pantalla de detalle de producto.
  • El último código que esta comentado puedes eliminar el título que aparecerá por defecto sobre la tabla de atributos.

 

Conclusión

Como has podido comprobar, puedes cambiar la forma en que se muestran los atributos en WooCommerce, y en lugar de que se muestren en un Tab de Información Adicional, se muestren directamente como parte del contenido del producto.

 

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores:

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Mover el precio de variaciones de producto en WooCommerceMover el precio de variaciones de producto en WooCommerce
  • Campo de texto para escribir en productos WooCommerceCampo de texto para escribir en productos WooCommerce
  • Tabs a acordeón en página de productos de WooCommerceTabs a acordeón en página de productos de WooCommerce
  • Guía visual de Hooks para StoreFront y WooCommerceGuía visual de Hooks para StoreFront y WooCommerce
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Leonardo

    7 enero, 2023

    Hola mucha gracias por el código recomiendas algún plugin que haga eso

    • Jhon Marreros Guzmán

      7 enero, 2023

      Hola, no he trabajado con plugins que hagan eso, pero seguro que encuentras alguno. Saludos.

  2. LEO

    8 enero, 2023

    hola eres un crack me ha servido de mucho una pregunta y mil gracias si quiera colocarlo ddespues del nombre o del precio que codigo o funcion podria colocar .como tengo un producto variable me sale primero esas opcion y despues los atributos por ello quiero colocarlo despues del nombre del nombre o precio.
    muy agradecido Jhon

    • Jhon Marreros Guzmán

      9 enero, 2023

      Hola, revisa este artículo y usa alguno de los hooks que necesites para cambiar la posición: https://decodecms.com/guia-visual-de-hooks-para-storefront-y-woocommerce/
      Saludos.

  3. LEO

    10 enero, 2023

    GRACIAS JHON ME HA SERVIDO MUCHO TU CODIGO HE PODIDO COLOCARLO YA EN CUALQUIER LUGAR, PERO HE TENIDO EL INCONVENIENTE DE QUE LOS ATRIBUTOS TODOS ME QUEDAN CON ENLACE HACIA EL MISMO PRODUCTO LA VERDA NO LO ENTIENDO EN EL VIDEO A TI NO TE QUEDAN CON VINCULO, te envio el enlace del producto como se ve con el enlace cada atributo

    • Jhon Marreros Guzmán

      11 enero, 2023

      Hola, sin este código los atributos que has agregado deberían verse en el tab, allí también te ocurre lo mismo?, revisa esto primero.

  4. leo

    10 enero, 2023

    john no se si me pudireras audar con codigp para omitir punteros o enlaces para la informacion adicional
    la verda soy novato en cms estoy aprendiendo no se como organizar pues me da error
    (woocommerce_product_additional_information_tab’)
    pointer-events: none;

    MIl gracias

    • Jhon Marreros Guzmán

      11 enero, 2023

      Hola, usa el inspector de código para detectar qué clase o construcción de clases usar y luego agrega el código CSS al archivo style.css de tu tema hijo o desde Apariencia > Personalizar > CSS, allí también puedes agregar código, revisa: https://decodecms.com/usar-el-inspector-de-codigo-para-modificar-un-theme-wordpress/

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Ocultar Widgets en dispositivos móviles

Interceptar correos enviados en WordPress

Qué son los Plugins Dependientes en WordPress

Mostrar el nombre del archivo que esta usando un tema sin usar plugins

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados