php - 更改WooCommerce产品列CSS仅适用于商店页面

我正在将最新的Wordpress与店面主题和子主题一起使用。

我想更改WooCommerce产品列的height:和padding:（实际上是类别，但它们使用相同的列）。
在商店页面上，仅显示类别，这些类别不需要与产品列一样高（类别中没有价格，没有销售标签，无需立即购买或添加到购物车按钮等）

我在子主题函数中使用了这小段PHP来尝试实现这一点，但是它似乎并没有改变任何东西，也没有给出任何错误：

function dayles_custom_shop_columns()
{
    if (function_exists('is_shop') && is_shop()) {
        echo "<style type='text/css'>.storefront-full-width-content .site-main ul.products.columns-4 li.product, ul.products li.product {height:320px!important;padding:20px!important;min-height:320px!important;max-height:320px!important;}</style>";
    } else {
       //Do nothing.
    }
}

我也使用！important进行了尝试，看是否有任何区别。但是不。

任何帮助表示赞赏！

最佳答案

您需要在函数中添加wp_head操作钩子：

例：

function my_custom_css() {
     if (function_exists('is_shop') && is_shop()) {
        echo "<style type='text/css'>.storefront-full-width-content .site-main ul.products.columns-4 li.product, ul.products li.product {height:320px!important;padding:20px!important;min-height:320px!important;max-height:320px!important;}</style>";
    }
}
add_action('wp_head', 'my_custom_css' );

有关wp_head操作here的更多信息。