仅更改商店页面的 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 动作挂钩：

示例：

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。

Answer 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 );

然后使用 class 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' );

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

Change WooCommerce product column CSS for Shop page only

css

php

wordpress

storefront

woocommerce