php - 仅更改商店页面的 WooCommerce 产品列 CSS

Question

我正在使用带有店面主题和子主题的最新 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 来查看它是否有任何区别。但是没有。

感谢任何帮助!

Answer 1

您需要在您的函数中添加一个 wp_head Action 钩子(Hook):

例子:

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 .