Woo commerce: editing product-category page outside the loop

Question

I have built a custom Wordpress theme and am using Woo Commerce for the shopping cart plugin. Most of it has integrated well (I have added hooks for the theme in functions.php and have copied Woo commerce template pages into woocommerce sub-folder in theme.) However I am trying to add a wrapper () outside of the loop on the product category pages and can't for the life of me work out what I need to edit in order to make it work. I need to do this in order to re-position the products via CSS. I could apply the css to but this is not specific enough for me

So far I have:

Experimented with content-product_cat.php and content-product.php (but both operate within the loop.
Experimented with a number of other template pages
I have added the tags to the wrapper-start.php and wrapper-end.php pages. This works for the other pages but does not show in product-cateogry

I have looked online and on Wordpress site but it does not offer any help on the matter. Any help would be greatly appreciated!

Kind Regards Nick

Tim Tim · Accepted Answer · 2014-07-21T22:14:02

For small changes like this, there is no need to override entire files. Try using hooks provided by WooCommerce first. You can do this in your themes functions.php. These functions output a custom wrapper inside your top page wrapper.

 function start_wrapper_here() { // Start wrapper 
    echo '<div class="custom-wrapper">';
 }

 add_action(  'woocommerce_before_main_content', 'start_wrapper_here', 20  );


 function end_wrapper_here() { // End wrapper 
   echo '</div>';
 }

 add_action(  'woocommerce_after_main_content', 'end_wrapper_here', 20  );

If you want to add unique wrappers on all WooCommerce pages, you can do this by adding conditional statements to the function above. Visit this page on the WooCommerce site for more conditional tags.

 function start_wrapper_here() { // Start wrapper 

     if (is_shop()) { // Wrapper for the shop page

        echo '<div class="shop-wrapper">';

     } elseif (is_product_category()) {  // Wrapper for a product category page

        echo '<div class="product-category-wrapper">';

     } elseif (is_product()) { // Wrapper for a single product page

        echo '<div class="product-wrapper">';

     }
 }

 add_action(  'woocommerce_before_main_content', 'start_wrapper_here', 20  );

Don't forget closing them all again.

 function end_wrapper_here() { // End wrapper 
    if (is_shop()) {

       echo '</div>';

    } elseif (is_product_category()) {  

       echo '</div>';

    } elseif (is_product()) {

       echo '</div>';

    }
 }

 add_action(  'woocommerce_after_main_content', 'end_wrapper_here', 20  );

If you wan't to change the actual top page wrapper (default: <div id="container">), you should edit a WooCommerce function for that. This function would normally call the wrapper-start.php and wrapper-end.php files using get_template_part(). We now override this function and echo our own wrapper.

function woocommerce_output_content_wrapper() { // Start wrapper for all the page contents
  echo '<div class="custom-wrapper">';
}

add_action(  'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 20  );


function woocommerce_output_content_wrapper_end() { // End wrapper for all the page contents
echo '</div>';
}

add_action(  'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 20  );

Woo commerce: editing product-category page outside the loop

3 Answers