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

然后使用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仅适用于商店页面

2 个答案: