WooCommerce 产品简码输出 class="columns-x" 两次

Question

只是对 functions.php 中产品类别简码的普通调用让我感到困惑。

我正在尝试让 columns-3 的文本位于 columns-9 的产品旁边。

我的代码：

<div class="content">
  <div class="columns-3">
    <?php $home_kit = get_term(30, 'product_cat', ARRAY_A); ?>
    <h2 class="section-title"><?php echo $home_kit['name']; ?></h2>
    <p><?php echo $home_kit['description']; ?></p>
    <a href=" <?php echo get_category_link($home_kit['term_id']); ?>">All Products &raquo;</a>
  </div>
  <?php echo do_shortcode('[product_category category="home-kits" per_page="3" orderby="price" order="desc" columns="9"]'); ?>
</div>

简码生成：

<div class="homepage-home-kit-category">
  <div class="content">
    <div class="columns-3">
     <h2...</h2>
     <p>...</p>
     <a ...</a>
    </div>
    <div class="woocommerce columns-9 ">
      <ul class="products columns-9">
        <li></li>
      </ul>
    </div>
  </div>
</div>

注意在生成的 <div> 和 <ul> 上重复 columns-9。

如果 <div> 和 <ul> 都有 class columns-9 那么我得到可用的 3/4 的 3/4。

当然 class columns-9 只需要在 WooComerce <div> 或 <ul>.

上

如何从 <ul> 元素中删除此添加项？

我很感激我收到的所有有效且运作良好的答案。我想我的根本问题是我看不到 product_category 短代码的用处，因为它没有忠实地遵守 columns 参数。我一个人吗？

Answer 1

remove/modify columns-9 class 从 <ul> 元素

有几个选项

解决方案 1 - 通过使用过滤器钩子。

function filter_woocommerce_product_loop_start( $loop_start ) {
    // New output
    $loop_start = '<ul class="products">';
    
    return $loop_start;
}
add_filter( 'woocommerce_product_loop_start', 'filter_woocommerce_product_loop_start', 10, 1 );

解决方案 2 - 覆盖模板文件。

您可以覆盖 templates/loop/loop-start.php 模板文件

可以通过将其复制到 yourtheme/woocommerce/loop/loop-start.php.

替换

<ul class="products columns-<?php echo esc_attr( wc_get_loop_prop( 'columns' ) ); ?>">

有

<ul class="products">

解决方案 3 - 覆盖现有函数。

由于 woocommerce_product_loop_start 使用 function_exits，请参阅：第 1110-1134 行的 includes/wc-template-functions.php @version 2.5.0

更多信息：What's "function_exists" in Wordpress

/**
 * Output the start of a product loop. By default this is a UL.
 *
 * @param bool $echo Should echo?.
 * @return string
 */
function woocommerce_product_loop_start( $echo = true ) {
    $loop_start = '<ul class="products">';

    if ( $echo ) {
        // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
        echo $loop_start;
    } else {
        return $loop_start;
    }
}

WooCommerce 产品简码输出 class="columns-x" 两次

WooCommerce products shortcode outputs class="columns-x" twice

wordpress

product

storefront

shortcode

woocommerce