Home Forums WoodMart support forum Color swatches in product list are not shown

Color swatches in product list are not shown

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #41990

    MoeMauphie
    Participant

    Hi there,

    I have checked this item: Enable this if you want to show this attribute label on products in your store. but while in single product view swatches are shown as they should, in the list view colors are shown as texts. Please find the attached file.

    Attachments:
    You must be logged in to view attached files.
    #41992

    MoeMauphie
    Participant

    Actually, these are variable products, I just wanted to know how I should display color swatches for them in the list view. I have seen this functionality on your demo.

    Thanks

    #41993

    MoeMauphie
    Participant

    I found the right option in the theme settings, but there’s still a problem; I have not chosen different pictures for different variable and that’s not troublesome in the single product view. But when I choose a color in the list view, the loading gif starts to spin like for ever and won’t stop. I think there’s a problem with that. Please see this page:
    http://tennisfa.com/shop/product-category/پوشاک-تنیس/هدبند-و-مچ%E2%80%8Cبند/

    Thanks

    #42011

    Artem Temos
    Keymaster

    Hi,

    We just check it on your website and it seems to work correctly for us. Which product and color should we check to test it?

    #42030

    MoeMauphie
    Participant

    Please check the product shown in the attached file. Weirdly, it seems this problem only happens in Safari. I checked it in Firefox and it was OK.

    Regards,

    Attachments:
    You must be logged in to view attached files.
    #42048

    Artem Temos
    Keymaster

    Try to add the following PHP code snippet to the child theme functions.php file to fix 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) {
    				$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 .= 'text-only ';
    			}
    
    			$style .= ';';
    
    			$data = '';
    
    			$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;
    
    	}
    #42142

    MoeMauphie
    Participant

    Thanks for the help, guys. Was it intended to remove the functionality of selecting variable product in the list view? If yes, that works as intended.

    Regards

    #42158

    Artem Temos
    Keymaster

    Yes, we removed images switch on click function.

Viewing 8 posts - 1 through 8 (of 8 total)