Mantra with WooCommerce

I added WooCommerce plug-in to my Mantra theme today. It wasn’t displaying my product page correctly, so I checked their help and it said it can be fixed “using hooks (for advanced users/developers) or using our catch-all woocommerce_content() function inside your theme.”

I tried the easier since I don’t know much about php (just html and some css.) “Duplicate your theme’s page.php file, and name it woocommerce.php.” That step was fine.

But I got stumped at the next step since Mantra page.php doesn’t have anywhere close to the same code as their example.

“Replace the loop

Next you need to find the loop (see The_Loop). The loop usually starts with a:

<?php if ( have_posts() ) :

and usually ends with:

<?php endif; ?>

This varies between themes. Once you have found it, delete it. In its place put:

<?php woocommerce_content(); ?>

This will make it use WooCommerce’s loop instead.”

I tried experimenting, but couldn’t get it work.

For the other option, using hooks in the function.php file, I’m not sure what changes to put in these, and exactly where to put them. (Anywhere in the function.php file? And I’m using a child theme, would I need to make a duplicate function.php file? Put only that code in it, or copy the whole code of the original and add this to it?)

“The hook method is more involved that using woocommerce_content, but is more flexible. This is similar to the method we use when creating our themes. It’s also the method we use to integrate nicely with Twenty Ten and Eleven.

By inserting a few lines in your theme’s functions.php file, First unhook the WooCommerce wrappers;

remove_action( ‘woocommerce_before_main_content’, ‘woocommerce_output_content_wrapper’, 10);

remove_action( ‘woocommerce_after_main_content’, ‘woocommerce_output_content_wrapper_end’, 10);

Then hook in your own functions to display the wrappers your theme requires;

add_action(‘woocommerce_before_main_content’, ‘my_theme_wrapper_start’, 10);

add_action(‘woocommerce_after_main_content’, ‘my_theme_wrapper_end’, 10);

function my_theme_wrapper_start() {

echo ‘<section id=”main”>’;

}

function my_theme_wrapper_end() {

echo ‘</section>’;

}

Make sure that the markup matches that of your theme. If you’re unsure of which classes or ID’s to use take a look at your theme’s page.php for a guide.”

The other problem is in the size of the featured image on the product pages. I’m not sure if that needs to be changed in Mantra or WooCommerce. I changed the Mantra featured image to thumbnail 150×150. And also the WooCommerce single product image to 150×150, but the image is still way larger than that. I tried leaving a featured image out of the post and just inserting a regular image, but then it put a placeholder image there that was huge. ( i know this may need WooCommerce help, but wondered if I my featured image – or another setting – in Mantra needed changed / was overriding something.)

Thanks for help.