CODEWITHSUNDEEP
phpwordpresswoocommercelabelproduct-variations
GTO
GTO

Reputation: 135

Adding a custom text next to a specific product attribute label in WooCommerce

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

Upvotes: 1

Views: 8639

Answers (2)

LoicTheAztec
LoicTheAztec

Reputation: 253784

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.

Upvotes: 4

Alexander Z
Alexander Z

Reputation: 604

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

Upvotes: 2

Related Questions