Question

我正在建立一个woocommerce网站。但是不能使产品缩略图垂直对齐。我使用了woozoom插件＆amp;所有缩略图都在＆＃39; jcarousel-wrapper＆＃39;。

Answer 1

首先，如果我们想要垂直显示，我们需要确保我们的产品库每行有1张图片（如果我没有错，默认值为3）。

/**
 * @snippet       Change Gallery Columns @ Single Product Page
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=20518
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 2.5.5
 */

add_filter ( 'woocommerce_product_thumbnails_columns', 'bbloomer_change_gallery_columns' );

function bbloomer_change_gallery_columns() {
     return 1; 
}

// ---------------------
// For Storefront theme:

add_filter ( 'storefront_product_thumbnail_columns', 'bbloomer_change_gallery_columns_storefront' );

function bbloomer_change_gallery_columns_storefront() {
     return 1; 
}

// ---------------------

CSS片段（第2部分，共2部分）：编辑WooCommerce产品库CSS

其次，我们需要在图像旁边“移动”产品库。这是非常基本的CSS，可以放在孩子主题的样式表中。

/**
 * @snippet       CSS to Move Gallery Columns @ Single Product Page
 * @sourcecode    https://businessbloomer.com/?p=20518
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 2.5.5, Storefront 1.6
 */

@media (min-width: 0px) {

/* Make image 75% width to make room to its right */

.single-product div.product .images .woocommerce-main-image {
    width: 75%;
    float: left;
}

/* Make Gallery 25% width and place it beside the image */

.single-product div.product .images .thumbnails {
    width: 25%;
    float: left;
}

/* Style each Thumbnail with width and margins */

.single-product div.product .images .thumbnails a.zoom {
    width: 90%;
    float: none;
    margin: 0 0 10% 10%;
}

}

您可以将PHP代码段放在子主题functions.php文件的底部（如果是CSS，则会在style.css文件的底部） - 如果您需要更多指导，请查看我的免费WooCommerce Customization视频教程。

Answer 2

Cairo Web Design的解决方案适用于默认安装，但如果您使用的是WooCommerce Storefront Power Pack扩展，则还需要3个部分：

要更改列数的过滤器，请添加优先级，以便稍后触发。
为每个CSS规则添加其他元素。请参阅下面的CSS。
添加另一个将放大图标移动到左侧的css规则。否则，它覆盖垂直堆叠后的第一个缩略图。

制作一个插件或将其粘贴到functions.php中，它应该适用于使用PowerPack扩展的安装。

/*Based on Solution from Rodolfo Melogli*/

/* --- PHASE 1, make the gallery thumbnail column count 1 (not 3 or 4 )---  */
add_filter( 'woocommerce_product_thumbnails_columns', 'dk_single_gallery_columns', 99 );
function dk_single_gallery_columns() {
 return 1; 
}

// Do it for the Storefront theme specifically:
add_filter( 'storefront_product_thumbnail_columns', 'dk_single_gallery_columns_storefront', 99 );
function dk_single_gallery_columns_storefront() {
 return 1; 
}

/* --- END PHASE 1 --- */


/* --- PHASE 2 add CSS --- */
add_action('wp_head','dkAddVertGalleryCSS');
function dkAddVertGalleryCSS() {

 echo '<style>
        @media (min-width: 0px) {
        /* Make image width smaller to make room to its right */
        .single-product div.product .images .woocommerce-main-image, .flex-viewport {
            width: 85%;
            float: left;
        }

        /* Make Gallery smaller width and place it beside the image */
        .single-product div.product .images .thumbnails, ol.flex-control-nav.flex-control-thumbs {
            width: 15%;
            float: left;
            margin-top: 40px !important;
        }

        /* Style each Thumbnail with width and margins */
        .single-product div.product .images .thumbnails a.zoom, ol.flex-control-nav.flex-control-thumbs a.zoom {
            width: 90%;
            float: none;
            margin: 0 0 10% 10%;
        }

        /* Move the zoom tool to the left side to accommodate the gallery thumbs (otherwise it covers the first thumbnail */
        .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
            left: .875em !important;
        }

        } 
    </style>';

} 

/* --- END PHASE 2 --- */

如何使Woocommerce Product Gallery Thumbnail Vertical

2 个答案: