Snippet PHP filtro de productos WooCommerce por Talla y Color

PorBrayan Steven Rendón Monsalve

Snippet PHP filtro de productos WooCommerce por Talla y Color.

Snippet PHP filtro de productos WooCommerce por Talla y Color. Lo que se entrega ya es nivel e-commerce PRO, y se resuelve con:

  • Estado activo real (talla/color seleccionado).
  • Construcción inteligente de URLs.
  • Combinación y deselección automática.
  • Sin plugins.
  • Todo encapsulado en UN solo snippet PHP (PHP + CSS + JS inline).

Vamos paso a paso, pero te dejo el snippet final completo, listo para pegar.

🎯 Comportamiento que vamos a lograr.

✔ Si el usuario selecciona Talla → filtra por talla.
✔ Si luego selecciona Color → URL combina talla + color.
✔ Si vuelve a hacer clic en la talla activa → la quita.
✔ Si queda solo color → filtra solo color.
✔ Si quita todo → vuelve a la tienda (home de tienda).
✔ El filtro activo queda visualmente marcado.
✔ Funciona aunque entren desde una URL filtrada.

Ejemplo de URLs:

/tienda/?filter_talla=m
/tienda/?filter_color=negro
/tienda/?filter_talla=m&filter_color=negro
/tienda/  (sin filtros)

✅ SNIPPET ÚNICO – TODO EN PHP (CSS + JS incluidos).

👉 Pégalo completo en Code Snippets o functions.php del tema hijo.

function wc_filtros_avanzados_shortcode() {

    if (!class_exists('WooCommerce')) return '';

    // Leer filtros activos desde la URL
    $talla_activa = isset($_GET['filter_talla']) ? sanitize_text_field($_GET['filter_talla']) : '';
    $color_activo = isset($_GET['filter_color']) ? sanitize_text_field($_GET['filter_color']) : '';

    // Obtener términos
    $tallas = get_terms(['taxonomy' => 'pa_talla', 'hide_empty' => true]);
    $colores = get_terms(['taxonomy' => 'pa_color', 'hide_empty' => true]);

    $shop_url = get_permalink(wc_get_page_id('shop'));

    ob_start();
    ?>

    <style>
        .wc-filtros-pro {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin: 20px 0;
        }

        .wc-filtros-pro .filtro-grupo {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }

        .wc-filtros-pro .filtro-titulo {
            font-weight: 600;
            font-size: 14px;
            margin-right: 6px;
        }

        .wc-filtros-pro .filtro-item {
            padding: 6px 14px;
            border-radius: 20px;
            border: 1px solid #dcdcdc;
            font-size: 13px;
            text-decoration: none;
            color: #333;
            transition: all .2s ease;
            background: #fff;
        }

        .wc-filtros-pro .filtro-item:hover {
            background: #111;
            color: #fff;
            border-color: #111;
        }

        .wc-filtros-pro .filtro-item.activo {
            background: #111;
            color: #fff;
            border-color: #111;
            font-weight: 600;
        }
    </style>

    <div class="wc-filtros-pro" data-shop-url="<?php echo esc_url($shop_url); ?>">

        <?php if ($tallas) : ?>
        <div class="filtro-grupo" data-tipo="talla">
            <span class="filtro-titulo">Talla:</span>
            <?php foreach ($tallas as $talla) : ?>
                <a href="#"
                   class="filtro-item <?php echo ($talla_activa === $talla->slug) ? 'activo' : ''; ?>"
                   data-tipo="talla"
                   data-valor="<?php echo esc_attr($talla->slug); ?>">
                    <?php echo esc_html($talla->name); ?>
                </a>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>

        <?php if ($colores) : ?>
        <div class="filtro-grupo" data-tipo="color">
            <span class="filtro-titulo">Color:</span>
            <?php foreach ($colores as $color) : ?>
                <a href="#"
                   class="filtro-item <?php echo ($color_activo === $color->slug) ? 'activo' : ''; ?>"
                   data-tipo="color"
                   data-valor="<?php echo esc_attr($color->slug); ?>">
                    <?php echo esc_html($color->name); ?>
                </a>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>

    </div>

    <script>
        (function(){
            const container = document.querySelector('.wc-filtros-pro');
            if (!container) return;

            const shopUrl = container.dataset.shopUrl;

            container.addEventListener('click', function(e){
                const item = e.target.closest('.filtro-item');
                if (!item) return;

                e.preventDefault();

                const tipo = item.dataset.tipo;
                const valor = item.dataset.valor;

                const params = new URLSearchParams(window.location.search);

                // Toggle del filtro
                if (params.get('filter_' + tipo) === valor) {
                    params.delete('filter_' + tipo);
                } else {
                    params.set('filter_' + tipo, valor);
                }

                // Construir nueva URL
                const query = params.toString();
                window.location.href = query ? shopUrl + '?' + query : shopUrl;
            });
        })();
    </script>

    <?php
    return ob_get_clean();
}
add_shortcode('filtros_wc_pro', 'wc_filtros_avanzados_shortcode');

🧩 Cómo usarlo.

En cualquier página (tienda, categoría, landing):

[filtros_wc_pro]

🧠 Qué hace esto a nivel PRO.

✔ Detecta filtros desde la URL
✔ Marca visualmente los activos
✔ Permite activar / desactivar filtros
✔ Combina filtros automáticamente
✔ Limpia la URL si no hay filtros
✔ UX clara (el usuario “sabe” qué está filtrando)
✔ SEO perfecto (URLs limpias e indexables)

🚀 Siguiente nivel (si quieres).

Sobre esta base puedo:

  • Convertirlo a AJAX sin recarga
  • Guardar filtros en localStorage
  • Hacer versión mobile scrollable
  • Añadir contador de productos por filtro
  • Sincronizarlo con variaciones de producto

Dime cuál y lo llevamos aún más lejos 🔥

Versión más ligera del snippet sin tanta funcionalidad:

Encapsulado en un solo snippet PHP ✅
(sin CSS externo, sin tocar el personalizador, sin depender del tema).

La idea será:

  • Shortcode en PHP
  • CSS inyectado inline solo cuando se usa el shortcode
  • Nada global, nada sucio

✅ Snippet único (PHP + CSS incluidos).

👉 Pégalo tal cual en Code Snippets o en el functions.php de tu tema hijo.

function wc_filtros_talla_color_shortcode() {

    if (!class_exists('WooCommerce')) {
        return '';
    }

    // Obtener términos
    $tallas = get_terms(array(
        'taxonomy' => 'pa_talla',
        'hide_empty' => true,
    ));

    $colores = get_terms(array(
        'taxonomy' => 'pa_color',
        'hide_empty' => true,
    ));

    if (empty($tallas) && empty($colores)) {
        return '';
    }

    $shop_url = get_permalink(wc_get_page_id('shop'));

    ob_start();
    ?>

    <style>
        .wc-filtros-horizontal {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin: 20px 0;
        }

        .wc-filtros-horizontal .filtro-grupo {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }

        .wc-filtros-horizontal .filtro-titulo {
            font-weight: 600;
            margin-right: 6px;
            font-size: 14px;
        }

        .wc-filtros-horizontal .filtro-item {
            padding: 6px 14px;
            border: 1px solid #dcdcdc;
            border-radius: 20px;
            text-decoration: none;
            font-size: 13px;
            line-height: 1;
            transition: all .2s ease;
            background: #fff;
            color: #333;
        }

        .wc-filtros-horizontal .filtro-item:hover {
            background: #111;
            color: #fff;
            border-color: #111;
        }
    </style>

    <div class="wc-filtros-horizontal">

        <?php if (!empty($tallas)) : ?>
            <div class="filtro-grupo filtro-talla">
                <span class="filtro-titulo">Talla:</span>
                <?php foreach ($tallas as $talla) : ?>
                    <a class="filtro-item"
                       href="<?php echo esc_url($shop_url . '?filter_talla=' . $talla->slug); ?>">
                        <?php echo esc_html($talla->name); ?>
                    </a>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

        <?php if (!empty($colores)) : ?>
            <div class="filtro-grupo filtro-color">
                <span class="filtro-titulo">Color:</span>
                <?php foreach ($colores as $color) : ?>
                    <a class="filtro-item"
                       href="<?php echo esc_url($shop_url . '?filter_color=' . $color->slug); ?>">
                        <?php echo esc_html($color->name); ?>
                    </a>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

    </div>

    <?php
    return ob_get_clean();
}
add_shortcode('filtros_wc', 'wc_filtros_talla_color_shortcode');

🧩 Cómo usarlo:

En Gutenberg, bloque Shortcode:

[filtros_wc]

Nada más.
El CSS solo se carga donde esté el shortcode.

⚙️ Cómo escalarlo (muy fácil):

➕ Agregar otro atributo (ej: marca):

Duplica el bloque y cambia:

'taxonomy' => 'pa_marca'

y:

?filter_marca=

🧠 Notas importantes (arquitectura limpia):

✔ No contamina estilos globales
✔ No depende del tema
✔ Compatible con SEO
✔ URLs indexables
✔ Mantiene rendimiento
✔ Fácil de portar entre sitios

🔥 Mejora PRO (opcional):

En el siguiente paso puedo:

  • Resaltar el filtro activo
  • Mantener selección combinada (talla + color)
  • Convertirlo a AJAX
  • Hacerlo responsive “scroll horizontal” en móvil

Dime cuál quieres y lo construimos sobre esta base 👌

Una versión más ligera y separada:

un snippet, sin plugins, usando shortcode + URLs de WooCommerce, y además quedará horizontal y compacto.

Abajo te dejo una solución lista para producción y luego te explico cómo ajustarla.

🎯 Objetivo del snippet.

  • Mostrar tallas y colores en horizontal
  • Que sean clickeables
  • Al hacer clic:
    • Redirige a una nueva URL
    • Muestra productos filtrados por talla o color
  • Compatible con WooCommerce + Gutenberg

1️⃣ Requisitos previos (IMPORTANTE).

Antes de pegar el código, revisa esto en WooCommerce:

  1. Ve a Productos → Atributos
  2. Asegúrate de que:
    • Talla tenga slug: talla → taxonomía: pa_talla
    • Color tenga slug: color → taxonomía: pa_color
  3. Marca:
    ✅ Usar para filtros de navegación

2️⃣ Snippet: Shortcode de filtros horizontales.

📍 Pega esto en functions.php de tu tema hijo
o en Code Snippets (recomendado)

function shortcode_filtros_talla_color() {

    if (!class_exists('WooCommerce')) return '';

    $tallas = get_terms(array(
        'taxonomy' => 'pa_talla',
        'hide_empty' => true,
    ));

    $colores = get_terms(array(
        'taxonomy' => 'pa_color',
        'hide_empty' => true,
    ));

    $shop_url = get_permalink(wc_get_page_id('shop'));

    ob_start();
    ?>

    <div class="wc-filtros-horizontal">

        <?php if (!empty($tallas)) : ?>
            <div class="filtro-grupo">
                <span class="filtro-titulo">Talla:</span>
                <?php foreach ($tallas as $talla) : ?>
                    <a class="filtro-item"
                       href="<?php echo esc_url($shop_url . '?filter_talla=' . $talla->slug); ?>">
                        <?php echo esc_html($talla->name); ?>
                    </a>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

        <?php if (!empty($colores)) : ?>
            <div class="filtro-grupo">
                <span class="filtro-titulo">Color:</span>
                <?php foreach ($colores as $color) : ?>
                    <a class="filtro-item"
                       href="<?php echo esc_url($shop_url . '?filter_color=' . $color->slug); ?>">
                        <?php echo esc_html($color->name); ?>
                    </a>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

    </div>

    <?php
    return ob_get_clean();
}
add_shortcode('filtros_wc', 'shortcode_filtros_talla_color');

3️⃣ CSS para que quede horizontal y compacto.

📍 Pega esto en:
Apariencia → Personalizar → CSS adicional

.wc-filtros-horizontal {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.filtro-grupo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filtro-titulo {
    font-weight: 600;
    margin-right: 5px;
}

.filtro-item {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
}

.filtro-item:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

✔ Horizontal
✔ Ocupa poco espacio
✔ Estilo tipo e-commerce moderno

4️⃣ Cómo usar el shortcode.

En cualquier página, bloque HTML o bloque Shortcode de Gutenberg:

[filtros_wc]

📌 Ideal para:

  • Página de tienda
  • Categorías
  • Landing pages
  • Home

5️⃣ Qué hace exactamente al hacer clic.

Ejemplo de URL generada:

/tienda/?filter_talla=m
/tienda/?filter_color=negro

WooCommerce:

  • Lee el parámetro
  • Filtra productos automáticamente
  • Mantiene SEO (URLs indexables)

6️⃣ BONUS: combinar talla + color automáticamente.

WooCommerce combina filtros solo con URL, por ejemplo:

/tienda/?filter_talla=m&filter_color=rojo

Si luego quieres:

  • guardar selección
  • hacer AJAX
  • o activar/desactivar filtros

👉 ahí ya entramos en JS (siguiente nivel).

7️⃣ Conclusión.

✔ No dependes de Gutenberg
✔ No necesitas plugins
✔ Shortcode limpio y reutilizable
✔ UX clara y SEO-friendly
✔ Escalable a más atributos (marca, material, etc.)

Servicios o productos disponibles:

Categorías de la tienda:

Pagina web Cali Servicio de diseño de sitios web en Ecuador desde Colombia. Diseño de tiendas virtuales en Cúcuta

Categorías de blog:

Últimas 100 Entradas de blog de 443 publicadas:

Para ver todas las entradas ingrese al Blog en el menú principal.

Páginas de mi sitio:

Entradas relacionadas:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *