Woocommerce如何将标题属性添加到迷你购物车上产品名称的锚标记

Posted

技术标签:

【中文标题】Woocommerce如何将标题属性添加到迷你购物车上产品名称的锚标记【英文标题】:Woocommerce how to add title attribute to anchor tag for product name on mini cart 【发布时间】:2021-11-13 09:06:15 【问题描述】:

我想为 Woocommerce 迷你购物车中产品名称的锚标签添加一个标题属性,这样当客户将鼠标悬停在产品名称上时,会出现一个带有产品名称的工具箱。

<a href="" title=""></a>

有没有实现这个功能的功能?

【问题讨论】:

【参考方案1】:

复制找到的文件

wp-content/plugins/woocommerce/templates/cart/mini-cart.php -> wp-content/themes/your-theme/woocommerce/cart/mini-cart.php

进入您商店的子主题。

请注意,如果您自定义父主题而不是子主题,任何更改都将被主题更新覆盖。

更改 wp-content/themes/your-theme/woocommerce/cart/mini-cart.php 中的代码

之前

<a href="<?php echo esc_url( $product_permalink ); ?>">
                            <?php echo $thumbnail . wp_kses_post( $product_name ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</a>

之后

<a href="<?php echo esc_url( $product_permalink ); ?>" title="<?php echo esc_attr($product_name); ?>">
                            <?php echo $thumbnail . wp_kses_post( $product_name ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</a>

对于工具提示,您可以使用“jquery-ui”。将以下代码添加到您的主题的functions.php

function my_scripts_method() 
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-core');

add_action('wp_enqueue_scripts', 'my_scripts_method');

您需要将此代码添加到您的主题中的 js 文件中

jQuery( function() 
    jQuery( '.woocommerce-mini-cart-item a').tooltip();
 );

【讨论】:

谢谢,其实我想知道有没有函数可以实现这个,这样我就不用重写模板了! @Kanel 文件模板中产品永久链接的输出,没有钩子。您必须更改模板文件

以上是关于Woocommerce如何将标题属性添加到迷你购物车上产品名称的锚标记的主要内容,如果未能解决你的问题,请参考以下文章

更改 WooCommerce 迷你购物车小部件上的购物车和结帐按钮链接

Woocommerce:添加到购物车后的自定义 jquery 事件

在Woocommerce中Ajax化自定义迷你购物车小部件

WooCommerce 自定义迷你购物车功能/简码不起作用

插件:Woocommerce > 如何允许作者将产品添加到购物车

添加到 WooCommerce 购物车时如何重置所有字段