Woocommerce 如何将标题属性添加到迷你购物车上产品名称的锚标签
Woocommerce how to add title attribute to anchor tag for product name on mini cart
我想为 Woocommerce 迷你购物车中的产品名称的锚标记添加一个 title 属性,这样当客户将鼠标悬停在产品名称上时,会出现一个带有产品名称的工具箱。
<a href="" title=""></a>
有实现这个功能的吗?
复制在
找到的文件
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();
} );
我想为 Woocommerce 迷你购物车中的产品名称的锚标记添加一个 title 属性,这样当客户将鼠标悬停在产品名称上时,会出现一个带有产品名称的工具箱。
<a href="" title=""></a>
有实现这个功能的吗?
复制在
找到的文件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();
} );