woocommerce中将可变商品的下拉选项框改为淘宝类似的款式点选

最新推荐文章于 2020-12-12 18:00:42 发布

yaime

最新推荐文章于 2020-12-12 18:00:42 发布

阅读量3.6k

点赞数

文章标签： wordpress woocommerce jquery

本文链接：https://blog.csdn.net/yaime/article/details/78016501

版权

公司前段时间有个需求，在 woocommerce 购物时默认的对于可变商品的选择方法是使用select上传一个参数，希望可以改变成像淘宝一样的按钮带文字直接点击选择，这样可以平常就看到所有的选项，对于用户来说十分方便。在初期调用代码的时候想过用PHP去修改，但是这一部分的内容在wp-include中，官方好像并不希望去重写这个选择方法。再调研了woocommerce有用来解决这个问题的插件Variation Swatches and Photos，可以直接下载付费使用，但是考虑到公司网站只有几个商品，购买一个插件性价比很低，所以直接利用JS和css配合来完成这一个功能

首先，设置正确的产品变量id，在jquery选择器中如果id为中文的转义字符串是无法被识别的，所以在这里将产品属性的名字改为英文名（暂时无解决办法），然后在页面对应的CSS中将用于选择款式属性的select的display设置为none，然后在页面中添加一个button，给他写一个函数让他修改select的值就好。应用jquery中的val()结合选择器完成

$('.summer-class-1'.on('click',function(){
    	alert('change summerclass to 1st value');
    	$('#summerClassTime').val('八月老班');
    	alert($('summer-class').val());
    })

val中选择select包含的value值，即可完成