I am having trouble while creating a module that add a text between swatch configure and swatch attribute name load by default, I want to add it only on a specific swatch if I have more than one. And what if it an input. How Can I do that?
For exmaple: we have [attribute name] [attribute configure]
I want to add a text between them
[attribute name] [text] [attribute configure] How can I do this, thanks
enter image description here

  • Do you want to load it by default OR on On click swatches? And also please add screen here what exactly you expect?
    – Ravi Soni
    Jul 2 '19 at 6:38
  • I want to load it by default, but really do not know how to do it
    – sekiro
    Jul 2 '19 at 6:39
  • Can you please add screenshot what do you want OR on which page?
    – Ravi Soni
    Jul 2 '19 at 6:55
  • @RaviSoni I just add it, thanks
    – sekiro
    Jul 2 '19 at 7:02

You can add below code in swatch-renderer.js

Override this file in your custom theme and add custom code in below funciton.


_init: function () {
    if (_.isEmpty(this.options.jsonConfig.images)) {
        this.options.useAjax = true;
        // creates debounced variant of _LoadProductMedia()
        // to use it in events handlers instead of _LoadProductMedia()
        this._debouncedLoadProductMedia = _.debounce(this._LoadProductMedia.bind(this), 500);

    if (this.options.jsonConfig !== '' && this.options.jsonSwatchConfig !== '') {
        // store unsorted attributes
        this.options.jsonConfig.mappedAttributes = _.clone(this.options.jsonConfig.attributes);
    } else {
        console.log('SwatchRenderer: No input data received');
    this.options.tierPriceTemplate = $(this.options.tierPriceTemplateSelector).html();
    if ($(".swatch-attribute.color")[0]){
        $('.swatch-attribute.color').after('<span>Some text</span>');

Here 'Some text'

Now color is your specific swatch code. "You can add your attribute code here"

Please check this.

  • and what if in a product there are many swatches how can I choose a specific swatch attribute and add some text to it. I can understand your code however, it work with every swatch attribute, but not with an individual swatch attribute
    – sekiro
    Jul 2 '19 at 8:00
  • Check now I have updated my code
    – Ravi Soni
    Jul 2 '19 at 8:25
  • Oh thanks, I want to ask what is number 0 mean in this line if ($(".swatch-attribute.color")[0])
    – sekiro
    Jul 2 '19 at 8:28
  • I add your code to my module however, it not display next to swatches attribute name it display under them
    – sekiro
    Jul 2 '19 at 8:45
  • Oh. here I come to solution with your code. $('.swatch-attribute.color > .swatch-attribute-label').after('<span>Some text</span>') it will place next to swatches attribute name. Thanks for your help
    – sekiro
    Jul 2 '19 at 8:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.