X
Jhon Marreros Guzmán

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

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:

 

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.

 

Artículos Relacionados

Categorías: Plugins
Etiquetas: mejoraswoocommerce

Ver comentarios (16)

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

  • 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

  • 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

    • 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.

  • 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

  • Hola, tengo una página de wordpress y queria saber como poder hacer que un atributo” MARCA” que tiene una imagen aparezca en la parte de info del producto. adjunto imagen indicando ubicacion opcional.

    Tengo este codigo pero me muestra todos los atributos y solo requiero uno que es la imagen del atributo marca

    add_action( 'woocommerce_single_product_summary', 'add_atts_to_summary' );

    function add_atts_to_summary() {
    global $product;
    wc_display_product_attributes( $product );
    }

  • Hola, necesito agregar un solo atributo especifico en donde se encuentra la informacion Meta del producto. Como puedo hacerlo?

  • Hola, hay manera de mostrar el atributo y la descripción de los términos?
    Ejemplo:
    Atributo Talla
    Términos:
    S --> descripción 20x20
    M --> descripción 30x30
    Gracias.

  • Jhon Marreros Guzmán gracias por tus videos, una pregunta estoy construyendo una web de computadores donde el cliente puede seleccionar la parte del computador ejemplo, *Ram de 8, 12, 15,* lo que yo quiero es que esos atributos vayan cambiando según el cliente seleccione la parte del pc.

Deja un comentario