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

Crea un blog para cada categoría o departamento en tu tienda WooCommerce

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Final product image
What You'll Be Creating
Final product image
Lo que vas a crear

Si estás administrando una tienda WooCommerce que también cuanta con un blog, podrías decidir mantener tu blog totalmente independiente de tu tienda, con sus propias categorías y contenido. Pero para una mejor integración con tu tienda, podría ser buena idea crear entradas de blog que se relacionen con las categorías de tus productos.

Para ello, deberás agregar la taxonomía de categoría de producto a tus habituales entradas, crear algunas entradas con esas categorías de productos y, a continuación, mostrar las entradas de blog en las páginas de archivo de la categoría de producto en tu tienda.

La buena noticia es que WooCommerce te proporciona ganchos de acción y filtros que puedes usar para hacerlo.

¡Así que empecemos!

Lo que vas a necesitar

Para continuar, necesitarás lo siguiente:

  • Una instalación en desarrollo de WordPress
  • Un editor de código
  • WooCommerce instalado y activado
  • Productos agregados a tu tienda (he importado los datos de productos ficticios que vienen con WooCommerce, para obtener detalles de cómo hacer esto, consulta esta guía)
  • Un tema compatible con WooCommerce activado (yo estoy usando Storefront)

Aquí está mi tienda inicial:

WooCommerce store - front page

Crear nuestro plugin

Voy a crear un plugin para hacer esto, ya que es una mejor práctica que si lo agregas a tu tema. Así que comienza creando un archivo en tu directorio wp-content/plugins. He llamado al mío tutsplus-woocommerce-category-blog.php.

Abre el nuevo archivo y añade las líneas de apertura:

Edita el código anterior para reflejar el hecho de que este es tu plugin, y guarda tu archivo de plugin. Ahora actívalo en tu sitio.

Comprobar si WooCommerce está activado

No quiero que se ejecute ningún código de este plugin si WooCommerce no está activado en este sitio. La mejor manera de comprobar que WooCommerce está activado es comprobar si existe el filtro woocommerce. Si es así, añadiré todas las llamadas add_action() aquí, y esto activará todas las funciones de mi plugin.

Añade esto a tu plugin:

Añadir categorías de productos a las entradas

El siguiente paso consiste en registrar la taxonomía product_cat para el tipo de entrada post. Para ello, utiliza la función register taxonomy for object type().

Añade esto a tu plugin:

Esto añade la taxonomía product_cat, que WooCommerce utiliza para las categorías de productos, a las entradas del blog. Ten en cuenta que no lo he enganchado a una acción, dado que ya está hecho en mi comprobación para WooCommerce.

Ahora, si echas un vistazo a tu pantalla de administración, verás que tienes dos taxonomías para las entradas, ambas llamadas Categorías:

Two category taxonomies for posts

Esto es un poco confuso, así que vamos a cambiar la etiqueta utilizada en el menú de administración para las categorías de productos. Para hacerlo WooCommerce nos proporciona un filtro que podemos usar llamado woocommerce_taxonomy_args_product_cat.

Así que añade la siguiente función a tu plugin:

Esto cambiará el nombre de la taxonomía de product_cat a Categorías de producto en el menú.

Actualiza la pantalla de administración y compruébalo:

Product categories correctly labelled in the admin menu

Eso debería reducir un poco la confusión (aunque encontrarás que no la elimina por completo, ya que no es posible cambiar la etiqueta en Edición rápida, que vamos a usar en breve).

Nota: En su lugar, podrías decidir eliminar la taxonomía de categoría estándar. En ese caso, utiliza la función register_taxonomy() para registrarla para un array vacío de tipos de post, lo que la elimina eficazmente.

Ahora, cuando añadas una entrada, podrás asignarle categorías de productos. La forma de hacerlo dependerá de si tu sitio está usando el editor Gutenberg o no, ya que las categorías de productos WooCommerce aún no funcionan con Gutenberg.

Si tienes habilitado Gutenberg, tendrás que añadir las categorías de productos mediante el enlace de Edición rápida situado bajo el nombre de la entrada en la pantalla principal de las Entradas:

Adding a product category in quick edit

Asegúrate de no confundir las dos taxonomías llamadas Categoría aquí, no hay manera de cambiar el nombre de las categorías de productos en Edición rápida.

Si estás usando el editor clásico, puedes añadir categorías de productos a tus entradas mediante a través de la pantalla de edición de entradas:

Adding product categories to a postclassic editor

Es probable que con el tiempo, WooCommerce se vuelva compatible con Gutenberg, y esta situación cambie.

Ahora crea algunas entradas y asígnales distintas categorías de productos.

Mostrar entradas en la página de archivo de categoría de producto

El segundo paso es mostrar esas entradas en el archivo de categoría de producto. Para ello, crea un loop usando WP_Query y luego usando el gancho de acción woocommerce_after_shop_loop, que WooCommerce ejecuta después de generar la salida de los productos en las páginas de archivo.

Si quieres echar un vistazo a este gancho, echa un vistazo al archivo templates/archive-product.php en WooCommerce. Si lo prefieres, es posible que quieras usar un gancho diferente para generar tus entradas de blog en un lugar distinto.

Configurar la función

Crea una nueva función en el archivo de tu plugin, asegurándote de que tenga el nombre que usaste al engancharlo anteriormente al gancho woocommerce_after_shop_loop:

Ahora vamos a rellenar esa función.

Comprobar que estamos en un archivo de categoría de producto

En primer lugar, agrega una etiqueta condicional para comprobar si estamos en un archivo de categoría de producto, ya que no quieres que las entradas de blog se muestren en la página principal de la tienda o en la página de búsqueda. Dentro de la función, agrega esto:

Ahora tu código solo se ejecutará en las páginas de archivo de las categoría de producto.

Identificar la actual categoría del producto

A continuación, entre los paréntesis de la comprobación condicional, agrega una línea para obtener el objeto consultado actual, es decir, la categoría de producto actual:

Ahora podemos usar esa variable cuando establezcamos los argumentos de nuestra consulta. A continuación, añade esto:

Esto define nuestros argumentos de consulta, ejecuta la consulta y comprueba si tiene mensajes. A continuación, necesitamos agregar un loop dentro de esa instrucción if:

Esto abre una nueva etiqueta de sección y muestra las entradas de blog dentro de una etiqueta de artículo (article). Asegúrate de utilizar wp_reset_postdata() al final para restablecer la consulta.

Así es como se verá tu función completa:

Ahora guarda el archivo de tu plugin y comprueba la página de archivo de una categoría de producto en la que hayas añadido entradas. En mi archivo para la categoría Clothing, si me desplazo hacia abajo pasando más allá de los productos, se muestran mis entradas:

Blog posts displayed on a category archive page

Ahora tienes las últimas entradas de tu blog para la categoría de producto mostrándose en tu página de archivo.

Resumen

Tener un blog que esté integrado con los departamentos de tu tienda puede ayudarte a vender más productos y hacer que tu blog sea más relevante para los clientes. En este tutorial, has aprendido a agregar entradas de blog a las páginas de archivo de categorías, proporcionando a tus clientes contenido extra.

No olvides que la naturaleza de código abierto de WordPress también lo convierte en una gran opción para mejorar tus habilidades de programación. Sigue algunos de nuestros otros tutoriales de WooCommerce aquí en Envato Tuts+, o echa un vistazo a algunos de los excelentes plugins de eCommerce disponibles para la venta en CodeCanyon.

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.