wordpress WooCommerce 二次开发手把手

本文介绍了如何将WooCommerce集成到自定义主题中,包括禁用默认样式表、声明主题支持、编辑模板文件,以及调整元素布局。通过复制和修改模板文件,可以实现如购物车详情、产品分类循环等定制。同时,文章提到了WooCommerce循环的重要性和使用WooCommerce文档进行辅助开发。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值