Add title tag to Woocommerce mini cart product name-CodePudding

I want to add a title tag (a href=..." title="...") to the prduct names in the Woocommerce mini cart, so that when a customer hovers over the product name, a toolbox will appear with the product name. Is there a function to achieve this?

CodePudding user response：

Copy the file found at

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

into your store’s child theme .

Note that if you customize the parent theme rather than the child theme, any changes will be overwritten with theme updates.

Change code in wp-content/themes/your-theme/woocommerce/cart/mini-cart.php

Before

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

After

<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>

Fоr tooltip you can use 'jquery-ui'. Add below code to functions.php of your theme

function my_scripts_method() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-core');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

You need to add this code to your theme in js file

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