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

Convert Woocommerce Attribute Dropdown to Clickable Text

本文关键字：文本 转换 Wooccommerce 属性 下拉列表      更新时间：2023-09-26

我正在构建一个WC网站，我想更改属性的显示。与其将它们显示为下拉表单元素，不如将每个属性显示为文本链接。以下是一个正确处理鞋码的示例网站：http://shop.nordstrom.com/s/vince-addie-sandal/3761939?origin=category

我为该网站购买了变体样例和图像插件。它适用于产品尺寸（很容易预测产品尺寸，所以我可以制作图像），但产品颜色是为每种商品定制的（浆果、绿松石等）。然而，最终客户端还不够敏捷，无法为每种颜色的可能性生成文本图像。

我考虑过将下拉列表转换为单选按钮（见SO），删除单选元素，并设置标签样式，但可用的WP插件无法生成可点击的有效标签。诚然，我的JS知识仅限于基本脚本和修补，因此构建自定义内容将很难。。。

任何关于从这里去哪里的想法都将不胜感激。以下是我正在考虑的：

  • 从上面修改SO帖子，使其具有有效标签，并祈祷其有效
  • 每次都以颜色或文本的形式为鞋添加色样
  • 将颜色作为下拉列表，并要求客户使用它（不好）
  1. 你提供的示例网站不是WooCommerce网站（它甚至不是WordPress）
  2. 有一个插件，我相信你会发现它很有用：Wooccommerce电台按钮；它将下拉菜单变成单选按钮，只需简单的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;
}

这是jsfiddle中的一个演示。

如果你需要任何进一步的帮助，请告诉我。

编辑

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

  1. 卸载之前安装的WooCommerce单选按钮插件
  2. 从这里下载并安装修改后的插件
  3. 可选：转到/wp-content/plugins/woocommerce-improved-radio-buttons/woocommerce/assets/frontend/css/并根据您的喜好编辑add-to-cart-variation.css文件

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

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

相关文章：