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
: