woocommerce shop page to use my custom template

Question

Before asking the question I want to tell you that I have already asked the question in http://stackoverflow.com/questions/15025213/wordpress-woocommerce-template-file-overiding I am using woocommerce plugin to develop an website. Everything is fine with woocommerce. As per my requirment I have configured my home page as shop base page from woocommerce dashboard to make my home page as shop page. Now my requirment is to place some images which should be uploaded from admin side and have to show some text over the images. For that feature I searched over google and some people suggested me to use wordpress advanced custom fields to be perfect.I just installed it. Now I saw that woocommerce is not using my custom theme. It is using its own custom theme. But as I want to show images and text from advanced custom field plugin and for that I really need my own custom template to use the queries for images and text. Then I again searched over the google for the suggestion and I got some suggestion to just make the copy of themes page.php into woocommerce.php and then just replace the codes

     <?php while ( have_posts() ) : the_post(); ?>

      <?php get_template_part( 'content', 'page' ); ?>

      <?php comments_template( '', true ); ?>

    <?php endwhile; // end of the loop. ?>

into

<?php woocommerce_content(); ?>

I also made that but still I am not getting my custom fields for advanced custom field? So kindly help me. Any suggestions and help will be appreciable. Thanks My code to show advanced custom field for image and text is like this

<?php $product_tab_banner = get_field('product_tab_banner');
    if($product_tab_banner): ?>
   <?php var_dump($product_tab_banner); ?>
    <div class="nt-highlighted-products">
    <img src="<?php echo $product_tab_banner['url']; ?>" alt="<?php echo $product_tab_banner['alt']; ?>"  width="<?php echo $product_tab_banner['sizes']['featured_product-width'];?>" height="<?php echo $product_tab_banner['sizes']['featured_product-height'];?>" title="<?php echo $product_tab_banner['title']; ?>" />
    </div>
  <?php endif; ?>

I am using wordpress twentyeleven theme.

Answer 1

By going through your question I want to tell you that woocommerce will not use your custom template. It will use its own template. As you want to use wordpress advanced custom fields plugin I want to tell you is that feature only works on the page and post. So as woocommerce will not allow to use your own custom template you can't use advanced custom fields features.

Now just do something different. Just make your own custom template where you want to show your products. Then just go to the site http://docs.woothemes.com/document/woocommerce-shortcodes/ Here you can see the shortcodes for the woocommerce. Where you can easily show almost all products with your own customization. Now use these shortcodes to show the products. Here you have achieved that woocommerce is using your own custom template. Now as it is your own template you can easily use advanced custom fields with this. Is that clear? If any thing you can't understand then reply me. Hope this will help you.

Answer 2

I'm not quite sure if I understand your problem correctly, but here's my attempt to replicate it.

First, consider this part of WooCommerce documentation:

If you want to edit one of these templates simply copy it into a directory within your theme named /woocommerce, keeping the same file structure, e.g. move /templates/cart/cart.php to themename/woocommerce/cart/cart.php. The copied file will now override the WooCommerce default template file.

Second, this are the replication steps:

• Using WP 3.5.1, TwentyEleven 1.5, WooCommerce 1.6.6 and AdvancedCustomFields 4.0.0
• Set the page "Shop" as the static front page in Reading Settings (/wp-admin/options-reading.php)
• Set an ACF Field Group that contains an Image Field (product_tab_banner), with Return Value as "Image Object" and to be shown in the post type "Product"

Solution:

• Create the following folder: /wp-content/twentyeleven/woocommerce/
• Copy the file: /wp-content/plugins/woocommerce/templates/content-product.php to this newly created folder
• Place your code in this copy of content-product.php

$product_tab_banner = get_field('product_tab_banner');
if($product_tab_banner): ?>
    <div class="nt-highlighted-products">
    <img src="<?php echo $product_tab_banner['url']; ?>" 
        alt="<?php echo $product_tab_banner['alt']; ?>"  
        width="<?php echo $product_tab_banner['sizes']['featured_product-width'];?>" 
        height="<?php echo $product_tab_banner['sizes']['featured_product-height'];?>" 
        title="<?php echo $product_tab_banner['title']; ?>" />
    </div>
<?php endif; ?>

Here's the product page:

^{click to enlarge ⤴}

And here the result in the site:

---

If you'd like to customize the "Shop" page, copy the file /wp-content/plugins/woocommerce/templates/archive-product.php into your theme's /woocommerce/ folder.

Answer 3

Please try to replace the plugin you're using with the official WooCommerce extensions like "Product Add-ons" (http://www.woothemes.com/products/product-add-ons/).