Mostrar la Categorías, Subcategorías y Productos en Listas Separadas en WooCommerce

WooCommerce te da algunas opciones en cuanto a lo que puedes mostrar en las páginas de archivo:

• productos
• categorías (en la página principal de la tienda) o subcategorías (en páginas de categoría)
• ambos productos y categorías.

Cuando estoy configurando una tienda, normalmente selecciono la tercera opción: productos y categorías/subcategorías. Esto significa que los visitantes de mi tienda pueden seleccionar productos de la página de inicio o refinar la búsqueda haciendo clic en un archivo de la categoría de producto.

Sin embargo, hay un problema con este enfoque: muestra las categorías/subcategorías, con ninguna separación entre los dos. Esto significa que si las imágenes de tu producto tienen dimensiones diferentes, el diseño puede parecer un poco desordenado. Incluso si tus imágenes son del mismo tamaño, si una de las líneas en la página de archivo incluye categorías y productos, la ausencia de un botón de 'Agregar a carrito' para las categorías hace que la fila se vea desordenada, ya que no todos sus elementos tienen las mismas dimensiones.

En este tutorial te voy a enseñar cómo mostrar categorías en un a lista separada antes de mostrar los productos.

Para hacer esto, sigue estos cuatro pasos:

1. Identifica el código que WooCommerce usa para mostrar las categorías y subcategorías en las páginas de archivo.
2. Crea un plugin con tu código.
3. Escribe una función para poner las categorías o subcategorías antes de la lista de productos.
4. Dale estilo.

Pero antes de empezar, necesitarás una instalación de WooCommerce con algunos productos añadidos, y categorías y subcategorías de productos configuradas.

Que Vas a Necesitar

Para seguir e tutorial, necesitarás:

• Una instalación en desarrollo de WordPress.
• Un editor de código.
• WooCommerce instalado y activado.
• Añadir productos —he importado los datos de producto de demostración que vienen con WooCommerce; para detalles de cómo hacerlo, consulta a esta guía.
• Un tema compatible con WooCommerce activado - yo estoy usando Storefront.

Antes De Empezar: Las Opciones Por Defecto

Echemos un vistazo a lo que nos da WooCommerce por defecto.

He comenzado añadiendo algunas imágenes las categorías de mis productos y subcategorías, ya que el contenido de demostración de WooCommerce no las incluye. He usado una imagen de uno de los productos para cada categoría o subcategoría, como puedes ver en la captura de pantalla:

Ahora vamos a echar un vistazo a como WooCommerce muestra las categorías de producto y productos en las páginas de archivo.

Si no lo has hecho ya, ve a WooCommerce > Ajustes, selecciona Productos y elige la opción Mostrar. En las opciones Visualización de la página de la tienda y Visualización de categoría por defecto, selecciona Mostrar categorías y productos.

Haz click en el botón Guardar los cambios para guardar tus ajustes y visita la página de la tienda. La mía tiene este aspecto:

Como ocurre, ya que tengo tres categorías de productos y mis imágenes de categoría son del mismo tamaño que mis imágenes de producto, se ve muy bien. Pero aquí tenemos uno de los archivos de la categoría de producto:

Debido a que esta categoría tiene dos subcategorías, el primer producto se muestra junto a el en una cuadrícula de tres elementos. Yo quiero hacer que mis categorías y subcategorías destaquen más y que simplemente se muestren separadas de la lista de productos. Vamos a hacerlo.

Identificar el Código que Usa WooCommerce para Mostrar Categorías y productos en Archivos

El primer paso es identificar cómo WooCommerce muestra las categorías y subcategorías. Así que vamos a profundizar en el código fuente de WooCommerce para encontrar la función que nos interesa.

El archivo que WooCommerce utiliza para mostrar páginas de archivo es archivo-product.php, que se encuentra en el directorio templates.

Dentro de ese archivo, puede encontrar este código, que muestra las categorías y productos:

1

<?php

2

    /**

3

   * woocommerce_before_shop_loop hook

4

	 *

5

	 * @hooked woocommerce_result_count - 20

6

	 * @hooked woocommerce_catalog_ordering - 30

7

	*/

8

	do_action( 'woocommerce_before_shop_loop' );

9

?>

10

11

<?php woocommerce_product_loop_start(); ?>

12

13

    <?php woocommerce_product_subcategories(); ?>

14

15

	<?php while ( have_posts() ) : the_post(); ?>

16

17

		<?php wc_get_template_part( 'content', 'product' ); ?>

18

19

	<?php endwhile; // end of the loop. ?>

20

21

<?php woocommerce_product_loop_end(); ?>

Así que hay una función woocommerce_product_subcategories() que muestra las categorías o subcategorías antes de ejecutar el bucle de salida de los productos.

La función es conectable, loque significa que podríamos reemplazarla en nuestro tema. Lamentablemente eso no funciona bastante bien como WooCommerce tiene un estilo integrado para borrar artículos, que aparecerían al principio de una fila con la opción predeterminada.

Para que en vez de eso, no se muestren las categorías y subcategorías en nuestras páginas de archivo, para que se muestren sólo los productos. Vamos a crear una nueva función que muestre las categorías o subcategorías de productos, y engancharla a la acción woocommerce_before_shop_loop, asegurándonos de que usamos una prioridad alta para que se lance después de las funciones que ya están enganchadas a la acción.

Nota: Debido a WooCommerce agrega claros a cada listado de productos de terceros, nosotros no podemos usar la función de woocommerce_product_subcategories() o una versión editada de la misma para mostrar las categorías. Esto es porque borrará la tercero, sexta (y así sucesivamente) categoría o producto en la lista, incluso cuando utilizamos esta función para mostrar categorías por separado. Podríamos intentar reemplazar eso, pero es más sencillo escribir nuestra propia función.

Así que vamos a crear un plugin que haga eso.

Crear el Plugin

En tu directorio wp-content/plugins, crear una nueva carpeta y asígnale un nombre único. Llamo a la mía tutsplus-separate-products-categories-in-archives. Dentro, crea un nuevo fichero con un nombre único. Yo estoy usando el mismo nombre: tutsplus-separate-products-categories-in-archives.php.

Abre tu archivo y añade este código:

1

<?php

2

/**

3

 * Plugin Name: Tutsplus display WooCommerce products and categories/subcategories separately in archive pages

4

 * Plugin URI: https://code.tutsplus.com/tutorials/woocommerce-display-product-categories-subcategories-and-products-in-two-separate-lists--cms-25479

5

 * Description: Display products and catgeories / subcategories as two separate lists in product archive pages

6

 * Version: 1.0

7

 * Author: Rachel McCollin

8

 * Author URI: http://rachelmccollin.co.uk

9

 *

10

 *

11

 */

Puede editar los detalles de autor ya que este plugin lo estás escribiendo tu. Guardar el archivo y activa el plugin mediante el administrador de WordPress.

Escribir Nuestra Función

Ahora vamos a escribir la función. Pero antes de empezar, desactiva el listado de categorías en las pantallas de administración. Ve a WooCommerce > Ajustes, selecciona la pestaña Productos y la opción Mostrar. Selecciona Visualizar productos en las opciones Visualización de la página de la tienda y Visualización de categoría por defecto. Guardar los cambios.

La página de la tienda ahora se verá algo como esto:

En el archivo de tu plugin, añade esto:

1

function tutsplus_product_subcategories( $args = array() ) {

2

3

	}

4

}

5

add_action( 'woocommerce_before_shop_loop', 'tutsplus_product_subcategories', 50 );

Ahora añade este código dentro de la función:

1

$parentid = get_queried_object_id();

2

3

$args = array(

4

	'parent' => $parentid

5

);

6

7

$terms = get_terms( 'product_cat', $args );

8

9

if ( $terms ) {

10

11

	echo '<ul class="product-cats">';

12

13

		foreach ( $terms as $term ) {

14

15

			echo '<li class="category">';					

16

17

				woocommerce_subcategory_thumbnail( $term );

18

19

				echo '<h2>';

20

					echo '<a href="' .  esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';

21

						echo $term->name;

22

					echo '</a>';

23

				echo '</h2>';

24

25

			echo '</li>';

26

27

28

	}

29

30

	echo '</ul>';

31

32

}

Echemos un vistazo a lo que hace esa función:

• Identifica el objeto consultado actual y lo define como $parentid. 
• Utiliza get_terms() para identificar términos con el artículo consultado actualmente como su padre. Si esta es la página principal de la tienda, devolverá a categorías de nivel superior; Si se trata de un archivo de categoría, devolverán subcategorías.
• A continuación comprueba si hay cualquier término, antes de abrir un bucle foreach y un elemento ul.
• Para cada término, crea un elemento li y luego muestra la imagen de la categoría con woocommerce_subcatgeory_thumbnail(), seguido del nombre de categoría en un enlace a su archivo.

Ahora guarda el archivo y actualiza la página principal de la tienda. Mina se parece a esto:

Se muestran las categorías, pero necesitan algo de estilo. Vamos a hacerlo.

Dar Estilo al Listado de Categoría

Para agregar estilo, necesitamos una hoja de estilo dentro de nuestro plugin, que tendremos que inyectar.

En la carpeta de tu plugin, crea una carpeta llamada css y dentro de esta, creamos un archivo llamado style.css.

Ahora, en el archivo de tu plugin, agrega esto encima de la función que ya has creado:

1

function tutsplus_product_cats_css() {

2

3

    /* register the stylesheet */

4

    wp_register_style( 'tutsplus_product_cats_css', plugins_url( 'css/style.css', __FILE__ ) );

5

6

    /* enqueue the stylsheet */

7

    wp_enqueue_style( 'tutsplus_product_cats_css' );

8

9

}

10

11

add_action( 'wp_enqueue_scripts', 'tutsplus_product_cats_css' );

Este encola correctamente la hoja de estilos que acabas de crear.

Ahora abre tu hoja de estilo y agregua el código siguiente. WooCommerce utiliza estilo mobile first, por lo que es lo que también vamos a utilizar.

1

ul.product-cats li {

2

    list-style: none;

3

	margin-left: 0;

4

	margin-bottom: 4.236em;

5

	text-align: center;

6

	position: relative;

7

}

8

ul.product-cats li img {

9

	margin: 0 auto;	

10

}

11

12

@media screen and (min-width:768px) {

13

14

	ul.product-cats {

15

		margin-left: 0;

16

		clear: both;

17

	}

18

	ul.product-cats li {

19

		width: 29.4117647059%;

20

		float: left;

21

		margin-right: 5.8823529412%;

22

	}

23

	ul.product-cats li:nth-of-type(3) {

24

		margin-right: 0;

25

	}

26

27

}

He copiado el ancho exacto y los márgenes del estilo utilizado por WooCommerce.

Ahora revise la página principal de tu tienda de nuevo. Aquí está mía:

Aquí está el archivo de la categoría Música:

Y aquí está como se ve en pantallas de menor tamaño:

Resumen

Las categorías de producto son una gran característica de WooCommerce, pero la manera en que se muestran no siempre es la ideal. En este tutorial, has aprendido cómo crear un plugin que muestra las categorías o subcategorías por separado de la lista de productos, y luego has dado estilo a tus listados de categoría.

Podrías utilizar este código para generar una lista de categorías o subcategorías en otras partes de la página (por ejemplo debajo de los productos), enganchando la función  a un gancho de acción diferente dentro del archivo de plantilla de WooCommerce.

Si actualmente tienes una tienda online que quieres extender o si estás buscando plugins adicionales para estudiar cómo se relacionan con WooCommerce, no dudes en ver qué plugins están disponibles en la Tienda de Envato.