Mejorar filtro de color en categorias

Pero ¿quieres que cambie la imagen en la ficha de producto o que en la tienda, todos los productos muestren su variante azul?

En la ficha de producto es cuestión de asignar la imagen que quieres a la variación concreta.

En la tienda (donde se ven todos los productos) puedes servirte de los parámetros de la url para recoger el color y buscar la solución con él

…/categoria-producto/hombre/?swoof=1&pa_color=azul&really_curr_tax=53-product_cat

En este caso con un $_GET[‘pa_color’] te serviría para tener el color por el que se está filtrando.

Luego con algo como esto debería servirte

if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {

	function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $deprecated1 = 0, $deprecated2 = 0 ) {
		$image_size = apply_filters( 'single_product_archive_thumbnail_size', $size );
		global $product;
		if( isset( $_GET['pa_color'] ) && $product->is_type( 'variable' ) )
		{
			$color_filtro 			= $_GET['pa_color'];
			$variations 			= $product->get_available_variations();
			$imagen_color_filtro 	= false;
			foreach( $variations as $variation )
			{
				if( $variation['attributes']['attribute_pa_color'] == $color_filtro )
				{
					$imagen_color_filtro = $variation['image']['url'];
				}
			}

			return "<img src='".$imagen_color_filtro."' />";
		}
	}
}

Realmente de $variation[‘image’] puedes sacar muchos más parametro y podrías hacerlo más elegante con una función que te de la id de la imagen utilizando su url y luego llamar a un
wp_get_attachment_image( $image_id, $image_size, '', array() );

Espero que te sirva 😉

• Esta respuesta fue modificada hace 6 años, 5 meses por soleguia.

Buenas, prueba con esto.
He hecho unos cambios y he añadido comentarios.

if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {
    
        function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $deprecated1 = 0, $deprecated2 = 0 ) {
            $image_size = apply_filters( 'single_product_archive_thumbnail_size', $size );
            global $post;
            global $product;
            // si hay parametro de filtro por color
            // y el producto es variable
            if( isset( $_GET['pa_color'] ) && $product->is_type( 'variable' ) )
            {
                // valor del parámetro
                $color_param 			= $_GET['pa_color'];
                // lo convierto en array por si son varios colores
                $color_filtro           = explode( ",", $color_param );
                // variaciones del producto
                $variations 			= $product->get_available_variations();
                $imagen_color_filtro 	= false;
                foreach( $variations as $variation )
                {
                    $attr_color = $variation['attributes']['attribute_pa_color'];
                    // comprueba el color/es del filtro
                    // y pasa la imagen
                    if( in_array( $attr_color, $color_filtro ) )
                    {
                        $imagen_color_filtro = $variation['image']['url'];
                    }
                }
    
                return "<img src='".$imagen_color_filtro."' />";
            } else if ( has_post_thumbnail() ) {
                // si no hay filtro de color
                // o el producto no es variable
                // muestra la imagen normal
                $props = wc_get_product_attachment_props( get_post_thumbnail_id(), $post );
                return get_the_post_thumbnail( $post->ID, $image_size, array(
                                                                        'title' => $props['title'],
                                                                        'alt' => $props['alt'],
                                                                        ) 
                        );
            }
        }
    }

A ver si acertamos con ello y luego hago una entrada en el blog, jejeje 😉

Me alegro mucho de haberte ayudado y tomo nota, nunca se sabe cuando uno puede necesitar un buen contacto de diseño o UX.
Un saludo 😉