Title: Most basic customisation seems impossible
Last modified: August 20, 2016

---

# Most basic customisation seems impossible

 *  [travellers](https://wordpress.org/support/users/travellers/)
 * (@travellers)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/most-basic-customisation-seems-impossible/)
 * I’m trying unsuccessfully to create the most simple (or so I thought) edits within
   my woocommerce pages and have spent hours looking for resources online only to
   come up empty. All I’m trying to do is modify the layout of single product pages,
   and I have to say it is, genuinely, not possible to do this!
 * There’s loads of replies to questions like this online, here on wp.org, over 
   on the wcdocs wiki, and dotted around the net, with the same basic suggestion:‘
   Use the hooks. It’s easy. Read about them here’. Well I have to say that’s wrong–
   it ISN’T ‘easy’. In fact its downright impossible. Most of them point to [here](http://wcdocs.woothemes.com/codex/extending/hooks/)
   which a MASSIVE list of hooks, but no info on what any of them actually do. Or
   how to use them. In fairness there’s a link on that page to [here](http://wcdocs.woothemes.com/codex/extending/introduction-to-hooks-actions-and-filters/),
   which describes adding a hook into functions.php.
 * There’s no suggestion of what you might actually input in the space labelled //
   your code, just an instruction of how to insert it. Guys, no offence and all 
   that, but that is NOT a tutorial on how to add hooks.
    Besides, I’m not trying
   to ADD anything, I only went as far as looking at hooks because I lost the will
   to live trying to find a template file to edit. Surely all the ‘hooks’ I might
   need are ALREADY listed, since the single product pages work fine, they just 
   LOOK a mess.
 * I’m using Suffusion theme (which is a pretty complicated affair in its own right
   and I’ve managed to conquer that, so I reckon I’m okay with WP editing) and my
   product page has a mahoosive picture left aligned, a ‘summary’ block to the right,
   and a description underneath. All I’ve been trying to do is remove the image 
   entirely, and place the summary block alongside the description. So far I’ve 
   been at it around fourteen HOURS, and I’m no nearer a solution than when I started!
   Surely this isn’t how its supposed to be!?
 * [http://wordpress.org/extend/plugins/woocommerce/](http://wordpress.org/extend/plugins/woocommerce/)

Viewing 15 replies - 1 through 15 (of 20 total)

1 [2](https://wordpress.org/support/topic/most-basic-customisation-seems-impossible/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/most-basic-customisation-seems-impossible/page/2/?output_format=md)

 *  [bheadrick](https://wordpress.org/support/users/bheadrick/)
 * (@bheadrick)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/most-basic-customisation-seems-impossible/#post-3138803)
 * Yeah, woocommerce is pretty slim when it comes to documentation. sure there’s
   documentation, loads of it, it’s just not very in-depth.
 * I’ve learned most of what I know about woocommerce just by reading through the
   code itself, and yes, modification easy to do, just not always easy to learn.
 * When it comes to editing the actual layout (beyond what you’d want to do with
   css) you use templates.
 * First, I would recommend making a child theme of the theme you’re using. I like
   to use the one click child theme plugin for the initial creation.
 * Next, create a subfolder under your theme named “woocommerce”
    now, copy (not
   move, but copy) the contentes of the woocommerce/templates folder.
 * (you really only need to copy the stuff you want to change, but this is a good
   start)
    The files are layed out in a pretty logical fashion what you want is 
   under the single-product folder
 *  Thread Starter [travellers](https://wordpress.org/support/users/travellers/)
 * (@travellers)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/most-basic-customisation-seems-impossible/#post-3138808)
 * Well its great to know it isn’t just me struggling!
 * I’ve already been that far though, created copies in suffusion/woocommerce and
   copied over the templates, and had a play with single-product.php. Unfortunately
   the only thing I managed to do was to take the Product Description block and 
   push it up above the image, etc.
 * The issue arises because single-product.php doesn’t have a linear progression
   through the page, like for example:
 *     ```
       <div itemscope itemtype=blah>
         <div class="summary">
          <h1 itemprop="name" class="product_title entry-title">P2 Pond Paint</h1><div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
       <p itemprop="price" class="price"><del><span class="amount">&pound;26.00</span></del> <ins><span class="amount">&pound;24.00</span></ins></p>
       <link itemprop="availability" href="http://schema.org/InStock" />
       </div>
   
       <form action="/EastRidingKoi/shop/p2-pond-paint/?add-to-cart=187" class="cart" method="post" enctype='multipart/form-data'>
   
       <div class="quantity"><input name="quantity" data-min="1" data-max="" value="1" size="4" title="Qty" class="input-text qty text" maxlength="12" /></div><button type="submit" class="single_add_to_cart_button button alt">Add to cart</button>
       </form>
   
       <div class="product_meta">
       <span itemprop="productID" class="sku">SKU: sku_01.</span>
       </div>
   
       </div><!-- .summary -->
   
       <div class="woocommerce_tabs">
       <ul class="tabs">
       <li class="description_tab"><a href="#tab-description">Description</a></li>
       ```
   
 * If it WAS laid out logically like that, I’d have no trouble editing it to suit
   my needs, but there’s just a call to a function ‘single-page’ and no indication
   of how I can track that down or edit its layout! If you’ve any ideas on where
   that’s defined, I’d bear your children. Well I wouldn’t, because that’s physically
   impossible, but I’d be damn grateful!
 *  [bheadrick](https://wordpress.org/support/users/bheadrick/)
 * (@bheadrick)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/most-basic-customisation-seems-impossible/#post-3138842)
 * well, the way I’ve figured this stuff out is by using windows grep.
 * It basically will search through all text files in a given directory (including
   subdirectories). Set the directory to a copy of the wordpress plugin, enter a
   search of the function or action you want to know about, and it will show you
   all the locations where that function/action is used. From there, you can find
   where the actual function definition is.
 * I kinda hate the program in a way, because you can’t see the full path afterwards,
   and you have to browse to the path to select it every time…
    but once you have
   the path set, it works really well.
 * so, I’m guessing you found within the woocomnmerce-hooks file this stuff:
 *     ```
       /**
       	 * Before Single Products Summary Div
       	 *
       	 * @see woocommerce_show_product_images()
       	 * @see woocommerce_show_product_thumbnails()
       	 */
       	add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
       	add_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
       ```
   
 * If you just want to remove the images, you can just remove this from the content-
   single-product.php
 * `do_action( 'woocommerce_before_single_product_summary' );`
 *  [madator](https://wordpress.org/support/users/madator/)
 * (@madator)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/most-basic-customisation-seems-impossible/#post-3138852)
 * I guess I have a similar question as travellers. I want to move the title out
   of the <div id=”summary”> and place it before the product thumbnail. I opened
   single-product.php and content-single.php but since these files have hooks like“
   woocommerce_get_template_part( ‘content’, ‘single-product’ )”, I don’t have granular
   control over each element. I also opened woocommerce-hooks.php but I am not sure
   how the actions affect the order in which the elements display on a page.
 * Please help!!!!!!!!
 *  [mattmikulla](https://wordpress.org/support/users/mattmikulla/)
 * (@mattmikulla)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/most-basic-customisation-seems-impossible/#post-3138854)
 * Yep. The documentation and available help is poor…
 * Depending on what you are moving around you will have specific options depending
   on how they coded blocks of content.
 * There are several primary blocks that output sections of a product page. You 
   can pull parts of a block to another block with hooks.
 * Using a functions file you could move your title to above the thumbnail with 
   a hook.
 *     ```
       /*---Move Product Title*/
       remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
       add_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_title', 5 );
       ```
   
 * The content-single-product.php allows you to move the primary section blocks 
   around such as the product summary area (product title, price, excerpt, add to
   cart, categories…).
 * Again, you’ll want to create a woocommerce folder in your theme where your individual
   templates for components within the main blocks will reside as they do in the
   WooCommerce plugin folder. The files in your theme’s /woocommerce/ directory 
   override the plugin files.
 * You will not need all of these. Just the ones you may need.
 *  Thread Starter [travellers](https://wordpress.org/support/users/travellers/)
 * (@travellers)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/most-basic-customisation-seems-impossible/#post-3138855)
 * It almost seems to have been made **intentionally **complicated! I still don’t
   get what you’ve posted (but many sincere thanks for trying to help!) and there’s
   so much of these pages that I want to modify the layout of. For example, in the
   Cart page the ‘continue to checkout’ button is ABOVE the shipping calulator module,
   even though the customer has to choose his shipping method from the calculator
   BEFORE he clicks the Continue button. All these edits should be relatively simple,
   if only woo hadn’t obfuscated the layout so much that even simple edits are a
   nightmare. I’m not sure this is the product for me really
 *  [mattmikulla](https://wordpress.org/support/users/mattmikulla/)
 * (@mattmikulla)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/most-basic-customisation-seems-impossible/#post-3138856)
 * [@travelers](https://wordpress.org/support/users/travelers/)
 * Moving the calculate shipping module before the proceed to checkout is relatively
   easy.
 * 1. Create a woocommerce directory in your theme at the root if you haven’t already.
 * 2. Go to the woocommerce plugin folder (/plugins/woocommerce/) and locate a folder
   called templates
 * 3. Navigate to the cart directory within the templates directory and find the
   cart.php template file (/plugins/woocommerce/cart/cart.php)
 * 4. Copy that file to your woocommerce directory within you theme using the same
   directory path (/woocommerce/cart/cart.php) – Meaning you have to have a folder
   of cart within the woocommerce folder
 * Remember that this copy of cart.php now overrides the file in the plugin directory.
 * 5. Look at the bottom of the cart.php file that you are now editing. At the very
   bottom is the following code:
 *     ```
       <div class="cart-collaterals">
   
       	<?php do_action('woocommerce_cart_collaterals'); ?>
   
       	<?php woocommerce_cart_totals(); ?>
   
       	<?php woocommerce_shipping_calculator(); ?>
   
       </div>
       ```
   
 * The part that says woocommerce_shipping_calculater can be moved around.
 * 6. Move woocommerce_shipping_calculater to where you want and test. I’m not sure
   that it can go anywhere but I tested moving it and it worked for me.
 * This is an example of customizing WooCommerce using the method of overriding 
   template files.
 *  Thread Starter [travellers](https://wordpress.org/support/users/travellers/)
 * (@travellers)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/most-basic-customisation-seems-impossible/#post-3138857)
 * Many thanks for that. At least that file looks *relatively* easy to unpick and
   reorder aesthetically
 *  [mattmikulla](https://wordpress.org/support/users/mattmikulla/)
 * (@mattmikulla)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/most-basic-customisation-seems-impossible/#post-3138858)
 * You can edit and override any file within the woocommerce template directory 
   using that method.
 * Rearranging some elements around may require actions and hooks within a functions.
   php file. I have created a file called functions-custom-woocommerce.php to separate
   my WooCommerce customizations.
 * If you create a separate WooCommerce functions file for customizations you will
   need to call it from your main functions.php file.
 *     ```
       <?php
          /*---Include WooCommerce Custom Functions File*/
          include_once (TEMPLATEPATH . '/functions-woocommerce-custom.php');
          /*---main theme functions go below...*/
       ?>
       ```
   
 * As an example, if we wanted to move the product title out of the summary section
   and position it above the main product image or somewhere at the top of the page
   we need to look at the content-single-product.php template file.
 * Here are the two sections we we need to look at in that file:
 *     ```
       <?php
          /**
           * woocommerce_show_product_images hook
           *
           * @hooked woocommerce_show_product_sale_flash - 10
           * @hooked woocommerce_show_product_images - 20
           */
          do_action( 'woocommerce_before_single_product_summary' );
          ?>
       <div class="summary">
          <?php
             /**
              * woocommerce_single_product_summary hook
              *
              * @hooked woocommerce_template_single_title - 5
              * @hooked woocommerce_template_single_price - 10
              * @hooked woocommerce_template_single_excerpt - 20
              * @hooked woocommerce_template_single_add_to_cart - 30
              * @hooked woocommerce_template_single_meta - 40
              * @hooked woocommerce_template_single_sharing - 50
              */
             do_action( 'woocommerce_single_product_summary' );
             ?>
       </div>
       <!-- .summary -->
       ```
   
 * The part that outputs the main product image is woocommerce_before_single_product_summary
 * The part that outputs the product title is woocommerce_single_product_summary
 * Let’s pull the title out of the summary block and place it in the block that 
   precedes it so the product title is above the product images.
 * Place this in your functions.php file or the custom functions file.
 *     ```
       /*---Move Product Title*/
       remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
       add_action( 'woocommerce_before_single_product_summary',
       'woocommerce_template_single_title', 5 );
       ```
   
 * Hope that helps. I’m not a developer but have had to hack my way through WooCommerce
   to figure all this out.
 *  Thread Starter [travellers](https://wordpress.org/support/users/travellers/)
 * (@travellers)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/most-basic-customisation-seems-impossible/#post-3138859)
 * @ mattmikulla
 * Sorry, I didn’t want you to think I was just ignoring the help you’ve very patiently
   supplied. I’m extremely grateful for your input, but its gone over my head somewhat.
   I’m going to have to try and do some working out of this hooks stuff. It’s just
   frustrating that it’s not simpler!
 *  [madator](https://wordpress.org/support/users/madator/)
 * (@madator)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/most-basic-customisation-seems-impossible/#post-3138861)
 * mattmikulla, you are awesome. It worked flawlessly. Thanks for giving a thorough
   explanation.
 *  [mattmikulla](https://wordpress.org/support/users/mattmikulla/)
 * (@mattmikulla)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/most-basic-customisation-seems-impossible/#post-3138862)
 * Glad I could help. Usually I’m the one asking question on here.
 *  [J](https://wordpress.org/support/users/paradox_designs/)
 * (@paradox_designs)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/most-basic-customisation-seems-impossible/#post-3138912)
 * mattmikulla!
 * I love you…
 *  [luvecerviere](https://wordpress.org/support/users/luvecerviere/)
 * (@luvecerviere)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/most-basic-customisation-seems-impossible/#post-3138922)
 * [@mattmikulla](https://wordpress.org/support/users/mattmikulla/)
    Thank you ever
   so much!
 * [@travellers](https://wordpress.org/support/users/travellers/)
    I didn’t completely
   understand Mattmikulla by reading. I suggest trying what you can, it got the 
   point across for me.
 * Here is a simplified, I hope, explanation.
 * You found single-product.php because the name of that file seems like the most
   likely place to find the template. Once inside single-product.php you find it
   really is just referencing content-single-product.php.
 * You get into content-single-product.php and see the following hooks.
 *     ```
       <?php
       			/**
       			 * woocommerce_single_product_summary hook
       			 *
       			 * @hooked woocommerce_template_single_title - 5
       			 * @hooked woocommerce_template_single_price - 10
       		 	 * @hooked woocommerce_template_single_add_to_cart - 15
       			 * @hooked woocommerce_template_single_excerpt - 20
       			 * @hooked woocommerce_template_single_meta - 40
       			 * @hooked woocommerce_template_single_sharing - 50
       			 */
       			do_action( 'woocommerce_single_product_summary' );
       		?>
       ```
   
 * Imagine each @ hooked as a tag (h1, h2, p, a) on the site. The @ hooked title
   is probably your h1 and the single_price @ hooked is probably the price. All 
   of the @ hook elements are contained within the hook (similar to a div surrounding
   elements inside it) called * woocommerce_single_product_summary hook. What Mattmikulla
   showed you was how to move the @ hooks (think tags) from one hook (think divs)
   to another (think different div).
 * For your particular needs all you may need is to change the order of the hook
   elements. That works by changing the ordering number to the right in a similar
   manner to what Mattmikulla just showed. I followed his method but used slightly
   modified php to move my payment button up just under the cost.
 *     ```
       <?php
       /*---Move Single Page Product Buy Button*/
       remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
       add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 15 );
       ?>
       ```
   
 * Hope that helps.
 *  [downrodeo](https://wordpress.org/support/users/downrodeo/)
 * (@downrodeo)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/most-basic-customisation-seems-impossible/#post-3138930)
 * Just posting this here, great resource I stumbled upon on hooks and function.
   Hopefully it helps someone.
 * [http://www.kathyisawesome.com/412/thematic-hooks-and-functions/](http://www.kathyisawesome.com/412/thematic-hooks-and-functions/)

Viewing 15 replies - 1 through 15 (of 20 total)

1 [2](https://wordpress.org/support/topic/most-basic-customisation-seems-impossible/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/most-basic-customisation-seems-impossible/page/2/?output_format=md)

The topic ‘Most basic customisation seems impossible’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

 * 20 replies
 * 11 participants
 * Last reply from: [bobdobbs](https://wordpress.org/support/users/bobdobbs/)
 * Last activity: [12 years, 8 months ago](https://wordpress.org/support/topic/most-basic-customisation-seems-impossible/page/2/#post-3138948)
 * Status: not resolved