如何在Divi WooCommerce WordPress商店页面实现Masonry布局？

嘿，我刚好之前帮客户处理过类似的需求，给你几个实用的方案，不管是用插件还是自定义代码都能搞定：

一、直接用插件（适合新手，快速见效） #

• WooCommerce Product Grid/List Layout：这款插件专门针对商品布局，内置Masonry网格选项，你只需要在插件设置里开启Masonry模式，就能调整列数、间距、响应式规则，完全不用碰代码，上手超简单。
• YITH WooCommerce Product Gallery & Image Zoom：你之前已经熟悉它的相册功能了，其实它也支持商店页面的Masonry商品布局，在插件的「Shop Page」设置项里就能找到开启开关，无缝衔接你已有的操作习惯。
• Gridable – WooCommerce Grid Builder：如果需要更灵活的布局（比如混合不同尺寸的商品卡片），这个插件的拖拽式编辑器能让你轻松搭建自定义Masonry布局，还能搭配筛选、排序功能一起用。

二、自定义代码实现（适合不想装太多插件的场景） #

如果你的主题本身支持自定义代码，或者你想更灵活控制布局，可以试试这个方法：

1. 加载Masonry脚本 #

在你的子主题functions.php里添加以下代码（注意：一定要用子主题，避免主题更新丢失修改；或者用Code Snippets插件来添加更安全）：

function enqueue_woocommerce_masonry() {
    // 只在商店页面和商品分类页面加载
    if ( is_shop() || is_product_category() ) {
        // 加载WordPress自带的Masonry脚本
        wp_enqueue_script( 'masonry' );
        // 初始化Masonry布局
        wp_add_inline_script( 'masonry', '
            jQuery(document).ready(function($){
                // 替换为你主题中商品列表的容器类名，大部分主题是.products
                const $grid = $(".products").masonry({
                    itemSelector: ".product", // 商品卡片的类名
                    percentPosition: true,
                    gutter: 15 // 商品间距，可调整
                });
                // 图片加载完成后重新布局，避免错位
                $grid.imagesLoaded().progress( function() {
                    $grid.masonry("layout");
                });
            });
        ' );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_woocommerce_masonry' );

2. 调整CSS样式 #

在主题的自定义CSS里添加以下样式，确保商品卡片自适应布局：

.woocommerce .products {
    margin: 0 -7.5px; /* 抵消gutter的间距 */
}
.woocommerce .products .product {
    width: calc(33.333% - 15px); /* 三列布局，可根据需求改成25%（四列）或50%（两列） */
    margin: 0 7.5px 15px; /* 上下左右间距 */
    float: none; /* 取消默认浮动，避免Masonry冲突 */
}
/* 响应式适配 */
@media (max-width: 768px) {
    .woocommerce .products .product {
        width: calc(50% - 15px); /* 移动端两列 */
    }
}
@media (max-width: 480px) {
    .woocommerce .products .product {
        width: 100%; /* 移动端单列 */
    }
}

注意事项 #

• 不同主题的商品列表类名可能不一样，比如有些主题用.woocommerce-products-loop代替.products，你可以通过浏览器的开发者工具（F12）查看页面元素来确认正确的类名。
• 如果出现布局错位，大概率是图片加载延迟导致的，代码里已经加了imagesLoaded的处理，一般能解决这个问题。

内容的提问来源于stack exchange，提问作者Jotan