如何为WooCommerce特定pa属性添加信息弹窗/提示图标？

Got it, let's tackle this. You want to target a specific pa_ attribute (instead of adding a tooltip before the variations form) and add an info icon that shows detailed content when clicked/hovered. Here's a complete, customizable solution:

Step 1: PHP Code (Add the Info Icon to Your Target Attribute) #

Add this to your theme's functions.php file (or a custom plugin for better maintainability):

add_action( 'woocommerce_after_attribute_label', 'add_info_icon_to_specific_attribute', 10, 3 );
function add_info_icon_to_specific_attribute( $attribute, $values, $variation ) {
    // Replace 'pa_car-type' with YOUR target attribute slug (starts with pa_)
    $target_attribute_slug = 'pa_car-type';

    if ( $attribute->slug === $target_attribute_slug ) {
        // Option 1: Bootstrap Tooltip (hover to show text)
        echo '<button class="attribute-info-tooltip" type="button" data-toggle="tooltip" data-placement="top" title="Your detailed attribute information goes here. You can add multiple lines or links if needed!">?</button>';

        // Option 2: Custom Modal Popup (click to show larger content)
        // echo '
        // <button class="attribute-info-modal-trigger" type="button" data-target="#carTypeModal">?</button>
        // <div class="modal fade" id="carTypeModal" tabindex="-1" role="dialog">
        //   <div class="modal-dialog" role="document">
        //     <div class="modal-content">
        //       <div class="modal-header">
        //         <h5 class="modal-title">Car Type Details</h5>
        //         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        //           <span aria-hidden="true">&times;</span>
        //         </button>
        //       </div>
        //       <div class="modal-body">
        //         <p>Your detailed, longer attribute content here. You can include lists, links, or any HTML!</p>
        //         <ul>
        //           <li>Universeel: Works with all electric car models</li>
        //           <li>Installatie Ja: Professional installation included</li>
        //         </ul>
        //       </div>
        //     </div>
        //   </div>
        // </div>
        // ';
    }
}

Notes for PHP Code: #

• Replace pa_car-type with the actual slug of your target attribute (you can find this in WooCommerce > Products > Attributes, look at the "Slug" column).
• Choose either Option 1 (Tooltip) or Option 2 (Modal Popup) based on your needs. The tooltip is great for short text, while the modal works for longer, detailed content.

Step 2: CSS (Style the Info Icon) #

Add this CSS to your theme's custom CSS section (Appearance > Customize > Additional CSS) to make the icon look clean and user-friendly:

/* Style for tooltip icon */
.attribute-info-tooltip {
    background: #0073aa;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 14px;
    cursor: help;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Style for modal trigger icon */
.attribute-info-modal-trigger {
    background: #0073aa;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 14px;
    cursor: pointer;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.attribute-info-tooltip:hover, .attribute-info-modal-trigger:hover {
    background: #006799;
}

Step 3: JavaScript (Initialize Tooltip/Modal) #

If you're using Bootstrap (most WordPress themes include it or you can enqueue it), add this snippet to initialize the tooltip/modal:

jQuery(document).ready(function($) {
    // Initialize Bootstrap Tooltip
    $('.attribute-info-tooltip').tooltip();

    // Initialize Bootstrap Modal (if using Option 2)
    $('.attribute-info-modal-trigger').click(function() {
        $( $(this).data('target') ).modal('show');
    });
});

If your theme doesn't include Bootstrap, you can enqueue it via PHP by adding this to your functions.php:

add_action( 'wp_enqueue_scripts', 'enqueue_bootstrap_for_attribute_tooltip' );
function enqueue_bootstrap_for_attribute_tooltip() {
    wp_enqueue_style( 'bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css' );
    wp_enqueue_script( 'bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js', array('jquery'), '', true );
}

How It Works #

• The woocommerce_after_attribute_label hook runs right after each product attribute label is rendered on the single product page.
• We check if the current attribute's slug matches your target attribute, then output the info icon with either a tooltip or modal.
• The CSS styles the icon to match WordPress admin colors (you can adjust this to fit your theme).
• The JS initializes the Bootstrap components so the tooltip/modal works as expected.

内容的提问来源于stack exchange，提问作者Emin Celen