You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

WooCommerce新手求助:如何添加及扩展Storefront主题畅销商品模块?

Hey there! Let's work through your Storefront theme questions—no need to dig into core theme functions directly (that’s why your manual edit didn’t stick, by the way; theme updates would wipe those changes right out). Here’s how to fix both issues safely:

1. Adding Extra Best-Selling Products to Storefront

Storefront uses a dedicated filter to control how many best-selling products show up on the homepage. Instead of editing the storefront_best_selling_products function directly, use this filter to adjust the product count. Add this code to your child theme’s functions.php file, or use a plugin like Code Snippets to inject it:

// Increase the number of best-selling products on Storefront homepage
add_filter( 'storefront_homepage_best_selling_products_args', 'custom_increase_best_selling_count' );
function custom_increase_best_selling_count( $args ) {
    // Set this to the total number of products you want to display (16 for your 4x4 layout)
    $args['posts_per_page'] = 16;
    return $args;
}
2. Changing the Layout from 4×1 to 4×4

To get that 4-column by 4-row grid, we need two things: 16 total products (which the code above handles) and a 4-column layout for the product section. Storefront lets you adjust the column count with another filter. Add this right after the previous code:

// Set 4 columns for the homepage best-selling products grid
add_filter( 'loop_shop_columns', 'custom_best_selling_product_columns' );
function custom_best_selling_product_columns( $columns ) {
    // Make sure we only affect the homepage best-selling section, not other product pages
    if ( is_front_page() && is_active_sidebar( 'homepage-widgets' ) ) {
        return 4;
    }
    // Keep the default column count for other pages
    return $columns;
}

Quick Note on Why Your Manual Edit Didn’t Work

The storefront_best_selling_products function pulls its parameters from the storefront_homepage_best_selling_products_args filter. When you edited the function directly in the theme files, any future Storefront update would overwrite that file—losing your changes. Using filters is the official, update-safe way to tweak theme behavior.

Just remember: always use a child theme or code snippet plugin instead of editing parent theme files directly. That way, your customizations stay intact when the theme updates.

内容的提问来源于stack exchange,提问作者Misha

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.26 10:40:38