Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
[WP][WooCommerce] Customize attributes & Edit "Variation Swatches" plugin
<?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);
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.