WooCommerce [products]短代码容器类及钩子相关技术问询

一、修改

和

类的钩子与模板 #

1. 专用过滤钩子 #

不用在wc-template-functions.php里找，WooCommerce提供了直接对应这两个元素的钩子：

• 外层
  的类：使用woocommerce_shortcode_products_class钩子，负责生成短代码外层容器的class，参数包含默认类字符串和短代码属性数组。
• 产品列表
  的类：使用woocommerce_product_loop_classes钩子，控制
  的class列表，参数是默认类数组和短代码属性数组。

  2. 模板文件修改 #

  如果偏好直接编辑模板，先找到WooCommerce的模板文件：wp-content/plugins/woocommerce/templates/shortcodes/products.php，复制到子主题的woocommerce/shortcodes/目录下（防止插件更新丢失修改），再找到对应代码段调整：

  • 对应
    的代码：

  <div class="<?php echo esc_attr( apply_filters( 'woocommerce_shortcode_products_class', 'woocommerce columns-' . absint( $columns ), $atts ) ); ?>">
  

  • 对应
    的代码：

    <ul class="<?php echo esc_attr( implode( ' ', apply_filters( 'woocommerce_product_loop_classes', array( 'products', 'columns-' . absint( $columns ) ), $atts ) ) ); ?>">
    

    二、限制钩子仅在特定短代码调用生效的最佳实践 #

    最稳妥的方式是给目标[products]短代码添加自定义标识参数，然后在钩子函数中检查该参数是否匹配，避免影响其他短代码实例。

    三、通过短代码传递自定义参数并检查的实现 #

    完全可以实现，具体步骤如下：

    1. 给目标短代码添加自定义参数：
       比如给需要修改的短代码加一个专属标识：

    [products columns="1" custom_shop="my_target_page"]
    

    2. 编写钩子函数检查参数并修改类：

    // 修改外层<div>的类
    add_filter( 'woocommerce_shortcode_products_class', 'custom_products_div_class', 10, 2 );
    function custom_products_div_class( $class, $atts ) {
        // 检查自定义参数是否存在且值匹配
        if ( isset( $atts['custom_shop'] ) && $atts['custom_shop'] === 'my_target_page' ) {
            // 替换原有类或添加新类
            $class = str_replace( 'columns-1', 'columns-2 custom-div-container', $class );
        }
        return $class;
    }
    
    // 修改产品列表<ul>的类
    add_filter( 'woocommerce_product_loop_classes', 'custom_products_ul_class', 10, 2 );
    function custom_products_ul_class( $classes, $atts ) {
        if ( isset( $atts['custom_shop'] ) && $atts['custom_shop'] === 'my_target_page' ) {
            // 添加自定义类
            $classes[] = 'custom-products-list';
            // 替换columns类
            foreach ( $classes as $key => $item ) {
                if ( strpos( $item, 'columns-' ) !== false ) {
                    $classes[$key] = 'columns-2';
                    break;
                }
            }
        }
        return $classes;
    }
    

    将这段代码添加到子主题的functions.php或自定义插件中即可生效。

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