Woocommerce产品缩略图位置

Question

任何人都可以告诉我如何将产品缩略图移动到主图像上方而不是产品页面下方。我已经看到了一些解决方案，将它们移到一边，但没有一个解决方案，只是在我认为更容易的主图像之上。

我自己尝试了几件事，但无论我做了什么似乎影响了画廊导航。在下面的示例中，我将产品缩略图操作移动到主图像上方。

非常感谢任何解决方案。

<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?> test" style="opacity: 0; transition: opacity .25s ease-in-out;">
<?php do_action( 'woocommerce_product_thumbnails' );
<figure class="woocommerce-product-gallery__wrapper">
    if ( has_post_thumbnail() ) {
        $html  = 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() ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
        $html .= '</div>';
    }

    echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id );
    ?>
</figure>

Answer 1

因此，我可以看到这是可能的唯一方法是将模板文件 product-image.php 编辑到您的子主题目录 \ theme-child \ woocommerce \中单品\产品image.php

您可以将灯箱控件容器设置为您可以在product-image.php文件中创建的自定义div。添加自定义div，如下所示，ID为 flex_slider_top_thumbs 。

<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
    <div id="flex_slider_top_thumbs"></div>
    <figure class="woocommerce-product-gallery__wrapper">
        <?php
        if ( has_post_thumbnail() ) {
            $html  = 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() ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
            $html .= '</div>';
        }

        echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id );

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

然后，您需要通过以下代码设置新的自定义控件容器div，以在图像上方设置新的轮播控件。

add_filter('woocommerce_single_product_carousel_options', 'add_woocommerce_single_product_carousel_options');

function add_woocommerce_single_product_carousel_options($options) {
    $options['controlsContainer'] = '#flex_slider_top_thumbs';
    return $options;
}

我唯一能解决的问题是将灯箱放大玻璃扳机移出缩略图容器。它的位置由文件 single-product.js 决定，但我不确定我是否可以使用任何可用选项重新定位它。可能需要使用一些自定义jQuery来移动链接，以便它与类 flex-viewport 嵌套在div中。下面的代码来自single-product.js文件，并向您展示它们如何输出PhotoSwipe灯箱链接触发器。

ProductGallery.prototype.initPhotoswipe = function() {
        if ( this.zoom_enabled && this.$images.length > 0 ) {
            this.$target.prepend( '<a href="#" class="woocommerce-product-gallery__trigger">ðŸ”</a>' );
            this.$target.on( 'click', '.woocommerce-product-gallery__trigger', this.openPhotoswipe );
        }
        this.$target.on( 'click', '.woocommerce-product-gallery__image a', this.openPhotoswipe );
    };