我已经在“hover”上的一个单独的div中显示了变体名称，但还没有在“click”上显示，因为它似乎与WooCommerce存在冲突。

首先，在您的子主题的单个产品页面的某个地方放置一个空div，我正在使用/single-product/meta.php.

我的div如下所示：<div id="colour-name"></div>.

然后可以使用以下javascript显示变体名称：

$j=jQuery.noConflict();
$j(document).ready(function() { 
  $j(".swatch-anchor").hover(function() {
  var newTitle = $j(this).attr("title");
  $j("#colour-name").html(newTitle);
  },
  function() {
  var swapTitle = $j("#colour-name").html();
  $j(this).attr("title",swapTitle);
  $j("#colour-name").html("");
});});