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

我在一个woocommerce网站工作。但不能使产品缩略图垂直对齐。我使用woozoom插件&所有缩略图都在'jcarousel-wrapper'中。

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

对于更改列计数的过滤器，添加优先级以便稍后触发。
为每个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 --- */

首先，如果我们想要垂直显示，我们需要确保我们的Product Gallery每行有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

第二，我们需要"移动"图片旁边的Product Gallery。这是非常基本的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片段放在你的子主题函数。PHP文件的底部(在CSS的情况下，这是在style.css文件的底部)-如果你需要更多的指导，请看看我的免费WooCommerce定制视频教程

相关内容

最新更新

热门标签：