Answer the question
In order to leave comments, you need to log in
How to display Woocommerce variable product thumbnails?
Hello! Please tell me what is wrong. The bottom line is to display the miniature of the variation as a background
<div class="swatches-select swatches-on-single" data-id="<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>">
<?php
if ( is_array( $options ) ) {
if ( isset( $_REQUEST[ 'attribute_' . $attribute_name ] ) ) {
$selected_value = $_REQUEST[ 'attribute_' . $attribute_name ];
} elseif ( isset( $selected_attributes[ $attribute_name ] ) ) {
$selected_value = $selected_attributes[ $attribute_name ];
} else {
$selected_value = '';
}
// Get terms if this is a taxonomy - ordered
if ( taxonomy_exists( $attribute_name ) ) {
$terms = wc_get_product_terms( $product->get_id(), $attribute_name, array( 'fields' => 'all' ) );
$swatch_size = woodmart_wc_get_attribute_term( $attribute_name, 'swatch_size' );
$_i = 0;
$options_fliped = array_flip( $options );
foreach ( $terms as $term ) {
if ( ! in_array( $term->slug, $options ) ) {
continue;
}
$key = $options_fliped[$term->slug];
$style = '';
$class = 'woodmart-swatch swatch-on-single ';
if( ! empty( $swatches[$key]['color'] )) {
$class .= 'swatch-with-bg woodmart-tooltip';
$style = 'background-color:' . $swatches[$key]['color'];
} else if( $swatches_use_variation_images && $grid_swatches_attribute == $attribute_name && isset( $swatches[$key]['image_src'] ) ) {
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $swatches[$key]['variation_id'] ), 'woocommerce_thumbnail');
if ( !empty( $thumb ) ) {
$style = 'background-image: url(' . $thumb[0] . ')';
$class .= ' swatch-with-bg woodmart-tooltip';
}
} else if( ! empty( $swatches[$key]['image'] )) {
$class .= 'swatch-with-bg woodmart-tooltip';
$style = 'background-image: url(' . $swatches[$key]['image'] . ')';
} else if( ! empty( $swatches[$key]['not_dropdown'] ) ) {
$class .= ' text-only';
}
$class .= ' swatch-size-' . $swatch_size;
if ( $selected_value == $term->slug ) {
$class .= ' active-swatch';
}
if ( 'yes' === get_option( 'woocommerce_hide_out_of_stock_items' ) && $active_variations ) {
if ( in_array( $term->slug, $active_variations ) ) {
$class .= ' swatch-enabled';
} else {
$class .= ' swatch-disabled';
}
}
echo '<div class="' . esc_attr( $class ) . '" data-value="' . esc_attr( $term->slug ) . '" ' . selected( sanitize_title( $selected_value ), sanitize_title( $term->slug ), false ) . ' style="' . esc_attr( $style ) .'">' . apply_filters( 'woocommerce_variation_option_name', $term->name ) . '</div>';
$_i++;
}
} else {
foreach ( $options as $option ) {
$class = '';
if ( $selected_value == $option ) {
$class .= ' active-swatch';
}
if ( 'yes' === get_option( 'woocommerce_hide_out_of_stock_items' ) && $active_variations ) {
if ( in_array( $term->slug, $active_variations ) ) {
$class .= ' swatch-enabled';
} else {
$class .= ' swatch-disabled';
}
}
echo '<div class="' . esc_attr( $class ) . '" data-value="' . esc_attr( sanitize_title( $option ) ) . '" ' . selected( sanitize_title( $selected_value ), sanitize_title( $option ), false ) . '>' . esc_html( apply_filters( 'woocommerce_variation_option_name', $option ) ) . '</div>';
}
}
}
?>
</div>
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question