T
T
Tipello2020-04-24 22:55:09
WooCommerce
Tipello, 2020-04-24 22:55:09

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 question

Ask a Question

731 491 924 answers to any question