wordpress WooCommerce 二次开发手把手

1，如何把WooCommerce 集成到自己的新theme中？

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.

2，如何修改woocommerce模板的的内容？

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.

3 功能api引用 

 http://code.tutsplus.com/articles/an-introduction-to-theming-woocommerce-for-wordpress--wp-31577

Disabling the Default Stylesheet and Starting From Scratch

The default stylesheet can be disabled by adding a small snippet of code to your themes functions.php:

1

define('WOOCOMMERCE_USE_CSS', false);

The quickest way to get all of the WooCommerce classes is to copy the original WooCommerce CSS file in to your own and remove anything that you do not require.

Declaring WooCommerce Support in Your Theme

This is particularly important if you are selling themes or releasing them to the public.

Without specifically declaring WooCommerce support within your theme, users will be shown an error message upon installation of WooCommerce and it will stay there until it is dismissed.

Fortunately, this can all be solved with a small snippet of code inserted in to your themes functions.php file:

1

add_theme_support('woocommerce');

Diving in a Bit Deeper: Editing Templates

Editing the CSS within WooCommerce will get you quite a long way, but what about if you really want to customize the layout of pages? Luckily, there’s a nice way to do this.

The WooCommerce plugin comes with a number of front-end HTML templates as well as email templates. Instead of editing these files directly within the plugin (which is a very bad idea because once update the plugin and all of your changes will be lost!), you can copy them into your theme:

1. In your theme directory, make a new folder called “woocommerce.”
2. Navigate to the WooCommerce plugin directory and open the "templates" folder. The templates folder has a lot of subfolders with all of the different templates that WooCommerce uses.  Fortunately, the template file structure and naming in WooCommerce is easy to follow.
3. In your newly created "woocommerce" folder, copy the template file that you want to edit. Remember to keep the directory structure the same here. If the template you want to edit is within a subfolder then remember to create that subfolder within your theme's directory.
4. Edit the file from within your “woocommerce” folder and save the changes.

A Practical Example

Let's say that we want to change some of the HTML within the “My Orders” screen of WooCommerce.

The first thing we need to do is locate the correct template. In this case, the “My Orders” section is under “My Account” in WooCommerce. The directory structure looks like the following:

/wp-content/plugins/woocommerce/templates/myaccount/my-orders.php

Next, make a folder within your theme called “woocommerce” and within that folder make a second folder called “myaccount.” After that, copy the my-orders.php file into that directory.

You should be left with the following:

/wp-content/themes/yourtheme/woocommerce/myaccount/my-orders.php

Any changes made to this file will now override the original.

he WooCommerce Loop

If you have created or edited WordPress themes before, then you should be familiar with The Loop. WooCommerce has its own loop you can use which allows you to customize WooCommerce pages. For example, you may want to do this when you would like a load a different sidebar for your WooCommerce pages.

This is the most basic integration and by creating a custom WooCommerce template this will be applied to every WooCommerce page including products, categories and archives. If you do not want your WooCommerce template to look different from your standard template, then you do not have to create a custom WooCommerce template.

Creating the template is a straight-forward process:

• Duplicate your theme's page.php file and rename it woocommerce.php.
• Find the WordPress loop within your woocommerce.php file. It will look something like:

1

2

3

4

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

<?php the_title(); ?

<?php the_content(); ?>

<?phpendwhile;endif; ?>

• Replace your loop with the WooCommerce loop:  <?php woocommerce_content(); ?>
• Now, make any further changes you wish to make such as swapping in a different sidebar or changing the layout.

4 一些硬编码code snip

Show Cart Details

My client wanted a little cart amount and total in the header of their site, which is something very basic to want on an eCommerce site. However, looking through their documentation again proved fruitless. The one article they had on the subject didn’t work, which was:

// Ensure cart contents update when products are added to the cart via AJAX (place the following in functions.php)add_filter('add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment'); function woocommerce_header_add_to_cart_fragment( $fragments ) {global $woocommerce; ob_start(); ?><a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a><?php $fragments['a.cart-contents'] = ob_get_clean(); return $fragments; }

This actually ended up completely breaking the site if I recall correctly. Fortunately after getting help from a dozen other developers, including one from WooCommerce itself, I was able to get the correct snippet (and they updated their site to reflect this as well)

<?php global $woocommerce; ?> <a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>

Custom Category Loops with Category Images

Another search around the web and some quick coding and I was able to get a list of categories with their category image (a Woo function) to display on the homepage in the slider.

<?php $all_categories = get_categories( 'taxonomy=product_cat&hide_empty=0&hierarchical=1' ); foreach ($all_categories as $cat) { //print_r($cat); if($cat->category_parent == 23) {$category_id = $cat->term_id;$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );$image = wp_get_attachment_url( $thumbnail_id );echo '<li><a href="'. get_term_link($cat->slug, 'product_cat') .'"><img src="'.$image.'" alt="'. $cat->name .'"/><div>'. $cat->name .'</div></a>';}}?>

WooCommerce Documentation