控制WooCommerce在产品页标签数量

最模板 2022-03-28 19:15 WooCommerce教程

如果您使用 WooCommerce 产品标签，一个产品可能属于其中的 10 个或更多。发生这种情况时，单个产品页面会显示一长串标签链接，这可能会占用太多空间（请参阅下面的屏幕截图以可视化这一点）。

今天的片段确实是一种将列表截断为仅 3 个标签的方法，并添加一个“+”以在单击时显示其余部分。通过这种方式，如果客户真的对他们可以扩展视图感兴趣，否则标签将只占一行。享受！

控制WooCommerce在产品页标签数量

PHP Snippet：截断标签列表并显示更多@单个产品页面

注意：该片段将标签列表截断为 3 个元素。如果您需要使用不同数量的标签，请相应地更改slice(0, 3)和slice(3) 。

/**
 * @snippet       zuimoban.com
 * @compatible    WooCommerce 6
 * @donate $9    https://www.zuimoban.com/woocommerce/tutorials/65.html
 */
 
add_action( 'woocommerce_after_single_product', 'bbloomer_woocommerce_tag_list_truncate' );
 
function bbloomer_woocommerce_tag_list_truncate() {
   wc_enqueue_js('
      var ellipses = "... ";
      var delimiter = ",";
      var content = $(".tagged_as").html();
      var a = content.split(delimiter).slice(0, 3);
      var b = content.split(delimiter).slice(3);
      var html = a + "<span class='truncated'>" + ellipses + "<a class='read-more'>+</a></span><span class='truncated' style='display:none'>, " + b + "</span>";
      $(".tagged_as").html(html);
      $(".read-more").click(function(e) {
         e.preventDefault();
         $(".tagged_as .truncated").toggle();
      });
   ');
}

“后”截图：

控制WooCommerce在产品页标签数量
 

相关文章

  1. 在WooCommerce产品页面上显示销售总数

    在WooCommerce产品页面上显示销售总数

    让客户知道产品的受欢迎程度确实有助于转化。一种方法是在产品页面上显示产品已售出的次数。WooCommerce 已经记录了产品的销售次数，因此在产品页面上显示这些数据非常容易。 woo...

    2022-07-10
  2. 为注销的用户重命名WooCommerce我的帐户菜单链接

    为注销的用户重命名WooCommerce我的帐户菜

    在您的 WooCommerce 商店中，您可能会有一个指向我的帐户页面的菜单链接。通常，无论用户是否登录，此链接都会显示我的帐户。但是，如果我们想让它为注销的用户说一些更有用的东西...

    2022-07-10
  3. 按国家地区禁用WooCommerce支付网关

    按国家地区禁用WooCommerce支付网关

    如果您使用 WooCommerce 向多个国家/地区销售商品，您可能需要阻止来自某些国家/地区的客户使用特定的支付网关。例如，您可能只想向美国客户提供 PayPal。或者您可能希望阻止澳大利亚...

    2022-07-10
  4. 变量$order获取WooCommerce订单信息

    变量$order获取WooCommerce订单信息

    在WooCommerce我怎样才能得到订单总额或者我怎样才能得到订单物品或者可能是订单 ID、客户 ID、账单信息、付款方式、总退款等等，使用变量$order可以获取。可能有 $order_id 可用。在这种...

    2022-04-15
  5. 在WooCommerce中以编程方式隐藏价格

    在WooCommerce中以编程方式隐藏价格

    如果您具有编码技能并且更喜欢构建自己的解决方案，则可以以编程方式隐藏 WooCommerce 价格。使用插件是一种简单的方法，但创建自定义解决方案可以为您提供更多控制和灵活性。此外...

    2022-08-01
  6. 使用$product获取WooCommerce产品信息ID、SKU、$等等

    使用$product获取WooCommerce产品信息ID、S

    在WooCommerce中，使用变量$product 如何获取产品 SKU或者我怎样才能得到产品的简短描述或者可能是产品库存水平、运输等级、税收等级、价格、正常价格、销售价格等等.并非总是可以访问...

    2022-04-15
  7. 在WooCommerce列表页显示商品品牌

    在WooCommerce列表页显示商品品牌

    安装好WooCommerce Brands 插件网站将显示品牌分类，商品也会出现品牌链接，但是商品列表页如何也显示商品品牌呢？仅将这些添加到单个产品页面中。 在woomcomerce当中添加以下代码： ad...

    2022-04-15
  8. 在 WooCommerce中自定义地址格式

    在 WooCommerce中自定义地址格式

    每个国家都有不同的地址格式，例如，美国使用缩写的州名，而澳大利亚通常显示完整的州名。这些不是一成不变的规则，它们总是可以改变的。如何 ? 通过当然是自定义代码： 此代码...

    2022-07-26
  9. 在WooCommerce单个产品图像上禁用缩放、灯箱和滑块

    在WooCommerce单个产品图像上禁用缩放、灯

    如果WooCommerce您不销售具有大量细节的高端产品，您的客户可能不需要直接放大您的产品图像的能力。而且，如果您不上传高分辨率图像，那么缩放功能就毫无用处。这同样适用于灯箱和...

    2022-07-10
  10. 在WooCommerce添加产品视频代替图片

    在WooCommerce添加产品视频代替图片

    WooCommerce 不允许您添加产品视频，但是我们可以用几行代码添加它，不需要第三方插件。 WooCommerce 产品图片用于说明您的产品，但有些产品需要视频才能更好地展示它们。在这里，我将...

    2022-04-04