如何在 Woocommerce 中修改小部件的 innerHTML答案

【问题标题】：How to modify widget's innerHTML in Woocommerce如何在 Woocommerce 中修改小部件的 innerHTML
【发布时间】：2021-08-06 03:05:08
【问题描述】：

我试图通过在类别列表小部件中显示“ON SALE！-50%”文本来表明其中一个类别正在打折。

我显然不能也不会修改类别名称以包含此文本。

这里是网站：https://demo.wpdesk.org/michalkleszko23gmailcom/

【问题讨论】：

标签： php html wordpress woocommerce widget

【解决方案1】：

也许最快的方法是编写一个简短的 javascript，它将编辑文本。因此，如果您的小部件有 id="block-5"（根据演示），您只需将替换脚本添加到您的类别小部件下的下一个自定义 HTML 小部件中。

<script>
document.getElementById('block-5').innerHTML = document.getElementById('block-5').innerHTML.replace("Albums", "Albums <div style=\"color:red\">ON SALE! -50%</div>");
</script>

【讨论】：

我最终选择了稍微修改过的脚本版本，效果很好。 <script> document.getElementById('block-5').innerHTML = document.getElementById('block-5').innerHTML.replace("Albums", "Albums</a><p style=\"color:red; display:inline;\"> ON SALE! -50%</p><a style=\"display:none;\""); </script>.