I have fixed all things in Woocommerce plugin as per my requirements, but i am unable to find one solution. Woocommerce default shop page products loop code is like this
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
I want it to change this code into this
<div class="row">
<div class="col-md-4">
// Product Loop Card here
</div>
<div class="col-md-4">
// Product Loop Card here
</div>
<div class="col-md-4">
// Product Loop Card here
</div>
<div class="col-md-4">
// Product Loop Card here
</div>
// etc etc etc
</div>
Which function/filter/hooks or custom template can do this? Please help me
You have to change the file named
content-product.php
you can get this here
wp-content\plugins\woocommerce\templates
Just change the follows templates by overridden it into your theme -
loop/loop-start.php
-> remove <ul>
tag and replace it with <div class="row products columns-<?php echo esc_attr( wc_get_loop_prop( 'columns' ) ); ?>">
loop/loop-end.php
-> remove </ul>
tag and replace it with </div>
content-product.php
-> 1. remove <li <?php wc_product_class( '', $product ); ?>>
<li <?php wc_product_class( '', $product ); ?>>
tag and replace it with <div class="col-md-4">
2. remove </li>
tag and replace it with </div>
you need to access the woocommerce/loop folder
inside it has two loop-strat and loop-end files
delete ul, if using bootstrap enter the following code
<div class="container">
<div class="row">
in loop-end file you need to close divs
</div>
</div>
now in the content-product file you will create your loop I'm leaving one here of my files example.
<div class="col-md-3 col-sm-6" >
<div class="product-grid6">
<div class="product-image6">
<?php do_action('woocommerce_before_shop_loop_item_title');?>
</div>
<div class="product-content">
<h3 class="title"><?php do_action('woocommerce_shop_loop_item_title');?></h3>
<div class="price">
<span> <?php do_action('woocommerce_after_shop_loop_item_title');?>
</span>
</div>
</div>
<ul class="social">
<li><a href="" data-tip="Quick View"><i class="fa fa-search"></i></a></li>
<li><a href="" data-tip="Add to Wishlist"><i class="fa fa-shopping-bag"></i></a></li>
<li><a href="" data-tip="Add to Cart"><i class="fa fa-shopping-cart"></i></a></li>
</ul>
</div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.