Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce custom shop page layout

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>

Screenshot of what gone wrong
enter image description here

Which function/filter/hooks or custom template can do this? Please help me

Tags:

3

Answers


  1. 0

    You have to change the file named 

    content-product.php

    you can get this here 

    wp-contentpluginswoocommercetemplates
    Login or Signup to reply.
  2. 0

    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 ); ?>> tag and replace it with <div class="col-md-4">
    2. remove </li> tag and replace it with </div>

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search