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

Question

我希望使用这个短代码：

\n\n

[product_category category="music"] \n

\n\n

输出此代码：

\n\n

            <div class="woocommerce columns-4">\n                <ul class="products">\n                    <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">\n                    <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">\n                    <h3>Woo Album #1</h3>\n                    <span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">\xc2\xa3</span>9.00</span></span>\n                    </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>\n                    <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">\n                    <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">\n                    <h3>Woo Album #2</h3>\n                    <div class="star-rating" title="Rated 4 out of 5">\n                        <span style="width:80%"><strong class="rating">4</strong> out of 5</span>\n                    </div>\n                    <span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">\xc2\xa3</span>9.00</span></span>\n                    </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>\n                    <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">\n                    <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">\n                    <h3>Woo Album #3</h3>\n                    <div class="star-rating" title="Rated 3 out of 5">\n                        <span style="width:60%"><strong class="rating">3</strong> out of 5</span>\n                    </div>\n                    <span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">\xc2\xa3</span>9.00</span></span>\n                    </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>\n                    <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; ">\n                    <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">\n                    <h3>Woo Album #4</h3>\n                    <div class="star-rating" title="Rated 5 out of 5">\n                        <span style="width:100%"><strong class="rating">5</strong> out of 5</span>\n                    </div>\n                    <span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">\xc2\xa3</span>9.00</span></span>\n                    </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>\n                </ul>\n            </div>\n

\n\n

\n

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

\n

\n\n

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

\n\n

我知道我可以通过复制短代码的功能来做到这一点，但这似乎只是添加一个<div>.

\n\n

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

\n\n

我之前也曾在这个答案中尝试过，但这对于我真正想要的东西来说并不方便。

\n

Answer 1

尝试这个。

这是<div>通过 wordpress 挂钩添加的，并具有优先级。

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>";
}

祝你好运