添加包含< div>里面< li>从WooCommerce短码输出 [英] Add containing <div> inside <li> output from WooCommerce shortcode
问题描述
[product_category category =music]
$
< div class =woocommerce columns-4>
< ul class =products>
< a href =http:// localhost / websitename / product / woo-album-1 /class =woocommerce-LoopProduct-link>< img width =300height =300 src =http://localhost/websitename/wp-content/uploads/2013/06/cd_1_angle-300x300.jpgclass =attachment-shop_catalog size-shop_catalog wp-post-imagealt =cd_1_angletitle = cd_1_anglesrcset =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 1000wsizes =(max-width:300px)100vw,300px>
< h3> Woo相簿#1< / h3>
< span class =price>< span class =woocommerce-Price-amount amount>< span class =woocommerce-Price-currencySymbol>£< / span> 9.00 < /跨度>< /跨度>
< a rel =nofollowhref =/ websitename /?add-to-cart = 83data-product =1data-product_id =83data-product_sku = class =button product_type_simple add_to_cart_button ajax_add_to_cart>添加到购物车< / a>< / li>
< a href =http:// localhost / websitename / product / woo-album-2 /class =woocommerce-LoopProduct-link>< img width =300height =300 src =http://localhost/websitename/wp-content/uploads/2013/06/cd_2_angle-300x300.jpgclass =attachment-shop_catalog size-shop_catalog wp-post-imagealt =cd_2_angletitle = cd_2_anglesrcset =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 1000wsizes =(max-width:300px)100vw,300px>
< h3> Woo相簿#2< / h3>
< div class =star-ratingtitle =Rated 4 out of 5>
< span style =width:80%>< strong class =rating> 4< / strong> 5分< / span>
< / div>
< span class =price>< span class =woocommerce-Price-amount amount>< span class =woocommerce-Price-currencySymbol>£< / span> 9.00 < /跨度>< /跨度>
< a rel =nofollowhref =/ websitename /?add-to-cart = 87data-product =1data-product_id =87data-product_sku = class =button product_type_simple add_to_cart_button ajax_add_to_cart>添加到购物车< / a>< / li>
< a href =http:// localhost / websitename / product / woo-album-3 /class =woocommerce-LoopProduct-link>< img width =300height =300 src =http://localhost/websitename/wp-content/uploads/2013/06/cd_3_angle-300x300.jpgclass =attachment-shop_catalog size-shop_catalog wp-post-imagealt =cd_3_angletitle = cd_3_anglesrcset =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 1000wsizes =(max-width:300px)100vw,300px>
< h3> Woo相簿#3< / h3>
< div class =star-ratingtitle =Rated 3 out of 5>
< span style =width:60%>< strong class =rating> 3< / strong> 5分< / span>
< / div>
< span class =price>< span class =woocommerce-Price-amount amount>< span class =woocommerce-Price-currencySymbol>£< / span> 9.00 < /跨度>< /跨度>
< / a>< a rel =nofollowhref =/ websitename /?add-to-cart = 90data-product_id =1data-product_sku = class =button product_type_simple add_to_cart_button ajax_add_to_cart>添加到购物车< / a>< / li>
< a href =http:// localhost / websitename / product / woo-album-4 /class =woocommerce-LoopProduct-link>< img width =300height =300 src =http://localhost/websitename/wp-content/uploads/2013/06/cd_5_angle-300x300.jpgclass =attachment-shop_catalog size-shop_catalog wp-post-imagealt =cd_5_angletitle = cd_5_anglesrcset =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 1000wsizes =(max-width:300px)100vw,300px>
< h3> Woo相簿#4< / h3>
< div class =star-ratingtitle =Rated 5 out of 5>
< span style =width:100%>< strong class =rating> 5< / strong> 5分< / span>
< / div>
< span class =price>< span class =woocommerce-Price-amount amount>< span class =woocommerce-Price-currencySymbol>£< / span> 9.00 < /跨度>< /跨度>
< / ul>
< / div>
我想要添加一个包含<$ c $每个产品中的
< li>
内的c>< div> 我这样做是因为我想向< li>
添加网格填充,并且希望添加带有更多填充的边框我添加的< div>
。
有没有一种方法可以修改短码输出来做到这一点?
任何建议都会非常值得。
我知道我可以通过复制短代码来做到这一点,但似乎只是为了添加
< div>
而过分。
我可以用jQuery来做,但不希望在它们中加载任何延迟。
我之前也试过<强>在这个答案
,但这并不方便为了我真正想要的东西。解决方案试试这个。
通过wordpress钩子添加
< div>
与优先事项。add_action(woocommerce_before_shop_loop_item,after_li_started,9);
函数after_li_started(){
echo< div>;
}
add_action(woocommerce_after_shop_loop_item,before_li_started,10);
函数before_li_started(){
echo< / div>;
}
祝您好运
I am looking to use this shortcode:
[product_category category="music"]
Which outputs this code:
<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>
I would like to add a containing
<div>
inside the<li>
for each product. I am doing this because I want to add grid padding to the<li>
and want to add a border with further padding on the<div>
that I am adding.Is there a way to amend the shortcode output to do this?
Any advice would be really appreciate.I know I can do this by duplicating what the shortcode does but that seems overkill just to add a
<div>
.I could do it with jQuery but don't want any delay in them loading.
I have also tried before in this answer, but that was not convenient for what I really want.
解决方案Try this.
This is adding
<div>
via wordpress hooks, with priorities.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>"; }
Good luck
这篇关于添加包含< div>里面< li>从WooCommerce短码输出的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!