Как добавить дополнительную информацию в атрибут продукта WooCommerce?

На одной странице продукта я хотел бы добавить значок дополнительной информации (i или ?) для определенного атрибута pa_attribute. Итак, если вы нажмете на ? значок вы увидите всплывающее окно для получения дополнительной информации об этом конкретном атрибуте. (пример:https://laadkompas.nl/offerte-aanvraag-1/?car-type=Universeel%2C+verschillende+elektrische+auto%27s&installatie=Ja&compire=Thuislocatie)

Я провел небольшое исследование, но не смог скомпилировать код, потому что не смог получить конкретный атрибут php pa_attribute.

Iv нашел этот код: но он не связан с pa=attribute и его всплывающей подсказкой.

add_action( 'woocommerce_before_variations_form', 'krank_custom_action', 2 );

function krank_custom_action() {
    echo '  <button class="krank-tooltip ttone" type="button" data-toggle="tooltip" data-placement="top" title="this is a text ">?</button>

Может ли кто-нибудь скомпилировать этот код, чтобы получить определенный атрибут pa с дополнительной всплывающей подсказкой или всплывающим окном на странице одного продукта (Woocommerce)?


person Emin Celen    schedule 19.09.2019    source источник


Ответы (2)


Я провел небольшое исследование и нашел правильный код. Это связано с определенным атрибутом pa_attribute, но теперь мне нужно сделать значок (?) кликабельным и получить дополнительную информацию об этом конкретном атрибуте продукта.

add_filter( 'woocommerce_attribute_label', 'custom_attribute_label', 10, 3 );
function custom_attribute_label( $label, $name, $product ) {
    $taxonomy = 'pa_'.$name;

    if( $taxonomy == 'pa_montagewijze' )
        $label .= '<div class = "customization_image_icon"><img class="alignleft wp-image-25335" src="https://laadkompas.nl/wp-content/themes/laadkompass/images/info.png" alt="" width="10" height="10" /></div>';

    return $label;
}

Может ли кто-нибудь сделать всплывающую подсказку по этому конкретному атрибуту, чтобы получить больше информации?

person Emin Celen    schedule 27.09.2019

Я был в такой же ситуации, и ваш вопрос и ответ мне очень помогли. Я делюсь своей последней работой здесь, возможно, она будет полезна кому-то позже:

Я предпочел использовать значки fontawsome в своей ситуации, а не загружать изображение, а также, основываясь на своих возможностях шаблона, я использовал для выполнения своего template shortcode (моя тема плоская с ux-builder), чтобы достичь того, что я хотел (и то же самое, что вы просили) :

add_filter( 'woocommerce_attribute_label', 'custom_attribute_label', 10, 3 );
function custom_attribute_label( $label, $name, $product ) {
    $taxonomy = 'pa_'.$name;

    if( $taxonomy == 'pa_mjattr' )
        $label = $label . ' <a href="#guide-mjattr">info<i class="fa fa-question"></i></a> ' . do_shortcode( '[lightbox id="guide-mjattr" width="600px" padding="20px"][block id="guide-mjattr"][/lightbox]' );

    return $label;
}
person Mojtaba Rezaeian    schedule 26.04.2021