Question

是否可以在访问者第一次访问产品页面时更改其行为以显示真实的特色图像，并且仅在选择变体时才显示图像而不会删除预选的变体？

点击列表中的产品（带有特色图片）时，产品仅显示带有说明和内容的图片，而不显示特色图片。

我找到了，但是代码已经过时：Same question and answer

我的single / product-image.php模板：

<div class="product-images relative mb-half has-hover <?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>">

    <?php do_action('flatsome_sale_flash'); ?>

    <div class="image-tools absolute top show-on-hover right z-3">
        <?php do_action('flatsome_product_image_tools_top'); ?>
    </div>

    <figure class="woocommerce-product-gallery__wrapper <?php echo implode(' ', $slider_classes); ?>"
            data-flickity-options='{
                "cellAlign": "center",
                "wrapAround": true,
                "autoPlay": false,
                "prevNextButtons":true,
                "adaptiveHeight": true,
                "imagesLoaded": true,
                "lazyLoad": 1,
                "dragThreshold" : 15,
                "pageDots": false,
                "rightToLeft": <?php echo $rtl; ?>
       }'>
        <?php
        if ( $product->get_image_id() ) {
            $html  = flatsome_wc_get_gallery_image_html( $post_thumbnail_id, true );
        } else {
            $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
            $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
            $html .= '</div>';
        }

        echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped

        do_action( 'woocommerce_product_thumbnails' );
        ?>
    </figure>

    <div class="image-tools absolute bottom left z-3">
        <?php do_action('flatsome_product_image_tools_bottom'); ?>
    </div>
</div>

Answer 1

嗯，我想出了如何停止这种行为。在主题+ WooCommerece插件代码中的代码中搜索了6个小时后，我找到了解决方案。

1。首先复制文件 wp-content / plugins / woocommerce / assets / js / frontend / add-to-cart-variation.js 对于您的子主题/ woocommerce / js /文件夹，如果没有该文件夹，则创建一个。

2。将其粘贴到主题孩子处以调用新文件并通过woo注销默认文件：

add_action('wp_enqueue_scripts', 'override_woo_frontend_scripts');
function override_woo_frontend_scripts() {
    wp_deregister_script('wc-add-to-cart-variation');
    wp_enqueue_script('wc-add-to-cart-variation', get_stylesheet_directory_uri() . '/woocommerce/js/add-to-cart-variation.min.js', array('jquery', 'wp-util', 'jquery-blockui'), null, true);
}

3。从子主题中打开新复制的文件，然后在 45 行中插入并注释以下行：

    setTimeout( function() {
        //$form.trigger( 'check_variations' ); Comment this line to disable auto slide on first page load to the selected variation image
        $form.trigger( 'wc_variation_form' );
        self.loading = false;
    }, 100 );

将您刚刚编辑的整个文件复制到一些在线js缩小文件中。
将缩小的代码粘贴到刚创建的新文件中，并将文件重命名为add-to-cart-variation.min.js 。
已完成，已解决了该问题，唯一的问题可能是下一个woocommerce更新，如果他们对那个文件进行操作，则可能会错过重要的更新。

谢谢，祝你好运

Answer 2

我遇到了同样的问题，并以稍微不同的方式解决了它，无需编辑核心 WooCommerce js 文件。

选择变体图像的整个 flex 滑块导航系统取决于文件 add-to-cart-variation.min.js 第 650 行中的类“flex-control-nav”，“$gallery_nav = $product.find( '.flex-control-nav' )"。

如果页面加载时没有预设 flex-control-nav 类，那么 WooCommerce js 无法自动选择默认的变体图片。

因此，当您的页面加载时，请确保您的缩略图滑块 div 中不存在类 flex-control-nav - 使用不同的类来设置 flexslider 的样式。我为此使用了自定义 product_image.php 模板。

设置 300 毫秒的 js 计时器以在页面加载后运行，一旦计时器触发，使用 js 将类 flex-control-nav 添加到滑块 div 中。您现在可以在变体图片和主图片库之间实现图片同步。

显示与产品图片不同的特色图片

2 个答案: