Woocommerce swatches and colours on product lists

functions.php

<?php

  static function show_all_available_colour_options() {
    global $product;

    // Only variations
    if ( ! $product->is_type( 'variable' ) ) {
      return;
    }

    // Get available default attributes
    $variations = $product->get_available_variations();
    $product_id = $product->id;

    // No variations? Quit this.
    if ( empty( $variations ) ) {
      return;
    }

    // Blank variable ready for a list
    $colours = [];

    // An empty array, ready for some variations
    $colours_available = false;

    // Enable transients by uncommenting the next line;
    $colours_available = get_transient( __FUNCTION__ . '_' . $product_id );
    if ( false === $colours_available ) {

      // Loop through the available variations
      foreach ( $variations as $variation ) {

        // If we're looking at a colour variation, get it
        if ( ! empty( $variation['attributes']['attribute_pa_farge'] ) ) {

          // If the variation is not in stock, skip this variation
          if ( ! $variation['is_in_stock'] && ! $variation['backorders_allowed']  ) {
            continue;
          }

          // $colours[] = get_term_by( 'id', $variation['attributes']['attribute_pa_farge'], 'product_attributes' );
          $link      = add_query_arg( 'attribute_pa_farge', $variation['attributes']['attribute_pa_farge'], get_permalink( $product_id ) );
          $term      = get_term_by( 'slug', $variation['attributes']['attribute_pa_farge'], 'pa_farge' );
          // $photos = get_term_meta( $term->term_id, 'pa_farge_swatches_id_photo' );
          // $hexes  = get_term_meta( $term->term_id, 'pa_farge_swatches_id_color' );

          // What is available?
          $term_meta = get_term_meta( $term->term_id, false );
          $type      = $term_meta['pa_farge_swatches_id_type'];


          // Attributes like labels and styles
          $label     = 'aria-label="' . $term->name . '"';

          // If HEX code is the selected version
          if ( 'color' === $type[0] ) {
            $style = 'height: 16px; width: 16px; display: inline-block; ';
            $hexes = $term_meta['pa_farge_swatches_id_color'];
            // HEX codes used
            foreach ( $hexes as $hex ) {
              $colours[] = '<object><a href="' . $link . '" class="swatch--colour" style="' . $style . ' background-color: ' . $hex . '" ' . $label . '></a></object>';
            }
          }

          // If photo is the selected version
          if ( 'photo' === $type[0] ) {
            $style .= 'background-size: 100% 100%; background-size: cover; ';
            $photos    = $term_meta['pa_farge_swatches_id_photo'];
            // Photos used
            foreach ( $photos as $photo ) {
              $url = wp_get_attachment_image_src( $photo, 'swatches_image_size' );
              $colours[] = '<object><a href="' . $link . '" class="swatch--photo" style="' . $style . ' background-image: url(' . $url[0] . ');" ' . $label . '></a></object>';
            }
          }

        }
      }

      // If there are images available, lets combine them into a list
      if ( empty( $colours ) ) {
        return;
      }

      // Remove empty values
      $colours = array_filter( $colours );
      // Remove duplicated images
      $colours = array_unique( $colours );

      // Build available variation images for this product
      $colours_available = '<aside class="available-colour-options">' . implode( '', $colours ) . '</aside>';

      // Set the new transient for this product
      set_transient( __FUNCTION__ . '_' . $product_id , $colours_available, 24 * HOUR_IN_SECONDS );

    } // End transient

    echo $colours_available;
  }