时间戳

首页 > 解决方案 > 如何在 Woocommerce 的 div 中添加父类？

html - 如何在 Woocommerce 的 div 中添加父类？

问题描述

我正在学习woocommerce。我必须编辑content-product.php文件。我的意思是我必须添加父母 div 所以我打开页面并将父类添加到这个woocommerce_after_shop_loop_item。

// Ensure visibility.
if ( empty( $product ) || ! $product->is_visible() ) {
    return;
}
?>
<li <?php wc_product_class( '', $product ); ?>>
    <div class="products-inner">
    <?php
    /**
     * Hook: woocommerce_before_shop_loop_item.
     *
     * @hooked woocommerce_template_loop_product_link_open - 10
     */
    do_action( 'woocommerce_before_shop_loop_item' );

    /**
     * Hook: woocommerce_before_shop_loop_item_title.
     *
     * @hooked woocommerce_show_product_loop_sale_flash - 10
     * @hooked woocommerce_template_loop_product_thumbnail - 10
     */
    do_action( 'woocommerce_before_shop_loop_item_title' );

    /**
     * Hook: woocommerce_shop_loop_item_title.
     *
     * @hooked woocommerce_template_loop_product_title - 10
     */
    do_action( 'woocommerce_shop_loop_item_title' );

    /**
     * Hook: woocommerce_after_shop_loop_item_title.
     *
     * @hooked woocommerce_template_loop_rating - 5
     * @hooked woocommerce_template_loop_price - 10
     */
    do_action( 'woocommerce_after_shop_loop_item_title' );
?>
<div class="product-inner-wrap">
    <div class="">
<div class="product-inner-list">
    
<?php
    /**
     * Hook: woocommerce_after_shop_loop_item.
     *
     * @hooked woocommerce_template_loop_product_link_close - 5
     * @hooked woocommerce_template_loop_add_to_cart - 10
     */
    do_action( 'woocommerce_after_shop_loop_item' );
    ?>
</div>
</div>
</div>
</div>
</li>

现在我的问题是，每次我得到空的锚标签。

<a href="Product URL" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"></a>

我的观点是，

<div class="product-inner-wrap">
  <a href="Product URL" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
  </a>
  <div class="">
    <a href="Product URL" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
    </a>
    <div class="product-inner-list">
      <a href="Product URL" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
      </a>

      //add to cart button
    </div>
  </div>
</div>

我期待输出

<div class="product-inner-wrap">
   <div class="">
    <div class="product-inner-list">
      //add to cart button
    </div>
  </div>
</div>

@m4n0 建议。这是正确的方法吗？

在此处输入图像描述

// define the woocommerce_after_shop_loop_item callback 
function action_woocommerce_after_shop_loop_item(  ) { 
   echo' <div class="product-inner-wrap">
           <div class="">
            <div class="product-inner-list">
              //add to cart button
            </div>
          </div>
        </div>';

}; 
         
// add the action 
add_action( 'woocommerce_after_shop_loop_item', 'action_woocommerce_after_shop_loop_item', 10, 0 );

标签： htmlwoocommercehook-woocommerce

解决方案

如果你想在content-product.php模板中添加额外的 HTML 代码，你必须在你想要添加代码的地方使用钩子 （正如 @m4n0 正确建议的那样）。

如果您的目标是添加 HTML 标记，如第一段代码所示，您可以使用以下钩子：

如果您想避免创建额外的锚标记，请使用 HTML<span>标记而不是。<div>

如果您希望显示链接，请在您想要的位置替换span为div。在这种情况下，对于具有类属性
的元素，我用product-inner-listspandiv.

add_action( 'woocommerce_before_shop_loop_item', 'woocommerce_before_shop_loop_item_callback' ); 
function woocommerce_before_shop_loop_item_callback() {
    ?>
    <span class="products-inner">
    <?php
}

add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_after_shop_loop_item_title_callback' ); 
function woocommerce_after_shop_loop_item_title_callback() {
    ?>
    <span class="product-inner-wrap"><span class=""><div class="product-inner-list">
    <?php
}

add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_after_shop_loop_item_callback' ); 
function woocommerce_after_shop_loop_item_callback() {
    ?>
    </div></span></span></span>
    <?php
}

代码需要添加到活动主题的 functions.php 文件中。

推荐阅读