Question

在Woocommerce中，如何避免选择（可变产品）的变体时图像发生变化？

感谢您的帮助。

Answer 1

在此主题目录wp-content/themes/<YOUR_THEME_NAME>/woocommerce/single-product/add-to-cart/variable.php中创建一个新文件，并添加此代码

<?php
/**
 * Variable product add to cart
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/add-to-cart/variable.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.5.5
 */

defined( 'ABSPATH' ) || exit;

global $product;

$new_available_variations = $available_variations;
for($i=0;$i<sizeof($new_available_variations);$i++){
    $image_url = wp_get_attachment_url( $product->get_image_id() );
    $image_src = wp_get_attachment_image_src( $product->get_image_id() );
    $new_available_variations[$i]['image']['url'] = $image_url;
    $new_available_variations[$i]['image']['src'] = $image_url;
    $new_available_variations[$i]['image']['full_src'] = $image_url;
    $new_available_variations[$i]['image']['gallery_thumbnail_src'] = $image_url;
    $new_available_variations[$i]['image']['thumb_src'] = $image_url;
    $new_available_variations[$i]['image']['url'] = $image_url;
    $new_available_variations[$i]['image']['url'] = $image_url;
    $new_available_variations[$i]['image']['full_src_w'] = $image_src[1];
    $new_available_variations[$i]['image']['full_src_h'] = $image_src[2];
    $new_available_variations[$i]['image']['thumb_src_w'] = $image_src[1];
    $new_available_variations[$i]['image']['thumb_src_h'] = $image_src[2];
    $new_available_variations[$i]['image']['src_w'] = $image_src[1];
    $new_available_variations[$i]['image']['src_h'] = $image_src[2];
}
$attribute_keys  = array_keys( $attributes );
$variations_json = wp_json_encode( $new_available_variations );
$variations_attr = function_exists( 'wc_esc_json' ) ? wc_esc_json( $variations_json ) : _wp_specialchars( $variations_json, ENT_QUOTES, 'UTF-8', true );

// echo '<pre>', print_r($new_available_variations,1), '</pre>';

do_action( 'woocommerce_before_add_to_cart_form' ); ?>

<form class="variations_form cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->get_id() ); ?>" data-product_variations="<?php echo $variations_attr; // WPCS: XSS ok. ?>">
    <?php do_action( 'woocommerce_before_variations_form' ); ?>

    <?php if ( empty( $available_variations ) && false !== $available_variations ) : ?>
        <p class="stock out-of-stock"><?php echo esc_html( apply_filters( 'woocommerce_out_of_stock_message', __( 'This product is currently out of stock and unavailable.', 'woocommerce' ) ) ); ?></p>
    <?php else : ?>
        <table class="variations" cellspacing="0">
            <tbody>
                <?php foreach ( $attributes as $attribute_name => $options ) : ?>
                    <tr>
                        <td class="label"><label for="<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>"><?php echo wc_attribute_label( $attribute_name ); // WPCS: XSS ok. ?></label></td>
                        <td class="value">
                            <?php
                                wc_dropdown_variation_attribute_options(
                                    array(
                                        'options'   => $options,
                                        'attribute' => $attribute_name,
                                        'product'   => $product,
                                    )
                                );
                                echo end( $attribute_keys ) === $attribute_name ? wp_kses_post( apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . esc_html__( 'Clear', 'woocommerce' ) . '</a>' ) ) : '';
                            ?>
                        </td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>

        <div class="single_variation_wrap">
            <?php
                /**
                 * Hook: woocommerce_before_single_variation.
                 */
                do_action( 'woocommerce_before_single_variation' );

                /**
                 * Hook: woocommerce_single_variation. Used to output the cart button and placeholder for variation data.
                 *
                 * @since 2.4.0
                 * @hooked woocommerce_single_variation - 10 Empty div for variation data.
                 * @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
                 */
                do_action( 'woocommerce_single_variation' );

                /**
                 * Hook: woocommerce_after_single_variation.
                 */
                do_action( 'woocommerce_after_single_variation' );
            ?>
        </div>
    <?php endif; ?>

    <?php do_action( 'woocommerce_after_variations_form' ); ?>
</form>

<?php
do_action( 'woocommerce_after_add_to_cart_form' );

Answer 2

如果您不需要为变体更改图像，则应从分配的变体中删除图像。我想它嵌入了插件或主题功能

Answer 3

由于图像更改主要由Woocommerce画廊javascript（jQuery）处理，因为它是客户端的实时事件。

唯一可行的方法应该是删除变体中的所有图像，仅将它们添加到父变量产品中。

如果您需要在购物车和电子邮件通知中显示变型产品图片，则将使用以下代码：

// Parent product variation image on cart
add_filter( 'woocommerce_cart_item_thumbnail', 'filter_order_item_thumbnail', 20, 2 );
function filter_order_item_thumbnail( $image, $cart_item, $cart_item_key ) {
    if( $cart_item['variation_id'] > 0 ) {
        $parent = wc_get_product($cart_item['product_id']);
        $image = $parent->get_image();
    }
    return $image;
}

// Parent product variation image on email notifications 
add_filter( 'woocommerce_order_item_thumbnail', 'filter_order_item_thumbnail', 20, 2 );
function filter_order_item_thumbnail( $image, $item ) {
    $product = $item->get_product();
    if( $product->is_type('variation') ) {
        $parent = wc_get_product($item->get_product_id());
        $image = $parent->get_image(array(32, 32));
    }
    return $image;
}

代码进入您的活动子主题（或活动主题）的function.php文件中。经过测试，可以正常工作。

避免对woocommerce可变产品的变化选择进行图像更改

3 个答案: