Cómo hacer que los atributos de los productos de WooCommerce sean más destacados

Los atributos de los productos WooCommerce son una característica realmente útil, pero por defecto están ocultos bastante abajo de la página, en la Información Adicional sección. Dependiendo de su tema, es posible que no estén visibles hasta que el usuario haga clic en una pestaña, lo que significa que muchos usuarios no pueden mirarlos.. 

A veces es más útil tenerlos en la parte superior de la página del producto individual junto con las categorías de productos. En este tutorial, te mostraré cómo mover los atributos del producto desde el Información Adicional pestaña a la sección superior de la página.

Lo que necesitarás

Para seguir adelante, necesitarás:

• Una instalación de desarrollo de WordPress..
• Un editor de código.
• WooCommerce instalado y activado.
• Productos agregados: he importado los datos de producto ficticios que vienen con WooCommerce; para detalles de como hacer esto, vea esta guía.
• Se agregaron uno o más atributos del producto (el atributo de color incorporado con los datos ficticios no funciona de la manera estándar).
• Un tema compatible con WooCommerce activado. Estoy usando Storefront.

Para agregar los atributos más cerca de la parte superior de la página del producto individual, haremos lo siguiente:

1. Crea un plugin vacío y actívalo..
2. Mire el código fuente de WooCommerce para identificar el filtro que controla los atributos del producto que se agregan a las pestañas hacia la parte inferior de la página..
3. Agregue una función enlazada a ese filtro para eliminar la pestaña de atributos.
4. Mire los archivos de origen nuevamente para identificar el enlace que atrae el contenido en la parte superior de la página..
5. Enganche una función a eso en vez.

Comencemos echando un vistazo a la forma en que nuestros atributos de producto se mostrarán de forma predeterminada. He creado un atributo llamado tamaño y le he agregado tres valores: pequeño, mediano y grande. Aquí se muestra en el Información Adicional Sección en la parte inferior de una página de producto:

Queremos mover esos atributos del producto desde la parte inferior de la pantalla hasta la parte superior izquierda, debajo de la descripción del producto..

Creando el Plugin

En su carpeta wp-content / plugins, cree un nuevo archivo. Estoy llamando al mio woocommerce-prominent-product-attributes.php. Abra ese archivo y agregue lo siguiente:

Guarda tu archivo y ve a la Complementos Pantalla en su panel de WordPress. Activar el plugin.
Código fuente de WooCommerce: visualización de atributos del producto
Comencemos por identificar la función y el gancho utilizado para generar los atributos del producto. Esto implica recorrer algunos de los archivos de complementos:
 
La plantilla que genera la página del producto individual es woocommerce / templates / single-product.php.
 
Dentro de ese archivo, hay una get_template_part () llamar al content-single-product.php expediente.
 
En ese archivo hay una acción llamada woocommerce_after_single_product_summary. Se le enganchan tres funciones: la que debemos observar es woocommerce_output_product_data_tabs ().
 
Usted puede encontrar el woocommerce_output_product_data_tabs () funcionar en woocommerce / includes / wc-template-functions.php.
 
La función utiliza wc_get_template () para buscar otra parte de la plantilla, en este caso wooocommerce / templates / single-product / tabs / tabs.php.
 
En ese archivo (¡lo estamos logrando, lo prometo!) Hay una variable llamada $ tabs, que se define como apply_filters ('woocommerce_product_tabs', array ());.
 
Por lo tanto, para eliminar la pestaña de atributos del producto, necesitamos crear una función que elimine esa pestaña y engancharla al woocommerce_product_tabs filtrar. 
 
¡Uf! Llegamos al final.
Eliminación de atributos de productos de las pestañas mediante un filtro
Afortunadamente, la documentación de WooCommerce proporciona una guía sobre cómo eliminar las pestañas con este filtro, lo que hace que nuestro trabajo sea un poco más fácil..
En su archivo de complemento, agregue este código:
/ ** * Elimina la pestaña "Información adicional" que muestra los atributos del producto. * * @param array $ tabs WooCommerce pestañas para mostrar. * * @return matriz WooCommerce pestañas para mostrar, menos "Información adicional". * / function tutsplus_remove_product_attributes_tab ($ tabs) unset ($ tabs ['additional_information']); devuelve $ tabs;  add_filter ('woocommerce_product_tabs', 'tutsplus_remove_product_attributes_tab', 100);
Esta funcion tiene $ tabs como su objeto porque esa es la variable con la que estamos trabajando. Elimina el 'Información Adicional' pestaña de la matriz de valores almacenados por el $ tabs variable. Tenga en cuenta que he usado una alta prioridad numerada de 100 al enganchar mi función para asegurar que se active después de las funciones que agregan las pestañas en primer lugar.
Guarde su archivo y actualice la página de su producto:
Así que esa es la pestaña eliminada. Ahora necesitamos volver a agregar los atributos del producto en la parte superior de la página..
Encontrar el lugar en el código para agregar atributos
Una vez más, necesitamos identificar en qué parte del código debemos agregar una función para mostrar los atributos del producto. En otras palabras, tenemos que encontrar un gancho de acción.
Volviendo a la content-single-product.php archivo, hay un gancho llamado woocommerce_single_product_summary que es utilizada por siete funciones, cada una de las cuales genera un bit diferente de datos sobre el producto, a saber:
 
el título
 
la calificación
 
el precio
 
el extracto (es decir, la breve descripción)
 
el botón añadir al carrito
 
metadatos
 
compartir enlaces
 
Quiero agregar mis atributos en la sección de metadatos, así que echemos un vistazo a la función que genera ese.
La función está en el wc_template_functions.php archivo, y utiliza wc_get_template () para llamar a otro archivo de inclusión, woocommerce / templates / single / product / meta.php.
En el meta.php archivo, hay un código para generar metadatos sobre el producto, con el woocommerce_product_meta_start gancho antes y el woocommerce_product_meta_end enganche despues de eso Por lo tanto, podemos usar uno de esos dos ganchos para generar los atributos de nuestros productos. Usemos el último, ya que hará que los atributos aparezcan después de las categorías y etiquetas..
Escribir una función para generar atributos del producto
Duplicar el código ya proporcionado por WooCommerce
Para generar una lista de términos de taxonomía para nuestro producto, podemos usar la función que proporciona WooCommerce llamada list_attributes (). Encontrarás esta función en el templates / single / product / tabs / additional-information.php expediente.
En su archivo de complemento, agregue esto:
/ ** * Muestra los atributos del producto en la parte superior derecha de la página del producto individual. * * @param $ product * / function tutsplus_list_attributes ($ product) global $ product; $ producto-> get_attributes ();  add_action ('woocommerce_product_meta_end', 'tutsplus_list_attributes');
Tenga en cuenta que no necesita usar una prioridad ya que WooCommerce no tiene otras funciones conectadas a ese gancho de acción.
Ahora actualice la página de su producto:
Ahora se muestran los atributos. Están utilizando una interfaz similar a una pestaña con el tema del escaparate, ya que eso es lo que está configurado para el valor predeterminado Información Adicional pestaña, y el HTML de salida utiliza una tabla, que proporciona el diseño predeterminado. 
Enfoque alternativo sin una mesa
Esa tabla no es ideal: sería mejor tener una lista de atributos de productos, para que coincida con la lista de categorías de productos que se encuentran arriba. Vamos a hacer eso.
WooCommerce almacena atributos como taxonomías personalizadas. El slug que crea para cada uno de sus valores de atributo va precedido por un Pensilvania_ sufijo cuando el atributo se almacena en la base de datos. 
Sin embargo, no almacena estas taxonomías en el wp_term_taxonomy mesa y wp_terms tabla como lo haría al registrar una taxonomía personalizada normal en WordPress. En su lugar, WooCommerce crea tablas para los atributos, lo que significa que los datos se almacenan de manera diferente. Esto significa que tenemos que adoptar un enfoque más rotundo para acceder a la etiqueta de cada taxonomía al generar esa lista.
En tus tutsplus_list_attributes () Función, eliminar las dos líneas dentro de la función. Reemplácelos con este código:
producto global $; global $ post; $ attributes = $ producto-> get_attributes (); if (! $ attributes) return;  foreach ($ atributos como $ atributo) // Obtener la taxonomía. $ terms = wp_get_post_terms ($ product-> id, $ attribute ['name'], 'all'); $ taxonomía = $ términos [0] -> taxonomía; // Obtener el objeto de taxonomía. $ taxonomy_object = get_taxonomy ($ taxonomy); // Obtener la etiqueta de atributo. $ attribute_label = $ taxonomy_object-> labels-> name; // Muestra la etiqueta seguida de una lista de términos seleccionables. echo get_the_term_list ($ post-> ID, $ attribute ['name'], '
'. $ attribute_label. ':', ',', ','
'); 
Esto es lo que hace ese código:
 
Define lo global. $ producto Variable (que es un objeto de nuestra función)..
 
Usa $ producto-> get_attributes () para obtener todos los atributos de este producto.
 
Si no hay ninguno, no hace nada..
 
Si hay atributos, se abre un para cada bucle para cada uno de ellos.
 
Para obtener la etiqueta, utiliza el wp_get_post_terms () y get_taxonomy () Funciones para obtener el conjunto de datos relacionados con esta taxonomía para esta publicación..
 
A continuación, hace eco del nombre (o etiqueta) de la taxonomía (o atributo), seguido de una lista de enlaces a los archivos para cada uno de los valores usando get_the_term_list ().
 
Los atributos ahora se muestran en una lista:
Mucho mejor!
Crédito: Gracias a Isabel castillo para que el código muestre la etiqueta de atributo. 
Resumen
Mover los atributos del producto en la página del producto requiere un poco de trabajo para profundizar en el código fuente de WooCommerce e identificar los archivos de plantilla, enlaces y funciones que desempeñan un papel en la visualización de atributos del producto.
Al encontrar el filtro que controla las pestañas que se muestran, pudimos eliminar el Información Adicional pestaña, que elimina los atributos de la parte inferior de la pantalla. Luego, al agregar una nueva función a un gancho en la parte superior de la página, pudimos enviarlos a donde queríamos..
Si está interesado en incorporar otra funcionalidad de WooCommerce en su sitio, vea también qué hay disponible en el mercado.



		
			
	   
	




Código