WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
Most basic customisation seems impossible (21 posts)

  1. travellers
    Member
    Posted 1 year ago #

    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/

  2. bheadrick
    Member
    Posted 1 year ago #

    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

  3. travellers
    Member
    Posted 1 year ago #

    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!

  4. bheadrick
    Member
    Posted 1 year ago #

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

  5. madator
    Member
    Posted 1 year ago #

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

  6. mattmikulla
    Member
    Posted 1 year ago #

    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.

  7. travellers
    Member
    Posted 1 year ago #

    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

  8. mattmikulla
    Member
    Posted 1 year ago #

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

  9. travellers
    Member
    Posted 1 year ago #

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

  10. mattmikulla
    Member
    Posted 1 year ago #

    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.

  11. travellers
    Member
    Posted 1 year ago #

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

  12. madator
    Member
    Posted 1 year ago #

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

  13. mattmikulla
    Member
    Posted 1 year ago #

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

  14. J
    Member
    Posted 1 year ago #

    mattmikulla!

    I love you...

  15. luvecerviere
    Member
    Posted 1 year ago #

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

  16. downrodeo
    Member
    Posted 1 year ago #

    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/

  17. sleepymonk
    Member
    Posted 1 year ago #

    Wow, thanks for the link, downrodeo! It's written in a very user-friendly way.

  18. ChristianCajar
    Member
    Posted 1 year ago #

    Interesting post

    I got the rough idea of woocommerce-hooks.php, function.php

    I m currently using wootheme superstore and would like to move
    have the product description (i think that should be div class woo commerce-tabs)
    underneath my image and price add to cart field. I tried to find a solution by looking at the emporium theme by woothemes,

    if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
    ?>
    
    <?php
    	/**
    	 * woocommerce_before_single_product hook
    	 *
    	 * @hooked woocommerce_show_messages - 10
    	 */
    	 do_action( 'woocommerce_before_single_product' );
    ?>
    
    <div itemscope itemtype="http://schema.org/Product" id="product-<?php the_ID(); ?>" <?php post_class(); ?>>
    
    	<?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 entry-summary">
    
    		<?php
    
    			do_action( 'woocommerce_single_product_summary' );
    
            	?>
    
    	</div><!-- .summary -->
    
    	<?php
    		/**
    		 * woocommerce_after_single_product_summary hook
    		 *
    	     * @hooked woocommerce_template_single_meta - 40
    		 * @hooked woocommerce_template_single_sharing - 50
    		 * @hooked woocommerce_output_product_data_tabs - 10
    		 * @hooked woocommerce_output_related_products - 20
    		 */
    		do_action( 'woocommerce_after_single_product_summary' );
    	?>
    
    </div><!-- #product-<?php the_ID(); ?> -->
    
    <?php do_action( 'woocommerce_after_single_product' ); ?>

    [Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum's parser.]

    trying to understand the way the layout of woocommerce works.

    is this right????

    the content-single-product.php just calls the two basic divs
    then the content is split up in three calls? before-summary / summary / after-summary?
    the number at the end of the hooks define the ranking or position of appearance within a call?

    so its

    div before @hooked 10
    @hooked 20
    @hooked 30
    summary @hooked 10
    @hooked 20
    @hooked 30
    after @hooked 10
    @hooked 20
    @hooked 30

    with the functions.php I can move stuff around between before summary and after and change ranks: e.g.

    /*---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 );

    Is all I need to do now find the right way of

    remove_action delete tabs in summary
    add_action add tabs to after_summary?

    and if review shows up first I ll order the number e.g. @hooked 10 for it to be loaded before review?

  19. ChristianCajar
    Member
    Posted 1 year ago #

    add_action add tabs to after_summary?

    add_action(    'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 1 );

    as you can seee on

    all is missing is a way to remove the woocommerce-tabs box of the summary

  20. aahmark
    Member
    Posted 1 year ago #

    I tried to edit a woocommerce add_action, but it does not work. Dont know whether this is the right way to customize a woocommerce action?

    What I did:

    added following code into woocommerce functions.php

    global $woocommerce;
    $arr=$woocommerce->payment_gateways->get_available_payment_gateways();
    remove_action( 'woocommerce_email_before_order_table', array($arr['bacs'] , 'email_instructions' ), 10, 2 );
    add_action( 'woocommerce_email_before_order_table', array( $arr['bacs'], 'newemail' ), 10, 2 );
    function newemail( $order, $sent_to_admin ) {
    
        	if ( $sent_to_admin ) return;
    
        	if ( $order->status !== 'on-hold') return;
    
        	if ( $order->payment_method !== 'bacs') return;
    
    		if ( $description = $arr['bacs']->get_description() )
            	echo wpautop( wptexturize( $description ) );
    
    		?><h2><?php _e( 'FuckingDetails', 'woocommerce' ) ?></h2><ul class="order_details bacs_details"><?php
    
    		$fields = apply_filters('woocommerce_bacs_fields', array(
    			'account_name' 	=> __( 'Account Name', 'woocommerce' ),
    			'account_number'=> __( 'Account Number', 'woocommerce' ),
    			'sort_code'		=> __( 'Sort Code', 'woocommerce' ),
    			'bank_name'		=> __( 'Bank Name', 'woocommerce' ),
    			'iban'			=> __( 'IBAN', 'woocommerce' ),
    			'bic'			=> __( 'BIC', 'woocommerce' )
    		));
    
    		foreach ($fields as $key=>$value) :
    		    if(!empty($arr['bacs']->$key)) :
    		    	echo '<li class="'.$key.'">'.$value.': <strong>'.wptexturize($arr['bacs']->$key).'</strong>';
    		    endif;
    		endforeach;
    
    		?><?php
        }


    [Please use the code buttons when posting code ]

    Action removes, but then When I add my new customized action it does not trigger. Also it has problems with other payment gateways

  21. bobdobbs
    Member
    Posted 9 months ago #

    Nearly a year later, and this problem still exists.

    The templating system is still completely absurd. So it needs good documentaton.

    But the documentation offered by woocommerce is still absolute rubbish.

    Once I've done my current project, I'm never going near the pile of rubbish that is woocommerce again.

    There is absolutely no reason for their templating system to be so difficult. I'd recommend developers stay away from this dreck.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic