WooCommerce shop page to use my custom template

Before asking the question I want to tell you that I have already asked the question in https://stackoverflow.com/questions/15025213/wordpress-woocommerce-template-file-overiding

I am using the WooCommerce plugin to develop a website. Everything is fine with WooCommerce. As per my requirement, I have configured my home page as a shop base page from the WooCommerce dashboard to make my home page the shop page. Now my requirement is to place some images which should be uploaded from the admin side and to show some text over the images. For that feature, I searched over Google and some people suggested that I use WordPress Advanced Custom Fields. I just installed it.

Now I saw that WooCommerce is not using my custom theme. It is using its own custom theme. Since I want to show images and text using the Advanced Custom Fields plugin, I really need my own custom template to use the queries for images and text. Then I again searched over the Google for a solution and I got the suggestion to just make a copy of the theme's page.php into woocommerce.php and then just replace the code:

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

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

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

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

with

<?php woocommerce_content(); ?>

I did that but still I am not getting my custom fields from Advanced Custom Fields. So kindly help me. Any suggestions and help will be appreciable. Thanks.

My code to show the Advanced Custom Fields 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 the WordPress TwentyEleven theme.

Solutions

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.

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:

product page
click to enlarge

And here the result in the site:

site result


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.

Similar questions

WooCommerce Template Override for Archive-Product.php (Main Shop Page) Not Working
I can't for the life of me manage to override the main shop page. My understanding is that it's archive-product.php I've attempted to copy it into the Woocommerce directory I created in my theme's root directory and modify it. No dice. I've also attempted to modify it directly in the Woocommerce plugin directory. No dice there either. I've even gon...
WordPress WooCommerce shop page template
I am trying to edit the layout of the shop page of my WooCommerce WordPress webshop. Now in the WooCommerce settings I set it to disaply the categories. Now my goals is to change the <img /> tags into <div>'s. So I need to change the HTML. But I can't seem to find the template file that is used to create that page. I've looked in my the...
How To Display Html In A Shortcode For A Specific Page - The Page Is Woocommerce Shop Page
How To Display Html In A Shortcode For A Specific Page - The Page Is Woocommerce Shop Page I addet the short code in widget and is not showing need to show only for specific page here is the code [rj_mysh]
Woocommerce Shop Template
This is pretty straight forward. I've installed the Woocommerce Canvas theme and want to use it to implement an HTML template using the various hooks available. I've set my front-page to be the shop page but cannot seem to find the template which affects the shop page. I have already tried to change both archive-product.php files, and neither are r...
How to make add to cart button on custom page (not shop/product page) Woocommerce
i made new page on my site that people choose PC part to buy.. My case is how to create a button for add all product choosen to cart then redirect to the cart pages. Select list HTML Code Thank you.
How to apply the elementor theme builder custom page to my woocommerce default shop page
I'm new to wordpress and I just created a website for online store using wordpress. I want to apply the customized page of woocommerce shop to the default woocommerce shop page, and I'm using Elementor theme builder. I already created the page and customize page as I want. Then I saved and applied the customization to shop page The problem is after...

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.