仅为商店页面更改 WooCommerce 产品列 CSS答案

【问题标题】：Change WooCommerce product column CSS for Shop page only仅为商店页面更改 WooCommerce 产品列 CSS
【发布时间】：2019-03-05 02:40:04
【问题描述】：

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

感谢任何帮助！

【问题讨论】：

您在哪里使用此代码？它在动作钩子里面吗？
嗨，很抱歉造成混淆，我已更新问题中的代码以显示我在子主题函数中使用的完整函数。

标签： php css wordpress woocommerce storefront

【解决方案1】：

你需要在你的函数中添加一个 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 的更多信息。

【讨论】：

啊，当然！ - 打额头！感谢您指出这一点。我错过了我的 add_action。
回到这一点，它工作得很好，但我也注意到，如果人们使用页面上的搜索框，这也会影响列。任何想法为什么会这样？
尝试从添加的 CSS 中删除它：ul.products li.product

【解决方案2】：

若要在相同高度的商店页面上制作产品循环，请将所有循环项目包装在您的自定义 div 中，然后编写您的样式。

将以下代码粘贴到当前活动主题 functions.php 文件中

function start_before_shop_loop_item() {
   echo '<div class="custom_shop_loop_wrap">';
}
function end_after_shop_loop_item() {
  echo '</div>';
}
add_action( 'woocommerce_before_shop_loop_item', 'start_before_shop_loop_item', 10 );
add_action( 'woocommerce_after_shop_loop_item', 'end_after_shop_loop_item', 10 );

然后使用 custom_shop_loop_wrap 类添加您的样式。

function custom_css_add_wrap(){?>
<style>
    .custom_shop_loop_wrap{
      height:height:320px;
      max-height:320px;
}
</style>
   <?php }
add_action('wp_head', 'custom_css_add_wrap' );

【讨论】：