Support » Plugin: WooCommerce » 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 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, 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/

Viewing 15 replies - 1 through 15 (of 20 total)
  • 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

    (@travellers)

    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!

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

    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!!!!!!!!

    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

    (@travellers)

    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

    @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

    (@travellers)

    Many thanks for that. At least that file looks *relatively* easy to unpick and reorder aesthetically

    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

    (@travellers)

    @ 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!

    mattmikulla, you are awesome. It worked flawlessly. Thanks for giving a thorough explanation.

    Glad I could help. Usually I’m the one asking question on here.

    J

    (@paradox_designs)

    mattmikulla!

    I love you…

    @mattmikulla
    Thank you ever so much!

    @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.

    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/

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Most basic customisation seems impossible’ is closed to new replies.