在 WooCommerce 短代码的 <li> 输出中添加包含 <div>答案

【问题标题】：Add containing <div> inside <li> output from WooCommerce shortcode在 WooCommerce 短代码的 <li> 输出中添加包含 <div>
【发布时间】：2016-08-16 21:31:50
【问题描述】：

我希望使用此短代码：

[product_category category="music"]

输出此代码：

            <div class="woocommerce columns-4">
                <ul class="products">
                    <li class="post-83 product type-product status-publish has-post-thumbnail product_cat-albums product_cat-music first instock downloadable shipping-taxable purchasable product-type-simple">
                    <a href="http://localhost/websitename/product/woo-album-1/" class="woocommerce-LoopProduct-link"><img width="300" height="300" src="http://localhost/websitename/wp-content/uploads/2013/06/cd_1_angle-300x300.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="cd_1_angle" title="cd_1_angle" srcset="http://localhost/websitename/wp-content/uploads/2013/06/cd_1_angle-300x300.jpg 300w, http://localhost/websitename/wp-content/uploads/2013/06/cd_1_angle-150x150.jpg 150w, http://localhost/websitename/wp-content/uploads/2013/06/cd_1_angle-768x768.jpg 768w, http://localhost/websitename/wp-content/uploads/2013/06/cd_1_angle-180x180.jpg 180w, http://localhost/websitename/wp-content/uploads/2013/06/cd_1_angle-600x600.jpg 600w, http://localhost/websitename/wp-content/uploads/2013/06/cd_1_angle.jpg 1000w" sizes="(max-width: 300px) 100vw, 300px">
                    <h3>Woo Album #1</h3>
                    <span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>9.00</span></span>
                    </a><a rel="nofollow" href="/websitename/?add-to-cart=83" data-quantity="1" data-product_id="83" data-product_sku="" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a></li>
                    <li class="post-87 product type-product status-publish has-post-thumbnail product_cat-albums product_cat-music instock featured downloadable shipping-taxable purchasable product-type-simple">
                    <a href="http://localhost/websitename/product/woo-album-2/" class="woocommerce-LoopProduct-link"><img width="300" height="300" src="http://localhost/websitename/wp-content/uploads/2013/06/cd_2_angle-300x300.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="cd_2_angle" title="cd_2_angle" srcset="http://localhost/websitename/wp-content/uploads/2013/06/cd_2_angle-300x300.jpg 300w, http://localhost/websitename/wp-content/uploads/2013/06/cd_2_angle-150x150.jpg 150w, http://localhost/websitename/wp-content/uploads/2013/06/cd_2_angle-768x768.jpg 768w, http://localhost/websitename/wp-content/uploads/2013/06/cd_2_angle-180x180.jpg 180w, http://localhost/websitename/wp-content/uploads/2013/06/cd_2_angle-600x600.jpg 600w, http://localhost/websitename/wp-content/uploads/2013/06/cd_2_angle.jpg 1000w" sizes="(max-width: 300px) 100vw, 300px">
                    <h3>Woo Album #2</h3>
                    <div class="star-rating" title="Rated 4 out of 5">
                        <span style="width:80%"><strong class="rating">4</strong> out of 5</span>
                    </div>
                    <span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>9.00</span></span>
                    </a><a rel="nofollow" href="/websitename/?add-to-cart=87" data-quantity="1" data-product_id="87" data-product_sku="" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a></li>
                    <li class="post-90 product type-product status-publish has-post-thumbnail product_cat-albums product_cat-music instock downloadable shipping-taxable purchasable product-type-simple">
                    <a href="http://localhost/websitename/product/woo-album-3/" class="woocommerce-LoopProduct-link"><img width="300" height="300" src="http://localhost/websitename/wp-content/uploads/2013/06/cd_3_angle-300x300.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="cd_3_angle" title="cd_3_angle" srcset="http://localhost/websitename/wp-content/uploads/2013/06/cd_3_angle-300x300.jpg 300w, http://localhost/websitename/wp-content/uploads/2013/06/cd_3_angle-150x150.jpg 150w, http://localhost/websitename/wp-content/uploads/2013/06/cd_3_angle-768x768.jpg 768w, http://localhost/websitename/wp-content/uploads/2013/06/cd_3_angle-180x180.jpg 180w, http://localhost/websitename/wp-content/uploads/2013/06/cd_3_angle-600x600.jpg 600w, http://localhost/websitename/wp-content/uploads/2013/06/cd_3_angle.jpg 1000w" sizes="(max-width: 300px) 100vw, 300px">
                    <h3>Woo Album #3</h3>
                    <div class="star-rating" title="Rated 3 out of 5">
                        <span style="width:60%"><strong class="rating">3</strong> out of 5</span>
                    </div>
                    <span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>9.00</span></span>
                    </a><a rel="nofollow" href="/websitename/?add-to-cart=90" data-quantity="1" data-product_id="90" data-product_sku="" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a></li>
                    <li class="post-96 product type-product status-publish has-post-thumbnail product_cat-albums product_cat-music last instock downloadable shipping-taxable purchasable product-type-simple" style=" margin-right: 0; ">
                    <a href="http://localhost/websitename/product/woo-album-4/" class="woocommerce-LoopProduct-link"><img width="300" height="300" src="http://localhost/websitename/wp-content/uploads/2013/06/cd_5_angle-300x300.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="cd_5_angle" title="cd_5_angle" srcset="http://localhost/websitename/wp-content/uploads/2013/06/cd_5_angle-300x300.jpg 300w, http://localhost/websitename/wp-content/uploads/2013/06/cd_5_angle-150x150.jpg 150w, http://localhost/websitename/wp-content/uploads/2013/06/cd_5_angle-768x768.jpg 768w, http://localhost/websitename/wp-content/uploads/2013/06/cd_5_angle-180x180.jpg 180w, http://localhost/websitename/wp-content/uploads/2013/06/cd_5_angle-600x600.jpg 600w, http://localhost/websitename/wp-content/uploads/2013/06/cd_5_angle.jpg 1000w" sizes="(max-width: 300px) 100vw, 300px">
                    <h3>Woo Album #4</h3>
                    <div class="star-rating" title="Rated 5 out of 5">
                        <span style="width:100%"><strong class="rating">5</strong> out of 5</span>
                    </div>
                    <span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>9.00</span></span>
                    </a><a rel="nofollow" href="/websitename/?add-to-cart=96" data-quantity="1" data-product_id="96" data-product_sku="" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a></li>
                </ul>
            </div>

我想在每个产品的<li> 内添加一个包含<div> 的内容。 我这样做是因为我想为 <li> 添加网格填充，并希望在我的 <div> 上添加带有进一步填充的边框添加。

有没有办法修改短代码输出来做到这一点？
任何建议将不胜感激。

我知道我可以通过复制短代码的功能来做到这一点，但仅仅添加 <div> 似乎有点过头了。

我可以用 jQuery 做到这一点，但不希望它们的加载有任何延迟。

in this answer之前我也试过了，但那不方便我真正想要的。

【问题讨论】：

标签： php html wordpress woocommerce product

【解决方案1】：

试试这个。

这是通过 wordpress 钩子添加<div>，并带有优先级。

add_action ( "woocommerce_before_shop_loop_item", "after_li_started", 9 );

function after_li_started () {
    echo "<div>";
}

add_action ( "woocommerce_after_shop_loop_item", "before_li_started", 10 );

function before_li_started () {
    echo "</div>";
}

祝你好运

【讨论】：

【解决方案2】：

这是您可以在 li 中放置 div 的代码。我在 li 中命名了类“inside-wrapper”，您可以在代码中看到。

<?php
function overwrite_shortcode_custom() 
{ 
    function override_product_cat_shortcode( $atts ) {
    global $post, $wp_locale;

    $termname = $atts['category'];
    $category = get_term_by('name', $termname, 'product_cat');
    /*echo '<pre>';
    print_r($category);
    echo '</pre>';*/
    ?>
    <div class="woocommerce columns-4">
    <?php
    woocommerce_product_loop_start();
    $taxarg = array(
        'taxonomy' => 'product_cat',
        'field' => 'id',
        'terms' => $category->term_id,
        'operator' => 'IN'
    );

     $args = array(
        'post_type'     =>  'product',
        'post_status'   =>  'publish',
        'posts_per_page'  =>  -1,
        'orderby' => 'id',
        'order' => 'asc',
        'tax_query' => array(                     //(array) - use taxonomy parameters (available with Version 3.1).
          'relation' => 'AND',                      //(string) - Possible values are 'AND' or 'OR' and is the equivalent of ruuning a JOIN for each taxonomy
          $taxarg
          ),
        );  
        $loop = new WP_Query($args);
        while ( $loop->have_posts() ) : $loop->the_post();

        global $product;

        // Ensure visibility
        if ( empty( $product ) || ! $product->is_visible() ) {
            return;
        }
        ?>
        <li <?php post_class(); ?>>
        <div class="inside-wrapper">
            <?php
            /**
             * woocommerce_before_shop_loop_item hook.
             *
             * @hooked woocommerce_template_loop_product_link_open - 10
             */
            do_action( 'woocommerce_before_shop_loop_item' );

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

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

            /**
             * woocommerce_after_shop_loop_item_title hook.
             *
             * @hooked woocommerce_template_loop_rating - 5
             * @hooked woocommerce_template_loop_price - 10
             */
            do_action( 'woocommerce_after_shop_loop_item_title' );

            /**
             * woocommerce_after_shop_loop_item hook.
             *
             * @hooked woocommerce_template_loop_product_link_close - 5
             * @hooked woocommerce_template_loop_add_to_cart - 10
             */
            do_action( 'woocommerce_after_shop_loop_item' );
            ?>
            </div>
        </li>
        <?php  
        endwhile; wp_reset_query();

        woocommerce_product_loop_end();     
        ?>
        </div>
        <?php

}
remove_shortcode('product_category');
add_shortcode( 'product_category', 'override_product_cat_shortcode' );
} 
add_action( 'wp_loaded', 'overwrite_shortcode_custom' );
?>

【讨论】：