Cómo mostrar productos de WooCommerce por categoría

Publicado: 2020-08-16

Productos de visualización de WooCommerce por categoría ¿Tiene una tienda WooCommerce y desea mostrar productos por categoría en WordPress? Esta publicación tiene una explicación detallada sobre cómo mostrar los productos de WooCommerce por categoría. Si está familiarizado con WooCommerce, sabe que las categorías de productos juegan un papel importante en la organización de sus productos para que sus clientes los muestren y accedan correctamente.

Mostrar productos de WooCommerce por categoría

Desde el primer momento, WooCommerce le brinda algunas opciones en cuanto a lo que puede mostrar en sus páginas de archivo, como productos, categorías o subcategorías o productos y categorías . Sin embargo, la mayoría de los usuarios de WooCommerce optan por la tercera opción para mostrar tanto productos como categorías/subcategorías. ordenar categorías de woocommerce

Esta opción le permitirá a su visitante seleccionar productos directamente desde la página de inicio o refinar su búsqueda haciendo clic en un archivo de categoría de producto.

Sin embargo, la principal desventaja de esto es que muestra las categorías/subcategorías juntas, sin separación entre las dos. Esto hace que el diseño se vea un poco desordenado debido a las diferentes dimensiones de la imagen.

Desde el punto de vista de un experto, incluso si sus imágenes tienen el mismo tamaño, si una de las líneas en la página de archivo incluye categorías y productos, la ausencia del botón 'Agregar al carrito' para categorías hace que esa fila se vea desorganizada, ya que no todos sus elementos tienen las mismas dimensiones.

En este breve tutorial, aprenderá a mostrar categorías en una lista separada antes de mostrar productos.

Identifique o distinga el código en WooCommerce, que se usa para generar categorías y subcategorías en páginas de archivo.
Cree un complemento personalizado para el código.
Escriba una función que coloque categorías o subcategorías antes de las listas de productos.
Cree un estilo personalizado para la salida.

a) Mostrar tanto Productos como Categorías o Subcategorías

Pasos para mostrar tanto productos como categorías o subcategorías.

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú del panel, haga clic en Menú de apariencia > Personalizar. Haz clic en la página de la tienda y selecciona WooCommerce > Catálogo de productos. En la opción Mostrar tienda , seleccione Mostrar categorías y productos . En la opción de visualización Categoría , seleccione Mostrar subcategorías y productos como se muestra a continuación:
Recuerde guardar los cambios que realice.
Este será el resultado :

b) Mostrar categoría de producto de WooCommerce

Sin embargo, puede mostrar la Categoría de producto de WooCommerce usando un fragmento de código a continuación, que debe colocarse en el archivo functions.php.

Pasos para mostrar la categoría de producto de WooCommerce

Estos son los pasos que debe seguir:

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú Panel, haga clic en Menú de apariencia > Editor de temas. Cuando se abra la página del Editor de temas , busque el archivo de funciones del tema donde agregaremos la función que mostrará la categoría de Producto de WooCommerce.
Agregue el siguiente código al archivo php :

 función woocommerce_product_category( $args = array() ) {

    $woocommerce_category_id = get_queried_object_id();

  $argumentos = matriz(

             'padre' => $woocommerce_category_id
  );

  $términos = get_terms('product_cat', $argumentos);

  si ($términos) {

             echo '<ul class="woocommerce-categories">';

             foreach ($términos como $término) {

             echo '<li class="woocommerce-product-category-page">';

            woocommerce_subcategory_thumbnail ($término);

             eco '<h2>';

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

             echo $término->nombre;

             eco '</a>';

             eco '</h2>';

             eco '</li>';

             }

             eco '</ul>';

  }

}

add_action('woocommerce_before_shop_loop', 'woocommerce_product_category', 100);

Este será el Resultado:

Sin embargo, necesita algo de CSS personalizado para mostrar bien los productos. Haremos esto más adelante en este tutorial.

Cómo funciona el código

Este código funciona simplemente usando la woocommerce_product_category() function que genera las categorías o subcategorías antes de ejecutar el bucle que genera los productos. Puede anular el tema, ya que la función es conectable.

c) Lista de subcategorías de una categoría de producto de WooCommerce

Es muy fácil obtener la subcategoría de las categorías de productos de WooCommerce mediante el uso de una función personalizada que aprovecha el slug de la categoría de producto principal.

Pasos para enumerar subcategorías de una categoría de producto de WooCommerce

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú Panel, haga clic en Menú de apariencia > Editor de temas. Cuando se abra la página del Editor de temas , busque el archivo de funciones del tema donde agregaremos la función que enumerará las subcategorías de una categoría de producto de WooCommerce.
Agregue el siguiente código al archivo php :

 función woocommerce_get_product_category_of_subcategories ($category_slug){

$términos_html = matriz();
$taxonomía = 'product_cat';
$padre = get_term_by('slug', $category_slug, $taxonomy);
$child_ids = get_term_children ($padre->term_id, $taxonomy);

foreach ($niños_ids como $niños_id){

    $término = get_term( $niños_id, $taxonomía);

    $término_enlace = get_término_enlace( $término, $taxonomía);

    if ( is_wp_error( $term_link ) ) $term_link = '';

    $terms_html[] = '<a href="' . esc_url( $term_link ) . '" rel="tag" class="' . $term->slug . '">' . $término->nombre . '</a>';
}

devuelve '<span class="subcategories-' . $category_slug . '">' . implosionar( ', ', $términos_html ) . '</span>';

}

Este será el resultado:

Cómo funciona el código.

El objeto WP_Term obtiene el padre de la categoría de producto. Luego, obtiene la ID secundaria en una matriz y, finalmente, las categorías secundarias se muestran en el HTML ejecutando un bucle a través de la matriz de ID secundaria.

d) Identificar el código que usa WooCommerce para generar categorías y productos en archivos

Antes de crear un complemento, el primer paso es definitivamente identificar cómo WooCommerce genera categorías y subcategorías. Esto significa que tenemos que buscar manualmente el código fuente de WooCommerce para encontrar la función relevante.

Para simplificarle el proceso, simplemente busque archive-product.php , que se encuentra en la carpeta de plantillas. Este es el archivo que utiliza WooCommerce para mostrar páginas de archivo. Ahora necesita encontrar el código que genera las categorías y productos:

 <?php
/**
* gancho woocommerce_before_shop_loop
*
* @hooked woocommerce_result_count - 20
* @hooked woocommerce_catalog_ordering - 30
*/

hacer_acción('woocommerce_before_shop_loop');
?>

<?php woocommerce_product_loop_start(); ?>

<?php woocommerce_product_subcategories(); ?>

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

<?php wc_get_template_part( 'contenido', 'producto' ); ?>

<?php mientras tanto; // fin del bucle. ?>

<?php woocommerce_product_loop_end(); ?>

Cómo funciona el código:

La woocommerce_product_subcategories() function genera las categorías o subcategorías antes de ejecutar el ciclo que genera los productos. La razón por la que llamé su atención sobre esta función es que es conectable, lo que significa que podemos anularla en nuestro tema.

Sin embargo, esto no funcionará ya que WooCommerce tiene un estilo incorporado para borrar elementos, que aparecerían al comienzo de una fila con la visualización predeterminada. ¿Entonces, qué debemos hacer? La respuesta es simple. Necesitamos desactivar la visualización de categorías y subcategorías en nuestras páginas de archivo para que solo se muestren los productos.

Después de esto, el siguiente paso es crear una nueva función que genere las categorías o subcategorías de productos y vincularla a la woocommerce_before_shop_loop action , asegurándonos de usar una prioridad alta para que se active después de las funciones que ya están vinculadas a esa acción.

Sin embargo, es importante tener en cuenta que WooCommerce agrega borradores a cada tercer listado de productos. Esto significa que no podemos usar la woocommerce_product_subcategories() function o una versión editada de la misma para mostrar las categorías. La explicación a esto es que esta función borrará la tercera, sexta (y así sucesivamente) categoría o producto enumerado, incluso cuando usamos esta función para mostrar categorías por separado. Esto significa que tenemos que crear una función que lo anule. Esto se puede hacer creando un complemento.

e) Creación del complemento

Primero debe crear uno nuevo y darle un nombre único en el directorio wp-content/plugins . Para este ejemplo, tenga cuidado al seguir los pasos para que pueda lograr la funcionalidad que necesitamos. Voy a usar este nombre njengah-separate-products-categories-in-archives .

Dentro de esta carpeta, debe crear un nuevo archivo, nuevamente con un nombre único. Usaré el mismo nombre también para esta carpeta njengah-separate-products-categories-in-archives.php .

Pasos para crear el complemento

Abra su archivo y agregue el siguiente código:

 <?php
/**
* Nombre del complemento: Categoría de producto de WooCommerce
* Descripción: Mostrar categorías de WooCommerce en las páginas de productos de WooCommerce

**/

Antes de escribir nuestra función, debe desactivar las listas de categorías en las pantallas de administración iniciando sesión en su sitio de WordPress y accediendo al panel como usuario administrador.
En el menú del panel, haga clic en Menú de apariencia > Personalizar. Haz clic en la página de la tienda y selecciona WooCommerce > Catálogo de productos. En la opción Mostrar tienda , seleccione Mostrar productos . En la opción de visualización Categoría , seleccione Mostrar productos .
Recuerde guardar los cambios que realice.
Este será el resultado :
Agregue esto al archivo del complemento:

 función njengah_product_subcategories ($ argumentos = matriz ()) {

}

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

Entonces necesitas agregar este código en la función:

 $parentid = get_queried_object_id();

$argumentos = matriz(

'padre' => $idpadre

);

$términos = get_terms('product_cat', $argumentos);

si ($términos) {

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

foreach ($términos como $término) {

echo '<li clase="categoría">';

woocommerce_subcategory_thumbnail ($término);

eco '<h2>';

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

echo $término->nombre;

eco '</a>';

eco '</h2>';

eco '</li>';

}

eco '</ul>';

}

Este será el resultado: Mostrar productos de WooCommerce por categoría

Como puede ver en la imagen de arriba, las categorías no están bien organizadas. Esto significa que tenemos que agregar nuestro estilo personalizado. Sin embargo, antes de eso, aprendamos cómo funciona el código.

Cómo funciona el código

La función que creamos identifica el objeto consultado actual y define su id como $parentid . Luego usa get_terms() para identificar términos con el elemento consultado actualmente como su padre. Si esta es la página principal de la tienda, devolverá las categorías de nivel superior y, si se trata de un archivo de categoría, devolverá las subcategorías.

Además, la función comprueba si hay algún término antes de abrir un bucle for each y un elemento ul . Esto significa que para cada término, crea un elemento li y luego genera la category image using woocommerce_subcatgeory_thumbnail() , seguido del nombre de la categoría en un enlace a su archivo.

Pasos para dar estilo a los listados de categorías

Estos son los pasos que debe seguir, pero para hacerlo necesitamos una hoja de estilo dentro de nuestro complemento, que necesitaremos poner en cola.

Cree una carpeta llamada CSS y, dentro de ella, cree un archivo llamado CSS. Esto debe hacerse en la carpeta del complemento para que esto funcione .
Agregue este código en la parte superior de la función que ya ha creado:

 función njengah_product_cats_css() {




/* registrar la hoja de estilo */

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




/* poner en cola la hoja de estilo */

wp_enqueue_style( ' njengah _product_cats_css' );




}




add_action('wp_enqueue_scripts', 'njengah_product_cats_css');

El siguiente paso es abrir su hoja de estilo y agregar el código a continuación. Sin embargo, es importante tener en cuenta que WooCommerce usa un estilo móvil primero, así que eso es lo que usaremos también.

 ul.product-cats li {
estilo de lista: ninguno;
margen izquierdo: 0;
margen inferior: 4.236em;
alineación de texto: centro;
posición: relativa;
}

ul.product-cats li img {
margen: 0 automático;
}


Pantalla @media y (ancho mínimo: 768 px) {

ul.producto-gatos {
margen izquierdo: 0;
Limpia los dos;
}

ul.product-cats li {
ancho: 29.4117647059%;
flotador izquierdo;
margen derecho: 5,8823529412%;
}

ul.product-cats li:nth-of-type(3) {
margen derecho: 0;
}

}

Este será el resultado:

Conclusión

En esta publicación, he resaltado diferentes formas en las que puedes mostrar los productos de WooCommerce por categoría. A partir de este breve tutorial, puede comprender por qué las categorías de productos son una gran característica en WooCommerce, pero la forma en que se muestran no siempre es la ideal.

Además, aprendió cómo crear un complemento que genere categorías o subcategorías de productos por separado de las listas de productos y cómo diseñar las listas de categorías. La parte más destacada de este tutorial es la creación del complemento personalizado que genera una lista de categorías o subcategorías en la página, conectando la función a un gancho de acción diferente dentro del archivo de plantilla de WooCommerce.

Cómo mostrar productos de WooCommerce por categoría

Mostrar productos de WooCommerce por categoría

a) Mostrar tanto Productos como Categorías o Subcategorías

Pasos para mostrar tanto productos como categorías o subcategorías.

b) Mostrar categoría de producto de WooCommerce

Pasos para mostrar la categoría de producto de WooCommerce

Cómo funciona el código

c) Lista de subcategorías de una categoría de producto de WooCommerce

Pasos para enumerar subcategorías de una categoría de producto de WooCommerce

Cómo funciona el código.

d) Identificar el código que usa WooCommerce para generar categorías y productos en archivos

Cómo funciona el código:

e) Creación del complemento

Pasos para crear el complemento

Cómo funciona el código

Pasos para dar estilo a los listados de categorías

Conclusión

Artículos similares