How to add custom product option group in Magento 2

Here, I am going to learn that how to add custom product option group in magento2. There are four option group exist in magento with various option types.

If we need to extends some functionality in predefined option type then we need to add another option group.

For adding new product option group. We have to add following files : –

1 – Create product_options.xml at this path

app/code/Test/Module/etc/product_options.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Catalog:etc/product_options.xsd">
    <option name="Test" label="Test" renderer="Test\Module\Block\Adminhtml\Product\Edit\Tab\Options\Type\Test">
        <inputType name="field" label="Test" />
    </option>
</config>

2- Now you have to create Test.php which is define in product_options.xml for rendering option group in product “Customizable Options Tab”.

app/code/Test/Module/Block/Adminhtml/Product/Edit/Tab/Options/Type/Test.php

<?php
/**
* customers defined options
*
* @author     Magento Core Team <core@magentocommerce.com>
*/
namespace Test\Module\Block\Adminhtml\Product\Edit\Tab\Options\Type;

class Test extends \Magento\Catalog\Block\Adminhtml\Product\Edit\Tab\Options\Type\AbstractType
{
    /**
    * @var string
    */
    protected $_template = 'catalog/product/edit/options/type/test.phtml';
}

3- Create template file at this path app/code/Test/Module/view/adminhtml/templates/catalog/product/edit/options/type/test.phtml

<script id="custom-option-test-type-template" type="text/x-magento-template">
    <div id="product_option_<%- data.option_id %>_type_<%- data.group %>" class="fieldset">
        <table class="data-table">
            <thead>
            <tr>
                <?php if ($block->getCanReadPrice() !== false) : ?>
                <th class="type-price"><?php /* @escapeNotVerified */ echo __('Price') ?></th>
                <th class="type-type"><?php /* @escapeNotVerified */ echo __('Price Type') ?></th>
                <?php endif; ?>
                <th class="type-sku"><?php /* @escapeNotVerified */ echo __('SKU') ?></th>
                <th class="type-qty"><?php /* @escapeNotVerified */ echo __('QTY') ?></th>
                <th class="type-last last"><?php /* @escapeNotVerified */ echo __('Max Characters') ?></th>
            </tr>
            </thead>
            <tr>
                <?php if ($block->getCanReadPrice() !== false) : ?>
                <td class="opt-price">
                    <input id="product_option_<%- data.option_id %>_price"
                           name="product[options][<%- data.option_id %>][price]"
                           class="input-text validate-number product-option-price"
                           type="text" value="<%- data.price %>" data-store-label="<%- data.price %>"
                        <?php if ($block->getCanEditPrice() === false) : ?>
                           disabled="disabled"
                        <?php endif; ?>>
                </td>
                <td class="opt-price-type"><?php echo $block->getPriceTypeSelectHtml('data-attr="price-type"') ?><%- data.checkboxScopePrice %></td>
                <?php else : ?>
                <input id="product_option_<%- data.option_id %>_price" name="product[options][<%- data.option_id %>][price]" type="hidden">
                <input id="product_option_<%- data.option_id %>_price_type" name="product[options][<%- data.option_id %>][price_type]" type="hidden">
                <?php endif; ?>
                <td>
                    <input name="product[options][<%- data.option_id %>][sku]" class="input-text" type="text" value="<%- data.sku %>">
                </td>
                <td>
                    <input name="product[options][<%- data.option_id %>][qty]" class="input-text validate-zero-or-greater" type="text" value="<%- data.qty %>">
                </td>
                <td>
                    <input name="product[options][<%- data.option_id %>][max_characters]" class="input-text validate-zero-or-greater" type="text" value="<%- data.max_characters %>">
                </td>
            </tr>
        </table>
    </div>
</script>

Now flush your cache and you can check custom product option group in “Customizable Options Tabs”.