WooCommerce

WooCommerce中的Custom JavaScript Event

WooCommerce有丰富的javascript脚本，你可知这些脚本中也留有像php hooks一样的自定义事件呢？利用这些custom javascript event，修改js脚本变得容易了。

不得不知的jQuery.trigger()

jQuery的trigger()是一种用代码激活事件的方法，可以是预定义的事件，例如click，submit等，也可以是自定义事件。这些自定义事件标志着某些事件的发生，之后用bind方法将一些功能绑定到这个事件上，就可以确保脚本的执行顺序，做定制化修改。

WooCommerce中的Custom Event

WooCommerce的前台脚本在woocommerce/assets/js/frontend目录下，带有min的是真实使用的脚本，不带min的是源代码版。打开源代码版，搜索.trigger就可以找到自定义事件。

例如在add-to-cart-variation.js文件中可以找到

// Custom event for when variations have been updated
$variation_form.trigger('woocommerce_update_variation_values');

再往下看，还有show_variation事件，看名字就知道这是显示产品属性的标志性事件。

$single_variation_wrap.slideDown('200')
.trigger( 'show_variation', [ variation ] );

下面就用show_variation事件演示一下WooCommerce Custom Event的使用方法。

代码示例：改变产品属性价格的显示位置

在带有属性的产品页面，修改产品属性时，价格变化显示在add to cart按钮旁边，如下图所示

product-variation-1

现在，我希望把这个价格变化放到标题正下方的价格那里，即替换"From: £35 £30 "，并隐藏add to cart旁边的那个价格，变成下面这样

product-variation-2

所用到的代码如下：

/**
 * 利用jquery custom event修改价格
 *
 * 用is_product()确保脚本只在产品页加载
 * 用action: wp_footer将脚本加载到footer区域
 */
 function theme_custom_wc_script(){
	if( !is_product() ) return;
?>
<script type="text/javascript">
  jQuery( document ).bind( 'show_variation', function() {
	var price = jQuery( '.single_variation .price' ).html();
	jQuery( '.single_variation' ).hide();
	jQuery( '.entry-summary .price' ).html( price );
  } );
</script>
<?php
}
add_action( 'wp_footer', 'theme_custom_wc_script' );

注意代码中用bind方法绑定了show_variation时间，跟绑定click等事件没有差别。

扩展阅读

另一个使用custom event的示例：Add ‘Sold Out’ to WooCommerce Variable Product Dropdown，
使用了woocommerce_update_variation_values事件

30条评论

  1. 又来请教楼主了 添加Variable products 属性之后 可以在页面显示 但是中文属性都是乱码 只有英文或者数字能够正常显示

    1. 需要看是哪种乱码，可能是页面编码格式不对，或者是主题问题。如果你还没觉觉，把乱码发一下

      1. 我也遇到乱码的问题了，而且是产品属性的第一个字。
        【订阅时长】变成： Ȯ�阅时长
        【同时使用设备数】变成： Ő�时使用设备数
        有点急。求助呀

        2. 好的，我在设置里面添加属性的话就不会有问题啦~另外，想问一下，怎么让用户后台的那些设置都变到woocommerce的【我的帐户】页面去。谢谢了！（要改代码的话我可以操作的。）主题是基于Twenty Fourteen的Fourteenpress。谢谢了！

        3. 1. 写一个含有所有你需要编辑的字段的html表单，有必要的js验证
          2. 将表单加入my account模板，可以直接编辑模板或者用action，比如woocommerce_edit_account_form
          3. 处理表单内容，可以用woocommerce_save_account_details这个action，它是woocommerce保存my account表单时执行的，具体用法自己读一下class-wc-form-handler.php的save_account_details函数

        5. 你不是写代码没问题吗？我说的只是思路，具体细节写代码的时候决定就可以了

        8. 这个功能不是复制粘贴代码可以解决的，如果你不懂原理恐怕写不出来

  2. 非常感谢你！帮我解决了困惑已久的问题，顺便吐槽下国内有些主题网的管理员坑人，说颜色选择，尺码选择的需要几百块帮二次开发，多亏了楼主的评论给的官方的介绍说明，多谢！多谢！

    1. 给商品添加属性并将每个属性设为一个product variation，变成多属性的产品。
      这些设好了，商品也自动会产生属性下拉菜单。
      官方文档有详细说明http://docs.woothemes.com/document/product-variations/

  5. 您好
    最近再架一個站
    架的過程中受益於您的教學很多 謝謝您

    現在有一個小問題
    因為我的產品是選VARIABLE PRODUCT
    所以會依據我選什麼 價格會變
    但是最小價格會出現在最上方
    然後我選完後正確的價格才會在下面跑出來
    我想要隱藏上方那個最小價格，請問有辦法嗎?
    謝謝您

    1. 用我文中介绍的js方法可以，修改样式表隐藏那个价格可以，直接修改模版也可以。

      例如，css的话，加一条规则
      .product-type-variable p.price{display:none}
      具体的selector要根据你模版来。

      改模版的话，顶部price的模版是woocommerce/templates/single-product/price.php

  6. 博主 冒昧问一下woocommerce 怎么设置才会有尺码颜色选项 找了一圈没找到

    1. 添加产品时，在attributes选项卡下创建颜色属性
      点Add按钮开始添加，Name填Color，Values填Red|Black|Yellow，并勾选“Visible on the product page”，这样就会在产品页Additional Information下显示颜色属性。

      如果想让用户先选择颜色再购买产品，则需要使用Variable Products。首先将产品类型从Simple Product改为Variable Product，创建attributes时勾选Used for variations，再到Variations选项卡下填写不同属性产品的价格，库存等等，保存后就能看到颜色选项了。

      颜色选项也可以提前创建，在后台->Products->Attributes下。

      官方文档：http://docs.woothemes.com/document/product-variations/

    1. 验证码~SolagirL~，你为啥要注册，站点所有东西基本都能直接下载，不能直接下载的也都有些过时了。

        1. wow，这个理由我真没想到，注册完了就是wordpress正常的样子吧，还能有啥特别的啊

    2. bluehost不太稳定，一次买三年大概不到4美金一个月，不过我现在用的是hostgator，business plan一个月不到7美金，稳定性比bluehost好。

评论已关闭。