控制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. 变量$order获取WooCommerce订单信息

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

    2022-04-15
  2. 使用$product获取WooCommerce产品信息ID、S

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

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

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

    2022-04-15
  4. 在WooCommerce添加产品视频代替图片

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

    2022-04-04
  5. 重命名WooCommerce产品选项卡里的附加信息

    系统WooCommerce产品选项卡里的附加信文字一般为Additional information,意思附加信息,但是我们可能需要修改成产品规格,文字Specifications,使用插件太过冗余,直接采用以下代码片段: a...

    2022-04-04
  6. WooCommerce启用PayPal Standard标准版

    WooCommerce一次次升级把PayPal Standard标准版给隐藏了,推荐用高级版,对于广大外贸独立站来说,使用高级企业版就不能提现到个人账户了,我们需要PAYPAL标准版,这里最模板提供代码如下...

    2022-04-04
  7. 当WooCommerce订单金额超过1000隐藏paypal

    在当WooCommerce当中我们使用最多的支付工具是paypal,但是手续费太高了,4.4%加提现35美金,对于我们广大独立站来说,利润太薄了,若是出现一个更大的订单,超过1000,一下子就收走了...

    2022-04-04
  8. 控制WooCommerce在产品页标签数量

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

    2022-03-28
  9. 显示WooCommerce选定的变化信息如价格、重

    让我们访问WooCommerce变体 ID。如果我需要读取变化价格、库存数量、SKU、重量等怎么办?那么,在这种情况下,我们需要不同的代码。...

    2022-03-28
  10. 变量$cart获取WooCommerce购物车信息总数、

    怎样才能得到WooCommerce购物车总数或者怎样才能显示WooCommerce购物车商品或者可能是购物车费用、申请的优惠券、购物车内容总量、总重量等等,这里使用$cart 变量. 1. 如果您可以访问 ...

    2022-04-15