[WP][WooCommerce] Customize attributes & Edit "Variation Swatches" plugin

wc-custom_attributes.php

<?php

/* ------------------------------------------------------------------------------------------------
*
* METHOD 1
*
-------------------------------------------------------------------------------------------------- */

// Customize WooCommerce Attributes (method 1 - no swatches/plugins)
function wc_custom_attr( $product ) {

	global $product, $post;
	$attributes = $product->get_attributes();
	if ( ! $attributes ) {
    	return;
	}

	foreach ( $attributes as $attribute ) {

	  $terms = wp_get_post_terms( $product->id, $attribute[ 'name' ], 'all' );
	  $taxonomy = $terms[ 0 ]->taxonomy;

	  $taxonomy_object = get_taxonomy( $taxonomy );
	  $attribute_label = $taxonomy_object->labels->singular_name;
		$class_name = $taxonomy_object->name;
    
    // Get default/first attr name
		if($class_name == 'pa_colore') {
			$first_attr = $terms[0]->name;
		} else {
			$first_attr = '';
		}

		// With term link
	  //echo get_the_term_list( $post->ID, $attribute[ 'name' ] , '<div class="attributes '.$class_name.'"><h4 class="border-bottom">Scegli '.$attribute_label.'</h4>', ', ','</div>');
     
    // Without term link
		echo '<div class="attributes '.$class_name.'"><h4 class="border-bottom">Choose '.$attribute_label.': <span class="selected_color">'.$first_attr.'</span></h4><ul>';
		foreach ($terms as $term) {
			echo '<li data-color="'.$term->name.'"><p>'.$term->name.'</p></li>';
		}
		echo '</ul></div>';

	}
}
add_action('woocommerce_single_product_summary', 'wc_custom_attr', 20);

// Show attr name on click
function wc_print_attr_selection() { ?>
    <script type'text/javascript'>
              
        $('.attributes li').click(function () {
            var color = $(this).attr('data-color');
            $('.attributes h4 span').html(color);
        });
 
    </script>
<?php }
add_action('wp_footer', 'wc_print_attr_selection', 999);

/* ------------------------------------------------------------------------------------------------
*
* METHOD 2
*
* Only works with this plugin https://wordpress.org/plugins/variation-swatches-for-woocommerce/
*
-------------------------------------------------------------------------------------------------- */

// Customize WooCommerce Attributes (method 2 - swatches plugin)
if(class_exists('TA_WC_Variation_Swatches_Frontend')) {

	// Remove original plugin's function
	remove_filter( 'woocommerce_dropdown_variation_attribute_options_html', array( TA_WC_Variation_Swatches_Frontend::instance(), 'get_swatch_html' ), 100);
	remove_filter( 'tawcvs_swatch_html', array( TA_WC_Variation_Swatches_Frontend::instance(), 'swatch_html' ), 5);

	class TA_WC_Variation_Swatches_Frontend_Custom extends TA_WC_Variation_Swatches_Frontend {

		protected static $instance = null;

		public static function instance() {
			if ( null == self::$instance ) {
				self::$instance = new self();
			}

			return self::$instance;
		}
  
    // CUSTOMIZE THIS
		public function get_swatch_html_custom ( $html, $args ) {
			$swatch_types = TA_WCVS()->types;
			$attr         = TA_WCVS()->get_tax_attribute( $args['attribute'] );

			// Return if this is normal attribute
			if ( empty( $attr ) ) {
				return $html;
			}

			if ( ! array_key_exists( $attr->attribute_type, $swatch_types ) ) {
				return $html;
			}

			$options   = $args['options'];
			$product   = $args['product'];
			$attribute = $args['attribute'];
			$class     = "variation-selector variation-select-{$attr->attribute_type}";
			$swatches  = '';

			if ( empty( $options ) && ! empty( $product ) && ! empty( $attribute ) ) {
				$attributes = $product->get_variation_attributes();
				$options    = $attributes[$attribute];
			}

			if ( array_key_exists( $attr->attribute_type, $swatch_types ) ) {
				if ( ! empty( $options ) && $product && taxonomy_exists( $attribute ) ) {
					// Get terms if this is a taxonomy - ordered. We need the names too.
					$terms = wc_get_product_terms( $product->get_id(), $attribute, array( 'fields' => 'all' ) );

					foreach ( $terms as $term ) {
						if ( in_array( $term->slug, $options ) ) {
							$swatches .= apply_filters( 'tawcvs_swatch_html', '', $term, $attr, $args );
						}
					}
				}

				if ( ! empty( $swatches ) ) {
					$class .= ' hidden';

					$swatches = '<div class="tawcvs-swatches" data-attribute_name="attribute_' . esc_attr( $attribute ) . '">' . $swatches . '</div>';
					$html     = '<div class="' . esc_attr( $class ) . '">' . $html . '</div>' . $swatches;
				}
			}

			return $html;
		}
  
    // CUSTOMIZE THIS
		// Print HTML of a single swatch
		public function swatch_html_custom ( $html, $term, $attr, $args ) {
			$selected = sanitize_title( $args['selected'] ) == $term->slug ? 'selected' : '';
			$name     = esc_html( apply_filters( 'woocommerce_variation_option_name', $term->name ) );

			switch ( $attr->attribute_type ) {
				case 'color':
					$color = get_term_meta( $term->term_id, 'color', true );
					list( $r, $g, $b ) = sscanf( $color, "#%02x%02x%02x" );
					$html = sprintf(
						'<span class="swatch swatch-color swatch-%s %s" style="background-color:%s;color:%s;" title="%s" data-value="%s">%s</span>',
						esc_attr( $term->slug ),
						$selected,
						esc_attr( $color ),
						"rgba($r,$g,$b,0.5)",
						esc_attr( $name ),
						esc_attr( $term->slug ),
						$name
					);
					break;

				case 'image':
					$image = get_term_meta( $term->term_id, 'image', true );
					$image = $image ? wp_get_attachment_image_src( $image ) : '';
					$image = $image ? $image[0] : WC()->plugin_url() . '/assets/images/placeholder.png';
					$html  = sprintf(
						'<span class="swatch swatch-image swatch-%s %s" title="%s" data-value="%s"><img src="%s" alt="%s">%s</span>',
						esc_attr( $term->slug ),
						$selected,
						esc_attr( $name ),
						esc_attr( $term->slug ),
						esc_url( $image ),
						esc_attr( $name ),
						esc_attr( $name )
					);
					break;

				case 'label':
					$label = get_term_meta( $term->term_id, 'label', true );
					$label = $label ? $label : $name;
					$html  = sprintf(
						'<span class="swatch swatch-label swatch-%s %s" title="%s" data-value="%s">%s</span>',
						esc_attr( $term->slug ),
						$selected,
						esc_attr( $name ),
						esc_attr( $term->slug ),
						esc_html( $label )
					);
					break;
			}

			return $html;
		}


	}

	add_filter( 'woocommerce_dropdown_variation_attribute_options_html', array( TA_WC_Variation_Swatches_Frontend_Custom::instance(), 'get_swatch_html_custom' ), 100, 2 );
	add_filter( 'tawcvs_swatch_html', array( TA_WC_Variation_Swatches_Frontend_Custom::instance(), 'swatch_html_custom' ), 5, 4 );
}

// Show attr name on click
function wc_print_attr_selection() { ?>
    <script type'text/javascript'>
      
      // Only works with this plugin https://wordpress.org/plugins/variation-swatches-for-woocommerce/
      $('span.swatch-color').click(function () {
			    var color = $(this).text();
			    $('.attributes h4 span').html(color);
		  });
 
    </script>
<?php }
add_action('wp_footer', 'wc_print_attr_selection', 999);

?>