Swatch appears in product page but not in product grid

Hi,

before checking ” Attribute dropdown will be replaces with squared buttons”, the color swatch appears correctly in the products grid, but once I checked it now, it appears correctly inside the product page but on the products grid its appearing as text, check this: https://gyazo.com/312ffff3063cfd7b9aad64bd33986f6e

Thanks.

Hi,

You need to disable this option in Theme Settings https://gyazo.com/e7e7809dd85bbc418d0f87e467373eb2

Regards

Hi,
That didnt work, and besides I need this option because all of my swatch images are loaded from my variant’s images.
After disabling it, I cant see swatches at all anymore. I think my problem is quite different.

Thanks.

If you enable this option, you have to upload default images for all attribute terms in Products -> Attributes. Color swatches will not work when this option is turned on.

Hi Artem,

I have 1.5K attributes, This will take days of work! can’t you custom a code for me please! even if I had to pay for it.
I only want the product swatch and grid swatch to both read my the images from my variants.

Please, send us your admin access so we can see how is it configured now.

Sure, it’s on the private content.

Thanks.

And could you please send us some links where we can see products with variations that you have problem with?

Yes of course, please make sure you are logged into my website to see the links.

Try to add the following PHP code snippet to the child theme functions.php file to do this

function woodmart_swatches_list( $attribute_name = false ) {
	global $product;

	$id = $product->get_id();

	if( empty( $id ) || ! $product->is_type( 'variable' ) ) return false;
	
	if( ! $attribute_name ) {
		$attribute_name = woodmart_grid_swatches_attribute();
	}
	
	if( empty( $attribute_name ) ) return false;

	$available_variations = $product->get_available_variations();

	if( empty( $available_variations ) ) return false;

	$swatches_to_show = woodmart_get_option_variations(  $attribute_name, $available_variations, false, $id );

	if( empty( $swatches_to_show ) ) return false;
	$out = '';

	$out .=  '<div class="swatches-on-grid">';

	$swatch_size = woodmart_wc_get_attribute_term( $attribute_name, 'swatch_size' );

	if( apply_filters( 'woodmart_swatches_on_grid_right_order', true ) ) {
		$terms = wc_get_product_terms( $product->get_id(), $attribute_name, array( 'fields' => 'slugs' ) );

		$swatches_to_show_tmp = $swatches_to_show;

		$swatches_to_show = array();

		foreach ($terms as $id => $slug) {
			//Fixed php notice
			if ( ! isset( $swatches_to_show_tmp[$slug] ) ) continue;
			$swatches_to_show[$slug] = $swatches_to_show_tmp[$slug];
		}
	}

	foreach ($swatches_to_show as $key => $swatch) {
		$style = $class = '';

		if( ! empty( $swatch['color'] )) {
			$style = 'background-color:' .  $swatch['color'];
		} else if( ! empty( $swatch['image'] ) ) {
			$style = 'background-image: url(' . $swatch['image'] . ')';
		} else if( ! empty( $swatch['not_dropdown'] ) ) {
			$class .= 'swatch-text-only ';
		}

		$style .= ';';

		$data = '';

		if( isset( $swatch['image_src'] ) ) {
			$class .= 'swatch-has-image';
			$data .= 'data-image-src="' . $swatch['image_src'] . '"';
			$data .= ' data-image-srcset="' . $swatch['image_srcset'] . '"';
			$data .= ' data-image-sizes="' . $swatch['image_sizes'] . '"';
			if( woodmart_get_opt( 'swatches_use_variation_images' ) ) {
				$thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $swatch['variation_id'] ), 'woocommerce_thumbnail');
				if ( !empty( $thumb ) ) {
					$style = 'background-image: url(' . $thumb[0] . ')';
					$class .= ' variation-image-used';
				}
			}

			if( ! $swatch['is_in_stock'] ) {
				$class .= ' variation-out-of-stock';
			}
		}

		$class .= ' swatch-size-' . $swatch_size;

		$term = get_term_by( 'slug', $key, $attribute_name );

		$out .=  '<div class="swatch-on-grid woodmart-tooltip ' . esc_attr( $class ) . '" style="' . esc_attr( $style ) .'" ' . $data . '>' . $term->name . '</div>';
	}

	$out .=  '</div>';

	return $out;

}

I love you guys <3 😀
Worked perfectly! Thank you so much 🙂

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts