代码之家 › 专栏 › 技术社区 › Dayley

只为商店页面更改商品列CSS

storefront woocommerce wordpress css php

Dayley · 技术社区 · 6 年前

我正在使用最新的Wordpress与店面主题&儿童主题。

我想改变现状 height: 和 padding: WooCommerce产品的列(实际上是类别,但它们使用相同的列)。在商店页面上显示的类别不需要像产品栏那样高(类别上没有价格、没有销售标签、没有立即购买或添加到购物车按钮等)

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.
    }
}

感谢您的帮助!

2 回复 | 直到 6 年前

Ivnhal 6 年前

您需要在函数中添加一个wp\u 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' );

here

dineshkashera 6 年前

若要在相同高度的店铺页面上制作产品环,请将所有环项目包装在您的自定义div中,然后写下您的风格。

在当前活动主题中粘贴以下代码 函数.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' );

推荐文章

Jacco · 未能格式化我的日期以在php中正确工作

1 年前