CODEWITHSUNDEEP
phpcsswordpresswoocommerce
nickstaw
nickstaw

Reputation: 309

Woo commerce: editing product-category page outside the loop

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:

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

Upvotes: 4

Views: 42487

Answers (3)

Manish
Manish

Reputation: 193

Do one thing, create a folder in your custom theme root and name it 'woocommerce'. Now you can copy templates from the WooCommerce plugin into your custom theme woocommerce folder and override any WooCommerce template file. You can find WooCommerce template files in plugins/woocommerce/template/

Hope this will help you.

Upvotes: 1

Tim
Tim

Reputation: 1690

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

Upvotes: 11

nickstaw
nickstaw

Reputation: 309

Just found the answer - I needed to modify archive-product.php

Upvotes: 9

Related Questions