1

Trying to add text (best inside a div) next to the title/label for a variation (i.e. SIZE) without editing the woocommerce page template.

Pseudocode:

function my_text_after_variation (){
  if attribute pa_size exists {
    echo label for pa_size;
    echo <div> MY TEXT </div>;
}else{
   return;
}};

Every help is highly welcome.

Move the sizing Guide text next to the sizes attribute label

aynber
  • 22,380
  • 8
  • 50
  • 63
GTO
  • 135
  • 1
  • 2
  • 10
  • 1
    This question is just unclear… The product variation title is located in cart items on cart page and checkout pages. Now the attribute title/label, is located on variable products dropdowns in single product pages. So you should provide a screen shot or a live link and better explanations, please. Thanks – LoicTheAztec Feb 07 '18 at 21:06
  • @LoicTheAztec - merci mon amis :) i have added the screenshot to explain what i'm after. I need this only on the single product pages and nowhere else. Thanks Loic – GTO Feb 08 '18 at 13:14
  • 1
    Ok fine I have answered and is quiet simple and light. As the display is not inline using a `
    ` tag, the appended custom text goes next line.
     – LoicTheAztec Feb 08 '18 at 16:41

2 Answers2

4

To display a custom text just after a specific attribute label name, you will use this a custom function hooked in woocommerce_attribute_label dedicated filter hook, this way:

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

    if( $taxonomy == 'pa_size' )
        $label .= '<div class="custom-label">' . __('MY TEXT', 'woocommerce') . '</div>';

    return $label;
}

Code goes in function.php file of your active child theme (or active theme).

Tested and works.

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
2

If you can not edit the woocommerce page template, try to use jQuery. For example:

$('.pa_size label').after('<span class="some-text">some text</text>');

If you need to use variable text, you can create object with this variable using 'wp_localize_script' and get it from this object:

function.php

// Localize the script with your data
$data_array = array(
  'some_text' => __( 'Some text to insert', 'my-domain' ),
);
wp_localize_script( 'some_handle', 'object_name', $data_array );

jQuery:

$('.pa_size label').after(object_name.some_text);
Alexander Z
  • 630
  • 3
  • 22
  • Thanks Alexander | I need to echo/output a php var inside this new div and can't get it working with the following code adapted from your answer: ` function add_div_after_pa_size () { global $product_id ?> – GTO Feb 08 '18 at 16:18