Magento2: How to add a text between swatch configure and swatch attribute name?

Question

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

Answer 1

You can add below code in swatch-renderer.js

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

/vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js

_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);
        this._sortAttributes();
        this._RenderControls();
        this._setPreSelectedGallery();
        $(this.element).trigger('swatch.initialized');
    } 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.