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

Woocommerce – Woocomerce WordPress PHP wrap shop <ul> items in <div>

I am building a theme and I’m having a little bit of trouble, I am trying to modify the /shop page template.

My current HTML output is as follows:

<div class="row">
<section id="nav_menu-3" class="col-md-3"> [nav menu items go here] </div>  // this is a sidebar widget
<ul class="products columns-3"> <li> [woocomerce products go here]</li></ul> 
</div>

I have been able to add the first row using the hook – add_action( ‘woocommerce_before_shop_loop’) and after shop loop.

I now want to wrap the class in another so the output is like this:

<div class="row">
<section id="nav_menu-3" class="col-md-3"> [nav menu items go here] </div>  // this is a sidebar widget
<div class="col-md-8"> // start new div
<ul class="products columns-3"> <li> [woocomerce products go here]</li></ul> 
</div> // end new div
</div>

If i Add this in my current function it seems to break the layout – here is my before shop loop item.

function  woocommerce_product_columns_wrapper() {
    $columns =  woocommerce_loop_columns();
    echo '<div class="row">';       
 }

}
add_action( 'woocommerce_before_shop_loop', ' woocommerce_product_columns_wrapper', 40 
);

The same function is used with the after_shop_loop to close the div. How can I add the extra to wrap it all up?

Tags:

2

Answers


  1. 0

    in woocomerce go to templates copy all files from there to your theme folder

    then you see there is loop folder containing loop-start.php
    code like 

    <ul class="products columns-<?php echo esc_attr( wc_get_loop_prop( 'columns' ) ); ?>">

    you can change this to

    <div class="col-md-8">
 <ul class="products columns-<?php echo esc_attr( wc_get_loop_prop( 'columns' ) ); ?>">

    And there is one more loop-end.php 

    </ul>

    change this to 

    </ul></div>

    Thanks

    Login or Signup to reply.
  2. 0

    To add a custom class before <ul> HTML tag on WooCommerce shop and archives pages:

    First, read “Overriding templates via a theme” official documentation, that explains you how to override woocommerce templates via a theme.

    Note for “Premium Themes”:
    On some premium themes, they can use already some customized WooCommerce templates, so you will have to use them instead. If you are using a child theme with it, copy the related template to your child theme, respecting the same folder hierarchy.

    Once understood this, the related template to edit is loop/loop-start.php.
    Open/edit it and replace:

     <div class="col-md-8">
    <ul class="products columns-<?php echo esc_attr( wc_get_loop_prop( 'columns' ) ); ?>">

    Now, open the loop-end.php and close the tag

    Save… You are done.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search