如何使Woocommerce产品库缩略图垂直

我在一个商业网站上工作。但不能使产品缩略图垂直对齐。

---

我使用了woozoom插件&所有的缩略图都在一个“jcarousel包装”中。

首先，如果我们想垂直显示，我们需要确保我们的产品库每行有一个图像（如果我没有错，默认为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定制视频教程。首先，如果要垂直显示，我们需要确保我们的产品库每行有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定制视频教程。Cairo Web Design的解决方案适用于默认安装，但是，如果您使用的是WooCommerce店面电源组扩展，则需要另外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规则添加其他元素。见下面的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 --- */

/*基于Rodolfo Melogli的解决方案*/
/*---第1阶段，使库缩略图列计数为1（不是3或4）--*/
添加过滤器（'woocommerce\u product\u thumbnails\u columns'，'dk\u single\u gallery\u columns'，99）；
功能dk_单个_图库_列（）{
返回1；
}
//具体针对店面主题执行以下操作：
添加过滤器（“店面、产品、缩略图、栏目”、“dk、单一画廊、栏目、店面”，99）；
功能dk_单个_画廊_专栏_店面（）{
返回1；
}
/*---结束第1阶段--*/
/*---第2阶段添加CSS--*/
添加动作（“wp_头”、“dkAddVertGalleryCSS”）；
函数dkAddVertGalleryCSS（）{
回声'
@介质（最小宽度：0px）{
/*使图像宽度变小以在其右侧留出空间*/
.single product div.product.images.woocommerce主图像.flex视口{
宽度：85%；
浮动：左；
}
/*使画廊的宽度变小，并将其放置在图像旁边*/
.单个产品部门产品图像缩略图，ol.flex-control-nav.flex-control-thumbs{
宽度：15%；
浮动：左；
利润上限：40px！重要；
}
/*使用宽度和边距设置每个缩略图的样式*/
.单产品分区产品.图像.缩略图a.zoom，ol.flex-control-nav.flex-control-thumbs a.zoom{
宽度：90%；
浮动：无；
利润率：0.10%10%；
}
/*将缩放工具移到左侧以容纳图库拇指（否则它会覆盖第一个缩略图）*/
.single product div.product.woocommerce产品库。woocommerce-product-gallery\uu触发器{
左：.875em！重要；
}
} 
';
} 
/*---结束第二阶段--*/

Cairo Web Design的解决方案适用于默认安装，但如果您使用的是WooCommerce店面电源组扩展，则需要另外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 --- */

/*基于Rodolfo Melogli的解决方案*/
/*---第1阶段，使库缩略图列计数为1（不是3或4）--*/
添加过滤器（'woocommerce\u product\u thumbnails\u columns'，'dk\u single\u gallery\u columns'，99）；
功能dk_单个_图库_列（）{
返回1；
}
//具体针对店面主题执行以下操作：
添加过滤器（“店面、产品、缩略图、栏目”、“dk、单一画廊、栏目、店面”，99）；
功能dk_单个_画廊_专栏_店面（）{
返回1；
}
/*---结束第1阶段--*/
/*---第2阶段添加CSS--*/
添加动作（“wp_头”、“dkAddVertGalleryCSS”）；
函数dkAddVertGalleryCSS（）{
回声'
@介质（最小宽度：0px）{
/*使图像宽度变小以在其右侧留出空间*/
.single product div.product.images.woocommerce主图像.flex视口{
宽度：85%；
浮动：左；
}
/*使画廊的宽度变小，并将其放置在图像旁边*/
.单个产品部门产品图像缩略图，ol.flex-control-nav.flex-control-thumbs{
宽度：15%；
浮动：左；
利润上限：40px！重要；
}
/*使用宽度和边距设置每个缩略图的样式*/
.单产品分区产品.图像.缩略图a.zoom，ol.flex-control-nav.flex-control-thumbs a.zoom{
宽度：90%；
浮动：无；
利润率：0.10%10%；
}
/*将“缩放”工具移到左侧以容纳galler