Cómo mostrar categorías y subcategorías en WooCommerce

Mantener los productos de su sitio web de comercio electrónico bien clasificados y organizados puede facilitar a los clientes la búsqueda de los artículos que necesitan. Sin embargo, puede resultar problemático para grandes sitios de comercio electrónico con un gran número de categorías de productos.

Sin embargo, es posible sacar el máximo partido de la Crear categorías y subcategorías para ordenar ordenadamente los productos, mejorando así la experiencia de compra de los clientes y facilitándoles la navegación por la tienda. Esto no puede ignorarse.

En el artículo guía paso a paso Cómo obtener la tienda WooCommerce Mostrar categorías y subcategorías de productosque ayudan a sus sitios web a mejorar la experiencia del usuario.

si WooCommerce Novato no obstante veterano del comercio electrónicoTodos estos consejos son útiles.

Imagen [1] - WooCommerce Store Product Category Guide: How to show, hide and optimise product categories

?Por qué mostrar categorías de productos en WooCommerce?

Hay varias razones importantes para mostrar categorías de productos en su tienda WooCommerce:

  • Fácil de navegar: Una categorización clara permite a los clientes encontrar rápidamente los productos que necesitan, lo que mejora la experiencia de compra.
  • Mejor organización de los productosUna categorización razonable puede hacer que el dise?o de la tienda sea más ordenado y mejorar la eficacia de la navegación de los usuarios.
  • ampliar SEO clasificacionesEl uso de palabras clave relevantes en el nombre de la categoría ayuda al sitio web a posicionarse mejor en las páginas de resultados de los motores de búsqueda (SERPs).
  • Ayuda a la comercialización y promociónMostrar categorías de productos para comodidad de los clientes también ayuda a los comerciantes a promocionar mejor productos o eventos específicos y a aumentar las tasas de conversión.

Cómo mostrar categorías, subcategorías y productos por defecto en WooCommerce

Al configurar una tienda WooCommerce, es habitual elegir la opción "Mostrar categorías/subcategorías y productos" para que los visitantes puedan seleccionar productos directamente desde la página de inicio, o filtrar productos haciendo clic en la página de categorías de productos.

Formas de mostrar categorías en tu tienda WooCommerce

Ir a Configuración de WooCommerce

  • salir para WooCommerce → Configuración

Seleccionar opciones de productos

  • golpe (en el teclado) ofertas pesta?as

Ajustar la configuración de la pantalla

  • opción demuestre opciones (como en la configuración de programas informáticos)
  • existe La página de la tienda muestra responder cantando Visualización de categorías por defecto seleccione Visualización simultánea de categorías y productos(Mostrar ambos)

Guardar cambios

  • golpe (en el teclado) Guardar cambios para aplicar la nueva configuración
Imagen [2] - WooCommerce Store Product Category Guide: How to show, hide and optimise product categories
Imagen [3] - WooCommerce Store Product Category Guide: How to show, hide and optimise product categories

advertencia

En caso necesario Visualización personalizada de las categorías de WooCommerceSe puede modificar con el código funciones.php (ubicado en la carpeta Temas). Para editar antes Página web de respaldopara evitar que se produzcan accidentes.

Cómo mostrar categorías de productos en WooCommerce

WooCommerce proporciona woocommerce_categoría_producto() que muestra el producto antes de emitir la función Clasificación o subclasificación. Esta función es conectable, lo que significa que puede utilizarse en el tema reescribir para personalizar la pantalla.

Pasos:

  • mostrar (una entrada) funciones.php papeles(situado en la carpeta Temas).
  • Inserte el siguiente códigoque se utiliza para mostrar las categorías de productos en la página de la tienda:
function woocommerce_get_product_category_of_subcategories( $category_slug ){
  $terms_html = array();
  $taxonomy = 'producto_cat';

  $parent = get_term_by( 'slug', $category_slug, $taxonomy );

  $children_ids = get_term_children( $parent->term_id, $taxonomy );


  foreach($children_ids as $children_id){
        $term = get_term( $children_id, $taxonomy );
        $term_link = get_term_link( $term, $taxonomy );
        if ( is_wp_error( $term_link ) ) $term_link = '';

        $terms_html[] = '<a href="/es/' . esc_url( $term_link ) . '/" rel="tag" class="' . $term->slug . '">' . $term-&gt;nombre . '</a>';
  }
  return '<span class="subcategories-' . $category_slug . '">' . implode( ', ', $terms_html ) . '</span>';
}

Análisis de código:

  • get_queried_object_id(): Obtiene el ID de categoría de la consulta actual.
  • get_terms( 'producto_cat', $args ): Obtenga las subcategorías de esta categoría.
  • woocommerce_subcategory_thumbnail( $term ): Muestra las miniaturas de las categorías.
  • get_term_link( $term ): Obtenga enlaces de categorías y muéstrelos en el front end.
  • add_action( 'woocommerce_before_shop_loop', 'woocommerce_product_category', 100 );: Montar la función en el Página de la tienda WooCommerce antes del ciclo de la lista de productospara que las categorías aparezcan en primer lugar.

Efecto:

El código se a?adirá al página de la tienda Mostrar las categorías de productos permite a los usuarios navegar por las categorías antes de seleccionar productos específicos, lo que mejora la experiencia de navegación.

Imagen [4] - WooCommerce Store Product Category Guide: How to show, hide and optimise product categories

Cómo listar subcategorías de categorías de productos de WooCommerce

Se pueden utilizar funciones personalizadas, mediante la función slug de la categoría de producto principal para obtener las subcategorías de WooCommerce y mostrarlas como hipervínculos.

Procedimiento operativo:

  1. mostrar (una entrada) funciones.php papeles(situado en la carpeta del tema actual).
  2. Inserte el siguiente códigose utiliza para obtener la lista de subcategorías de una categoría determinada:
function woocommerce_get_product_category_of_subcategories( $category_slug ){
  $terms_html = array();
  $taxonomy = 'producto_cat';

  $parent = get_term_by( 'slug', $category_slug, $taxonomy );

  $children_ids = get_term_children( $parent-&gt;term_id, $taxonomy );


  foreach($children_ids as $children_id){
        $term = get_term( $children_id, $taxonomy );
        $term_link = get_term_link( $term, $taxonomy );
        if ( is_wp_error( $term_link ) ) $term_link = '';

        $terms_html[] = '<a href="/es/' . esc_url( $term_link ) . '/" rel="tag" class="' . $term->slug . '">' . $term-&gt;nombre . '</a>';
  }
  return '<span class="subcategories-' . $category_slug . '">' . implode( ', ', $terms_html ) . '</span>';
}

Análisis de código:

  • get_term_by( 'slug', $category_slug, $taxonomy ): Obtiene el objeto de la clasificación especificada.
  • get_term_children( $parent->term_id, $taxonomy ): Obtiene los IDs de todas las subcategorías bajo la categoría.
  • (matemática) ergódica $children_ids::
    • Obtener las subcategorías de la plazo Objeto.
    • Obtener enlaces de categoría get_term_link( $term, $taxonomy ).
    • generando <a> Hipervínculos para mostrar los nombres de las subcategorías.
  • Volver al código HTMLmostrar todas las subcategorías separadas por comas.

Efecto:

Este código se puede utilizar en la página de la tienda WooCommerce Visualización dinámica de las subcategorías de una categoría de productosLos usuarios pueden examinar y filtrar los productos fácilmente.

Cómo mostrar las descripciones de las categorías de WooCommerce

Disponible en WooCommerce Ficheros de plantillas para páginas de detalles de productos A?adir código para mostrar la información de la descripción de la categoría a la que pertenece el producto.

Descripción del código:

  1. pasar (una factura o inspección, etc.) wp_get_post_terms() Obtener el producto actual información clasificada.
  2. Iterar a través de la matriz categórica, obtener y emitir la categórica Descripción.

Ejemplo de código:

global $post;
$args = array( 'taxonomy' =&gt; 'product_cat', );
$terms = wp_get_post_terms($post-&gt;ID,'product_cat', $args);

$count = count($terms);
if ($count &gt; 0) {

  foreach ($terms as $term) {
        echo '<div class="woocommerce-get-product-category">';
        echo $term-&gt;descripción.
        echo '</div>';
 
  }
 
}

Efecto:

Este código estará en el Página de detalles del producto Mostrar la categoría del producto información descriptivaque facilita al usuario la comprensión de los detalles de la clasificación.

Cómo crear un plugin personalizado para mostrar las categorías de productos de WooCommerce

En WooCommerce, esto se puede hacer normalmente a?adiendo lo siguiente al archivo funciones.php para a?adir código que muestre las categorías y subcategorías de productos. Si el archivoNo quiero cambiarlo. funciones.php.

Solución: Crear un plugin personalizado

Envolver la funcionalidad en un plugin puede Evite modificar los archivos del temaNo pasa nada. Activar o desactivar la función en cualquier momentomás flexible.

Paso 1: Crear carpeta de plugins

entrar en wp-content/plugins cree en él una nueva carpeta, por ejemplo:
361ventas-productos-categorías-en-archivos

Paso 2: Crear el archivo del plugin

  • En la carpeta que acabamos de crear, elCrear un nuevo archivo PHPllamado:361venta-producto.php
  • Abra ese archivo y a?ada la información básica del plugin:
<?php
/**
 * Nombre del plugin: WooCommerce Product Category.
 * Descripción: Mostrar categorías de WooCommerce en las páginas de productos de WooCommerce.
**/

Paso 3: A?adir función de visualización de categorías

A?ada el siguiente código al archivo del plugin para obtener y mostrar las categorías y subcategorías de productos:

function 361sale_product_subcategories( $args = array() ) {

    }
add_action( 'woocommerce_before_shop_loop', '361sale_product_subcategories', 50 );

Ahora a?ade el siguiente fragmento de código a la función:

$parentid = get_queried_object_id();

$args = array(
    'parent' =&gt; $parentid
);

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

if ( $terms ) {

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

        foreach ( $terms as $term ) {

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

                woocommerce_subcategory_thumbnail( $term ).

                echo '<h2>'; echo '
                    echo '<a href="/es/' .  esc_url( get_term_link( $term ) ) . '/" class="' . $term->slug . '">';
                        echo $term-&gt;nombre.
                    echo '</a>'; echo '
                echo '</h2>';

            echo '</li>';


    }

    echo '</ul>';
 
}

El código anterior primero obtiene el objeto de la consulta actual y define su ID como $parentid.

A continuación, utiliza get_terms() para buscar la categoría actual en subcategoría.

Para cada subcategoría, el código:

  • gasto o desembolso woocommerce_subcategory_thumbnail() Mostrar miniaturas de categorías
  • A?adir un hipervínculo fuera del nombre de la categoría para apuntar a la categoría de Página de archivo

Creación de archivos de estilo de plug-in

  1. En la carpeta de plugins cree css directorio (en el disco duro del ordenador)
  2. existe css para crear el directorio style.css papeles
  3. El archivo principal del plugin se llama cloudways-producto.php
  4. A?ade el siguiente código al archivo del plugin para cargar el archivo CSS::
function 361sale_product_cats_css() {


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


    wp_enqueue_style( '361sale_product_cats_css' ).

}

add_action( 'wp_enqueue_scripts', '361sale_product_cats_css' );

De esta forma, el plugin se carga correctamente style.cssPermite personalizar el estilo de visualización de la subcategoría.

Cómo mostrar las categorías de productos en la página de la tienda WooCommerce

Mostrar categorías de productos en la página de la tienda de WooCommerce es muy sencillo, sólo tienes que seguir los siguientes pasos:

  • Ir al backend de WordPressPase el ratón por encima de Apariencia Botón encendido.
  • Haga clic en "Personalizar". Opciones.
Imagen [5] - WooCommerce Store Product Category Guide: How to show, hide and optimise product categories
  • Desplácese hacia abajoEncuentre WooCommerce > Catálogos de productos.
Imagen [6] - WooCommerce Store Product Category Guide: How to show, hide and optimise product categories
  • Buscar "Mostrar página de tienda"(Visualización de la página de la tienda), haga clic en el menú desplegable y seleccione la opción "Mostrar clasificación"(Mostrar categorías).
Imagen [7] - WooCommerce Store Product Category Guide: How to show, hide and optimise product categories
  • Guardar cambiosLa página de la tienda muestra ahora las categorías de productos.
Imagen [8] - WooCommerce Store Product Category Guide: How to show, hide and optimise product categories

Esto facilita la visualización de la página de la tienda WooCommerce Clasificación de los productosoptimizando la experiencia de navegación del usuario.

Además, el una barra lateral (en software) responder cantando menú para mostrar las categorías de productos, y podrá aprender más sobre estos métodos más adelante.

Cómo mostrar las categorías de productos en la barra lateral

existe una barra lateral (en software) Mostrar categorías de productos es una gran estrategia de optimización que permite a los compradores navegar por la tienda mientras Ver siempre la categorización opcionalfacilitándoles la exploración del producto.

Método de ajuste

Imagen [9] - WooCommerce Store Product Category Guide: How to show, hide and optimise product categories
  • Buscar widgets "Categorías de productos.
  • Arrastre elWidget en la barra lateralorillay, a continuación, personaliza los ajustes.
  • Se pueden a?adir widgets adicionalesPor ejemplo, filtrado de precios, filtrado de categorías, etc., para mejorar la funcionalidad de la barra lateral.

De este modo, tras mostrar las categorías de productos en la barra lateral de WooCommerce, el cliente puede Navegación más fácil por los productos de las distintas categoríasmejorar la experiencia de compra.

Imagen [10] - WooCommerce Store Product Category Guide: How to show, hide and optimise product categories

Cómo mostrar las categorías de productos de WooCommerce en el menú

Mostrar en el menú Clasificación de los productos Es una forma intuitiva de ofrecer a los clientes una visión rápida de las categorías de productos que se venden en la tienda.

Imagen [11] - WooCommerce Store Product Category Guide: How to show, hide and optimise product categories

Método de ajuste

  • Ir al backend de WordPressViajar a Apariencia > Menú.
Imagen [12] - WooCommerce Store Product Category Guide: How to show, hide and optimise product categories
  • Haga clic en "Opciones de pantalla" en la esquina superior izquierda.y luego marque "Product Categories" (Categorías de productos).
Imagen [13] - WooCommerce Store Product Category Guide: How to show, hide and optimise product categories
  • En el panel izquierdo aparecerá la opción "Categoría de producto".Haga clic para ampliar y ver todas las categorías de la tienda.
  • Seleccione la categoría que desea a?adir al menúy luego haga clic en "A?adir al menú" Botón.
Imagen [14] - WooCommerce Store Product Category Guide: How to show, hide and optimise product categories
  • Haga clic en "Guardar menú". para completar los ajustes.
Imagen [15] - WooCommerce Store Product Category Guide: How to show, hide and optimise product categories

De este modo, las categorías de productos de la tienda WooCommerce aparecen en el menú de navegación del sitio, lo que facilita a los clientes la búsqueda y selección rápida de artículos.

Otras acciones de categorización de productos que pueden requerir las tiendas WooCommerce

En algunos casos, es necesario nestle tal vez ordenar Clasificación de productos, por ejemplo:

  • Evitar solapamientos entre clasificaciones
  • Las imágenes ya muestran claramente las categorías sin etiquetado adicional
  • Adaptar la visualización de las categorías a las necesidades específicas

He aquí algunas Acciones relacionadas con las categorías de productos de WooCommerceEsto le ayudará a gestionar las categorías de su tienda de forma más flexible.

Cómo ocultar las categorías de productos en WooCommerce

En WooCommerce, puede ocultar categorías de productos de las siguientes dos maneras:

  1. Uso de plug-ins
  2. Código de uso

Método 1: Ocultar categorías de productos con el plugin

Es posible utilizar Ocultar Categorías y Productos para WooCommerce para ocultar categorías. El plugin es de pago y cuesta $4,09/mes.

Imagen [16] - WooCommerce Store Product Category Guide: How to show, hide and optimise product categories

Después de instalar y activar el pluginLo encontrará en Opciones de WooCommerce. Visibilidad de los productos Entorno.

Imagen [17] - Guía de categorización de productos para tiendas WooCommerce: Cómo mostrar, ocultar y optimizar las categorías de productos

procedimiento

  1. entrar en WooCommerce → Visibilidad de productos → Visibilidad global.
  2. Seleccione las categorías de productos que desea ocultar.
  3. Guardar cambioslas categorías ocultas desaparecerán de la página de la tienda.

Este método es adecuado para los usuarios que no quieren cambiar el código, simple y fácil de manejar.

Cómo ocultar las categorías de productos de WooCommerce con código

También es posible ocultar categorías de productos utilizando código personalizado. Aquí hay un código de ejemplo que utiliza el obtener_término Filtros para controlar la visualización de las categorías de productos:

add_action( 'woocommerce_before_shop_loop', 'show_product_categories', 20 );

function show_product_categories() {

// Mostrar categorías de productos

echo do_shortcode( '[product_categories]' ); } }

}

Cómo ocultar el título de la categoría de producto, la cantidad de producto y ordenar por categoría en WooCommerce

Ocultar WooCommerce Producto Categoría Título

El siguiente código puede utilizarse para Ocultar título de categoría de producto::

add_action( 'init', function() {

remove_action( 'woocommerce_shop_loop_subcategory_title', 'woocommerce_template_loop_category_title', has_action( 'woocommerce_shop_ loop_subcategory_title', 'woocommerce_template_loop_category_title' ).

} );

Ocultar el número de productos en una categoría de producto WooCommerce

Si no desea que se muestre la página de categorías Número de productosPuede utilizar lo siguiente código corto para esconderse:

add_filter( 'woocommerce_subcategory_count_html', function( $markup, $category ) {

return null.

}, 10, 2 );

Ordenar por categoría Productos WooCommerce

Se puede utilizar el siguiente fragmento de código Ordenar productos WooCommerce por categoría::

add_filter( 'woocommerce_subcategory_count_html', function( $markup, $category ) {

return null.

}, 10, 2 );

Cómo configurar el tama?o de la imagen de categoría de WooCommerce

Se pueden seguir los siguientes pasos Redimensionar imágenes de categorías de WooCommerce::

  • Ir al backend de WordPressViajar a Apariencia > Personalizar.
Imagen [18] - WooCommerce Store Product Category Guide: How to show, hide and optimise product categories
  • En el panel de personalizaciónHaga clic en WooCommerce > Imágenes de producto.
Imagen [19] - WooCommerce Store Product Category Guide: How to show, hide and optimise product categories
  • En los ajustes de imagenSelección Tama?o por defecto tal vez Haga clic en "Personalizar". Ajuste manualmente el tama?o de la imagen.
Imagen [20] - WooCommerce Store Product Category Guide: How to show, hide and optimise product categories

Esto facilita el ajuste del Tama?os de las imágenes de las categorías de WooCommercepara que sea más compatible con el dise?o de la tienda.

WooCommerce Mostrar categoría de producto Problemas comunes y soluciones

Hay algunos problemas comunes que los usuarios pueden encontrar al mostrar las categorías de productos en la tienda de WooCommerce. A continuación se presentan las soluciones a estos problemas.

Problema 1: Las categorías de productos no aparecen en el menú

A veces, las categorías de productos creadas no aparecen en el Menú del sitio web Medio.

prescripción

  • entrar en Apariencia > Menú(Menús).
  • Haga clic en la esquina superior derecha del "Opciones de pantalla"(Opciones de pantalla).
  • garrapata "Clasificación de los productos"(Categorías de productos).
Imagen [21] - WooCommerce Store Product Category Guide: How to show, hide and optimise product categories
  • En la columna de la izquierda, ahora puede ver las categorías de productos. Seleccione la categoría que desea a?adir al menú y haga clic en el botón "A?adir al menú"(A?adir al menú).
Imagen [22] - WooCommerce Store Product Category Guide: How to show, hide and optimise product categories

Problema 2: No se muestran las imágenes de las categorías

A veces, las páginas de categorías de WooCommerce pueden no mostrar las imágenes de las categorías.

prescripción

  • Asegúrese de que cada clasificación ha sido Configuración de imágenes.
  • entrar en Productos > Clasificación(Productos > Categorías).
  • Haga clic en el nombre de la categoría debajo de "Editar".(Edita).
  • Desplácese hasta "Miniaturas"(Miniaturas), haga clic en el botón "Subir/a?adir fotos"(Cargar/Agregar imagen).
Imagen [23] - Guía de categorización de productos para tiendas WooCommerce: Cómo mostrar, ocultar y optimizar las categorías de productos
  • Guardar cambiosy, a continuación, actualice la página para comprobar si surte efecto.

Problema 3: Orden incorrecto de visualización de las categorías

A veces, las categorías de WooCommerce pueden mostrarse en el orden incorrecto.

prescripción

  • entrar en Productos > Clasificación(Productos > Categorías).
  • gasto o desembolso Arrastrar y soltar modo (de vida) reorder.
Imagen [24] - WooCommerce Store Product Category Guide: How to show, hide and optimise product categories

Problema 4: Visualización de categorías de productos vacías

Por defecto, WooCommerce Se mostrarán todas las categorías, incluidas las que no tienen productos.

prescripción

Si desea ocultar las categorías vacías en la sección temática funciones.php papeles A?ada el siguiente fragmento de código:

add_filter( 'woocommerce_product_subcategories_args', 'hide_empty_categories' );

function hide_empty_categories( $args ) {

$args['hide_empty'] = 1;

return $args;

}

Problema 5: Los motores de búsqueda no indexan las páginas de categorías

A veces, las páginas de categorías de WooCommerce No indexado por los motores de búsquedaEsto afecta a la clasificación SEO.

prescripción

  • Compruebe la configuración del plugin SEO(por ejemplo Yoast SEO tal vez Matemáticas de rango), asegúrese de que la página de categoría no está configurada como "noindex".
  • entrar en Ajustes > Lectura(Configuración > Lectura), asegúrese de que "Evitar que los motores de búsqueda indexen este sitio".(Disuadir a los motores de búsqueda de indexar este sitio)sin marcar.
Imagen [25] - Guía de categorización de productos para tiendas WooCommerce: Cómo mostrar, ocultar y optimizar las categorías de productos

resúmenes

Mostrar categorías y subcategorías de productos en la tienda de WooCommerce es importante para ofrecer Una experiencia de compra clara y organizada Crucial. Al clasificar los productos, los clientes encuentran más fácilmente lo que necesitan.


Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas
Servicio de atención al cliente WeChat
Servicio de atención al cliente WeChat
Tel: 020-2206-9892
QQ咨詢:1025174874
(iii) Correo electrónico: info@361sale.com
Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres
? Declaración de reproducción
Este artículo fue escrito por Banner1
EL FIN
Si le gusta, apóyela.
felicitaciones101 compartir (alegrías, beneficios, privilegios, etc.) con los demás
comentarios compra de sofás

Por favor, inicie sesión para enviar un comentario

    Sin comentarios