在存档页面上显示 Woocommerce 产品属性图像

Question

嗨，我正在尝试显示属性“颜色”的缩略图，以便制作类似的东西

到目前为止，我发现这段代码显示了所有属性的图像，但我只想定位属性颜色

add_action ('woocommerce_before_shop_loop_item_title', 'test_code' );
function test_code () {
global $product; 

if ( $product->has_child() ) {

$variations = $product->get_children();

foreach ( $variations as $variation ) {

if ( has_post_thumbnail( $variation ) ) {

        echo get_the_post_thumbnail( $variation );
      }
    }
  }
}

我怎样才能只定位“颜色”属性？

Answer 1

经过研究和大部分时间，我找到了解决方案。

我创建了两个函数，第一个函数显示每个变量产品中属性颜色的每个值（不重复）的缩略图。

add_action( 'woocommerce_before_shop_loop_item_title', 'heam_display_color_attribute_thumbnails' );

function heam_display_color_attribute_thumbnails() {
    global $product;

    $color_values = $product->get_attribute( 'color' );
    $color_values_array = array_map( 'trim', explode( ',', $color_values ) );

    if ( $product->is_type( 'variable' ) ) {
        foreach ( $color_values_array as $color_value ) {

            foreach ( $product->get_visible_children() as $variation_id ) {
                $variation = wc_get_product( $variation_id );

                $variation_color = $variation->get_attribute( 'color' );

                if ( trim( $variation_color ) === $color_value ) {
                    $color_image = $variation->get_image( array( 30, 30 ), array( 'class' => 'heam-product-attribute-color-thumbnail', 
                    'data-visibility' => 'false' ) );
                    echo $color_image;
                    break;
                }
            }
        }
    }
}

我还为每个图像添加了一个类和一个数据可见性。该类用于样式，数据可见性用于样本。

---

第二个函数显示（以与图像相同的顺序）一个列表，其中包含每个变量产品中属性颜色的每个值（不重复）的列表项

add_action( 'woocommerce_after_shop_loop_item', 
'heam_display_color_attribute_list', 5 );

function heam_display_color_attribute_list() {
    global $product;

    $color_values = $product->get_attribute( 'color' );
    $color_values_array = array_map( 'trim', explode( ',', $color_values ) 
);

    if ( $product->is_type( 'variable' ) ) {
        echo "<ul class=\"heam-color-atribbute-list\">";
        foreach ( $color_values_array as $color_value ) {
            echo "<li class=\"heam-color-atribbute-list-item\"><div 
class=\"color-attribute-swatch\" data-color=\"" . $color_value . "\"> 
</div></li>";
        }
        echo "</ul>";
    }
}

在每个 LI 内，我添加一个带有类的 div，用于为每种颜色和数据颜色设置样本样式，以针对特定颜色并设置其样式。

---

用于颜色切换的 javascript

colorAttributeListItem = document.querySelectorAll(
  ".heam-color-atribbute-list-item"
);
colorAttributeImages = document.querySelectorAll(
  ".heam-product-attribute-color-thumbnail"
);

colorAttributeListItem.forEach((listItem, index) => {
  listItem.addEventListener("click", () => {
    colorAttributeImages[index].dataset.visibility = "true";

    for (let i = 0; i < colorAttributeImages.length; i++) {
      if (i !== index) {
        colorAttributeImages[i].dataset.visibility = "false";
      }
    }
  });
});

---

最后是CSS

.columns-4 a:nth-child(1) > .heam-product-attribute-color-thumbnail {
  position: absolute;
  top: 0;
  opacity: 0;
  transition: all 200ms ease-in-out;
}

.columns-4
  a:nth-child(1)
  > .heam-product-attribute-color-thumbnail[data-visibility="true"] {
  opacity: 1;
  transition: all 200ms ease-in-out;
}

.heam-color-atribbute-list {
  display: flex;
  gap: 0.5rem;
}

.color-attribute-swatch {
  background-color: black;
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  outline: 1px solid lightgray;
}

.color-attribute-swatch[data-color="blanco"] {
  background-color: white;
}

.color-attribute-swatch[data-color="negro"] {
  background-color: black;
}

.color-attribute-swatch[data-color="rojo"] {
  background-color: red;
}

请记住更改类以匹配您的类，以及 de data-color="your-color"。