Question

我正在建立一个WC网站，我想更改属性的显示。不是将它们显示为下拉表单元素，而是应将每个属性显示为文本链接。这是一个示例网站，它根据鞋码大小做正确的事：http://shop.nordstrom.com/s/vince-addie-sandal/3761939?origin=category

我为该网站购买了Variations Swatches and Images插件。它适用于产品尺寸（很容易预测产品尺寸，因此我可以制作图像）但产品颜色是每个项目（Berry，Turquoise等）的定制。然而，终端客户端并不足以生成每种颜色可能性的文本图像。

我考虑将下拉列表转换为单选按钮（seen here on SO），删除无线电元素以及样式化标签，但可用的WP插件无法生成有效标签以供点击。不可否认，我的JS知识仅限于基本脚本和修补，因此构建自定义的东西会很难......

任何关于从何处出发的想法都将受到赞赏。这是我正在考虑的事情：

从上面修改SO帖子以获得有效标签并祈祷它有效
每次为鞋子添加颜色或文字的颜色样本
将颜色留下来并要求客户使用它（不好）

Answer 1

The example site you provided不是WooCommerce网站（它甚至不是WordPress）;
我确定你会发现一个有用的插件：Woocommerce Radio Buttons;它将下拉菜单变为单选按钮，您可以使用简单的CSS轻松自定义;这是一个示例，说明如何使单选按钮看起来像常规按钮：

HTML：

<ul class="donate-now">
<li>
    <input type="radio" id="a25" name="amount" />
    <label for="a25">$25</label>
</li>
<li>
    <input type="radio" id="a50" name="amount" />
    <label for="a50">$50</label>
</li>
<li>
    <input type="radio" id="a75" name="amount" checked="checked" />
    <label for="a75">$75</label>
</li>
<li>
    <input type="radio" id="a100" name="amount" />
    <label for="a100">$100</label>
</li>
<li>
    <input type="radio" id="other" name="amount" />
    <label for="other">other:</label>
</li>
<li>
    <input type="text" id="otherAmount" name="numAmount" />
</li>
</ul>

CSS：

.donate-now {
     list-style-type:none;
     margin:25px 0 0 0;
     padding:0;
}

.donate-now li {
     float:left;
     margin:0 5px 0 0;
    width:100px;
    height:40px;
    position:relative;
}

.donate-now label, .donate-now input {
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.donate-now input[type="radio"] {
    opacity:0.011;
    z-index:100;
}

.donate-now input[type="radio"]:checked + label {
    background:yellow;
}

.donate-now label {
     padding:5px;
     border:1px solid #CCC; 
     cursor:pointer;
    z-index:90;
}

.donate-now label:hover {
     background:#DDD;
}

Here's a demo in jsfiddle

如果您需要任何进一步的帮助，请与我们联系。

修改

好的，所以现有的插件并不完全符合您的需求，所以我对它进行了一些修改。

卸载以前安装的WooCommerce Radio Buttons插件;
下载并安装修改过的插件from here;
可选：转到/wp-content/plugins/woocommerce-improved-radio-buttons/woocommerce/assets/frontend/css/并根据自己的喜好编辑add-to-cart-variation.css文件;

如果您有兴趣了解代码的外观，请随意查看。

如果这对您有用，请告诉我。

将Woocommerce属性下拉列表转换为可点击文本

1 个答案:

修改