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. 我也遇到乱码的问题了,而且是产品属性的第一个字。
        【订阅时长】变成: Ȯ�阅时长
        【同时使用设备数】变成: Ő�时使用设备数
        有点急。求助呀

        1. 新版的woocommerce一般没这种问题,建议你切换到默认主题试一下。

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

        2. 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函数

          1. 有点看不懂了…呃…”有必要的js验证?

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

          1. 额…我说的是改代码

          2. 那我找到后台资料页面的php复制过来呢?

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

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

    1. 这是欺负你不爱看文档啊。。。

  3. 请问一下,那个COLOR的下拉属性是怎么出来的?

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

  4. 太好了,刚好找这个就来找到了!! ^_^

  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/

  7. 我去啊,注册太难了。验证码网站站名打了不下10慈

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

      1. 看看注册后是啥样子的啊

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

          1. 请问你的bluehost稳定吗?多少钱一个月的

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

        1. 站长工具看到是bluehost= =

          1. 我换hosting已经很久了,站长工具咋检测的真是的

评论功能已关闭