Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Cómo Hacer que Destaquen Más los Atributos de Producto de WooCommerce

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Oscar Abad Folgueira (you can also view the original English article)

Final product image
What You'll Be Creating

Los atributos de producto de WooCommerce son una característica realmente útil, pero pero defecto están un poco escondidos abajo, en la sección Información Adicional. Dependiendo de tu tema, puede que no sean visibles hasta que el usuario haga click en una pestaña, lo que significa que muchos usuarios no pueden verlos.

A veces es mejor tenerlas listadas en la parte superior de la página de producto junto con las categorías de producto. En este tutorial te mostraré cómo mover los atributos de los productos de la ficha de Información Adicional a la parte superior de la página.

Qué Vas a Necesitar

Para seguir este tutorial vas a necesitar:

  • Una instalación de desarrollo de WordPress.
  • Un editor de código.
  • WooCommerce instalado y activado.
  • Productos añadidos - yo he importado el contenido de demostración que viene con WooCommerce; para más detalles sobre como hacer esto, mira esta guía.
  • Añadir uno o más atributos de producto (el atributo color no funciona de la forma estándar con el contenido de demostración).
  • Un tema compatible con WooCommerce activado - yo estoy usando Storefront.

Para añadir atributos cerca de la parte superior de la página de producto, haremos lo siguiente:

  1. Crear un vacío plugin y activarlo.
  2. Mira el código fuente de WooCoomerce para identificar el filtro que controla el añadido de atributos de producto a las pestañas hacia la parte inferior de la página.
  3. Añade una función enganchada a ese filtro para eliminar la pestaña para atributos.
  4. Mira de nuevo los ficheros fuente para identificar el gancho que pone el contenido en a parte superior de la página.
  5. Enganchar una función en su lugar.

Vamos a empezar echando un vistazo a la forma en que nuestros atributos de producto se mostrarán por defecto. He creado un atributo llamado Size (tamaño) y le he añadido tres valores: pequeño, medio y grande. Aquí se muestra en la sección Información Adicional en la parte superior de una página de producto:

WooCommerce product page - default with product attributes tab

Queremos mover estos atributos de producto desde la parte inferior de la pantalla a la izquierda en la parte superior, debajo de la descripción del producto.

Crear el Plugin

En tu directorio wp-content/plugins, crea un nuevo fichero. Yo he llamado al mío woocommerce-prominent-product-attributes.php. Abre ese fichero y añádele lo siguiente:

Guarda tu fichero y vete a la pantalla de Plugins en la administración de tu WordPress. Activa el plugin.

Código Fuente de WooCommerce: Mostrar Atributos de Producto

Vamos a empezar identificando la función y el gancho que se usan para mostrar los atributos de los productos. Esto conlleva revisar algunos de los archivos de plugin:

  1. La plantilla que muestra la página simple de producto es woocommerce/templates/single-product.php.
  2. En ese fichero hay una llamada get_template_part() al fichero content-single-product.php.
  3. En ese fichero hay una acción llamada woocommerce_after_single_product_summary. Hay tres funciones enganchadas a ella: la primera que tenemos que mirar es woocommerce_output_product_data_tabs().
  4. Puedes encontrar la función woocommerce_output_product_data_tabs() en  in woocommerce/includes/wc-template-functions.php.
  5. La función utiliza wc_get_template() para recuperar la parte de plantilla, en este caso wooocommerce/templates/single-product/tabs/tabs.php.
  6. En ese archivo (que estamos recibiendo, lo prometo!) hay una variable llamada $tabs, que se define como apply_filters ('woocommerce_product_tabs', array());.
  7. Para eliminar la pestaña de atributos de producto necesitamos crear una función que la table y enganche al filtro woocommerce_product_tabs.

¡UF! Llegaremos a esto al final.

Eliminar Atributos de Producto de las Pestañas Usando un Filtro

Por suerte, la documentación de WooCommerce nos facilita una guía sobre cómo eliminar las pestañas usando filtros, lo que nos ayuda a hacer más fácilmente nuestro trabajo.

En el fichero de tu plugin, añade este código:

Esta función tiene $tabs como su objeto debido a que es la variable con la que estamos trabajando. Esta elimina la pestaña 'additional_information' del array de valores almacenados por la variable $tabs. Date cuenta de que he utilizado una número de prioridad de 100 cuando engancho mi función para asegurar que se ejecutará después de las funciones que añaden las pestañas en primer lugar.

Guarda tu fichero y refresca tu página de producto:

WooCommerce product page - product attributes tab removed

Aquí tenemos la pestaña eliminada. Ahora tenemos que añadir los atributos de producto en la parte superior de la página.

Encontrar el Sitio en el Código para Añadir Atributos

Una vez más tenemos que identificar en el código donde tenemos que añadir una función para mostrar os atributos de los productos. En otras palabras, necesitamos encontrar un action hook.

Volviendo al fichero content-single-product.php, hay un hook llamado woocommerce_single_product_summary que lo usan siete funciones que cada una muestra un poco de información sobre el producto.

  • el fichero
  • la clasificación
  • el precio
  • el extracto (e.j. la descripción corta)
  • el botón añadir al carrito
  • metadatos
  • enlaces de compartir

Quiero añadir mis atributos en la sección para metadatos, por lo que vamos a echar un vistazo a la función que los muestra.

La función está en el fichero wc_template_functions.php y usa wc_get_template() para llamar a otro fichero incluido woocommerce/templates/single/product/meta.php.

En el fichero meta.php, está el código que muestra los metadados sobre el producto, con e hook woocommerce_product_meta_start antes y en el hook woocommerce_product_meta_end después de el. Por lo que podemos utilizar uno de esos dos hooks para mostrar nuestros atributos de producto. Vamos a usar el último, hará que los atributos aparezcan después de las categorías y etiquetas.

Escribir un Función para Mostrar los Atributos de Producto

Duplicar el Código Provisto por WooCommerce

Para mostrar una lista de los términos de taxonomía de nuestro producto, podemos utilizar la función que nos proporciona WooCommerce llamada list_attibutes(). Encontrarás esta función en el fichero templates/single/product/tabs/additional-information.php.

Añade esto en el fichero de tu plugin:

Nota que no necesitas usar una prioridad ya que WooCommerce no tiene ninguna otra función enganchada a este hook de acción.

Ahora refresca tu página de producto:

WooCommerce product page - product attributes with product short description in table

Ahora se muestran los atributos. Usan una interface como pestaña con el tema Storefront que es como está configurado por defecto en la pestaña Información Adicional, y que la salida HTML usa una tabla que proporciona el diseño predeterminado.

Alternativa Sin Usar una Tabla

Esa tabla no es ideal: debería ser mejor para mostrar la lista de atributos del producto, para emparejar la lista de categorías de producto encima de ella. Vamos a hacer eso.

WooCommerce almacena atributos como taxonomías personalizadas. El slug que se crea para cada uno de sus valores de atributo está precedida por un sufijo pa_ cuando el atributo se almacena en la base de datos.

Sin embargo, no guarda estas taxonomías en la tabla wp_term_taxonomy y la tabla wp_terms como lo harías cuando registres una taxonomía personalizada normal en WordPress. En cambio, WooCommerce crea tablas para los atributos, lo que significa que los datos se almacenan de forma distinta. Esto significa que tenemos que adoptar un enfoque más indirecto para acceder a la etiqueta de cada taxonomía al mostrar esa lista.

En tu función de tutsplus_list_attributes(), quita las dos líneas dentro de la función. Sustitúyelos con este código:

Aquí esta lo que hace el código:

  • Define la variable global $product (que es un objeto de nuestra función).
  • Utiliza $product->get_attributes() para obtener todos los atributos de este producto.
  • Si no hay ninguno, no hace nada.
  • Si hay atributos, abre un bucle foreach por cada uno de ellos.
  • Con el fin de obtener la etiqueta, utiliza las funciones wp_get_post_terms() y get_taxonomy() para obtener la matriz de datos relativos a esta taxonomía para este post.
  • Luego saca el 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().

Ahora los atributos se muestran en una lista:

WooCommerce product page - product attributes with product short description in list

Mucho mejor!

Crédito: Gracias a Isabel Castillo por el código para mostrar la etiqueta del atributo.

Resumen

Mover los atributos de producto en la página del producto lleva un poco de trabajo profundizando en el código de fuente WooCommerce e identificar los archivos de plantilla, ganchos y funciones que intervienen en la visualización de atributos de los productos.

Encontrar el filtro que controla que las pestañas se salida, hemos sido capaces de quitar la pestaña de información adicional, que quita los atributos de la parte inferior de la pantalla. Luego al añadir una nueva función a un gancho más arriba en la página, fuimos capaces de mostrarls donde queríamos.

Si estás interesado/a en incorporar otras funciones WooCommerce en tu sitio, revisa lo que está disponible en la tienda.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.