php - single - woocommerce product page template

Agregue contenido que contenga<div> dentro de<li> del código corto de WooCommerce

Question

Estoy buscando usar este shortcode:

[product_category category="music"] 

Que saca este código:

 <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>

Me gustaría agregar un contenido <div> dentro del <li> para cada producto . Hago esto porque quiero agregar relleno de cuadrícula al <li> y quiero agregar un borde con más relleno en el <div> que estoy agregando.

¿Hay alguna forma de modificar la salida del shortcode para hacer esto?
Cualquier consejo sería realmente apreciado.

Sé que puedo hacer esto duplicando lo que hace el shortcode, pero eso parece exagerado solo para agregar un <div> .

Podría hacerlo con jQuery pero no quiero ningún retraso en su carga.

También he intentado antes en esta respuesta , pero eso no era conveniente para lo que realmente quiero.

Answer 1

Prueba esto.

Esto es agregar <div> través de los ganchos de wordpress, con prioridades.

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

Buena suerte

Answer 2

Aquí está el código por el cual puedes colocar un div dentro de li. He llamado class "inside-wrapper" en el li que puedes ver en el código.

<?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'' );
?>