html - Woocommerce 产品选项 - 突出显示所选选项

Question

我正在 Woocommerce 平台上建立一个电子商务基地，并为一件事而苦苦挣扎。在产品页面上，我有一些用户可以选择的选项：

在第一张图片上，没有选择任何选项。

当用户选择一个选项时，我希望它被圈成黑色，或者任何指示符来显示选择了哪个选项。现在，无法查看选择了哪个选项：

这些选项是简单的 Woocommerce 选项（图像）。有什么方法可以向用户指示使用 css 或 javascript 选择了哪些选项？

标签： htmlcsswordpresswoocommerce

Answer 1

在 Google Chrome 中，为您的产品选择一个选项，然后右键单击 -> 检查（法语中的“检查器”）。查看包含所选元素的父元素（显然是 div），它应该有一个 " selected" 类添加到它，或者一个等效的类，比如可能是 " active" 或 " select" 或其他东西。既然您知道添加到选定选项的类，您可以像这样添加 CSS 样式：

.selected {border: 1px solid black;}

将此样式添加到 woocommerce 主题的“自定义 css”中，或主题中的自定义 css 文件中。此外，这只是一个示例，最好非常具体地说明您在 CSS 中定位的元素，以防止所有具有 .selected 类的元素在您的网站上都有边框。例如，使用：

.woocommerce-product.choice.selected {border:1px solid black;}

但这将取决于您的 woocommerce 主题的配置，如果没有看到该网站，我无法给出准确的答案。