Woocommerce产品选项-突出显示选定的选项

Question

我正在基于Woocommerce平台构建电子商务基础，并且一件事挣扎。 在产品页面上，我有一些选项供用户选择：

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

当用户选择一个选项时，我希望将其用黑色圆圈圈起来，或者希望使用任何指示器来显示选择了哪个选项。现在，看不到选择了哪个选项：

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

Answer 1

在Google Chrome浏览器中，为您的产品选择一个选项，然后右键单击->检查（法语中的“检查器”）。 查看包含所选元素的父元素（显然是divs），它应该添加了一个“ selected”类或一个等效类，例如“ active”或“ {{1}” }“ 或者是其他东西。 现在，您知道该类已添加到所选选项，您可以添加CSS样式，如下所示：

select

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

.selected {border: 1px solid black;}

但这将取决于您的woocommerce主题的配置，如果不查看该站点，我将无法给出确切答案。