Agregar Microdatos en campos de productos en WooCommerce

[ 26 marzo 2019 ] [ Autor: Jhon Marreros Guzmán ] [ Plugins - Avanzado] [ ]

En un artículo anterior vimos cómo añadir campos personalizados en productos de WooCommerce, sin embargo no detallamos cómo agregar para estos campos adicionales los datos estructurados o microdatos, en este artículo veremos cómo realizar esto.

Generalidades

Usaremos el plugin Advanced Custom Fields para agregar el campo personalizado adicional para el producto, agregaremos un campo llamado Marca. En la siguiente imagen vemos como se ha creado el campo de marca.

Si tienes dudas sobre cómo llenar este campo para cada producto y cómo mostrarlo en el front-end de tu sitio revisa el artículo: Cómo añadir campos personalizados en productos de WooCommerce.

Agregando valores para la marca

Al ingresar al detalle de un producto verás que aparece un campo adicional de marca, tal como se muestra en la siguiente imagen.

Microdatos por defecto para un Producto

WooCommerce crea microdatos usando Json, para nuestro ejemplo definiremos el microdato adicional “brand” para un producto de acuerdo a Schema.org

Por ejemplo el siguiente código muestra algunos microdatos en formato Json:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "ItemList",
  "url": "http://encurso/wordpress_5/producto/vneck-tee/",
  "numberOfItems": "100",
  "itemListElement": [{
      "@type": "Product",
      "image": "http://encurso/wordpress_5/wp-content/uploads/2019/02/vneck-tee.jpg",
      "url": "http://encurso/wordpress_5/producto/vneck-tee/",
      "name": "Camiseta de cuello en V"
    },{
      "@type": "Product",
      "name": "..."
    }
  ],
    "offers": {
      "@type": "Offer",
      "price": "18"
    }
    ...
}
</script>

A este código Json será necesario agregar “brand” con el nombre de la marca para un determinado producto.

Puedes comprobar el json de microdatos generados viendo el código HTML en la página de detalle de producto.

Código para agregar Microdatos adicionales al Producto

El siguiente código agrega el microdato de marca a los microdatos ya existentes en el producto.


add_filter( 'woocommerce_structured_data_product', 'dcms_product_microdata', 10, 2 );

function dcms_product_microdata( $markup, $product ){
	if ( function_exists('get_field')){
		if ( get_field('marca')!='' ){
			$markup['brand'] = get_field('marca');			
		}
    }
    return $markup;
}

En el código anterior:

Usamos un hook de filtro llamado woocommerce_structured_data_product el cual hace referencia a la función dcms_product_microdata
La función acepta dos parámetros, sólo modificaremos el $markup que es un array en donde se guarda los microdatos
Comprobamos si la función get_field del plugin ACF existe
A través de esta función obtenemos el valor del campo marca para un producto determinado
Agregamos el valor obtenido en un nuevo elemento de array llamado brand
Finalmente retornamos el array modificado

Puedes agregar este código en el archivo functions.php de tu child theme o como parte del código de un plugin.

Resultado final

Como resultado obtendremos el código Json con el microdato de marca al final.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "ItemList",
  "url": "http://encurso/wordpress_5/producto/vneck-tee/",
  "numberOfItems": "100",
  "itemListElement": [{
      "@type": "Product",
      "image": "http://encurso/wordpress_5/wp-content/uploads/2019/02/vneck-tee.jpg",
      "url": "http://encurso/wordpress_5/producto/vneck-tee/",
      "name": "Camiseta de cuello en V"
    },{
      "@type": "Product",
      "name": "..."
    }
  ],
    "offers": {
      "@type": "Offer",
      "price": "18"
    }
    ...
    "brand": "Affliction"
}
</script>

Conclusión

Como has podido ver, siempre que agregues campos personalizados a tus productos es recomendable igualmente agregar estos campos como microdatos siguiendo las recomendaciones de schema.org.

¿Aún con dudas?, en el siguiente video se explica los puntos tratados anteriormente.