save_wp_table_to_json

<?php
function wcpi_add_my_products_section( $sections ) {
	$sections['wcpi_settings'] = 'Иконки товаров';
	return $sections;
}
add_filter( 'woocommerce_get_sections_products', 'wcpi_add_my_products_section' );
// Add Settings for new section
function wcpi_add_my_products_settings( $settings, $current_section ) {
	// make sure we're looking only at our section
	if ( 'wcpi_settings' === $current_section ) {
		
		$my_settings = array(
			array(
				'title'     => 'Иконки товаров',
				'type'      => 'title',
				'id'        => 'wcpi_settings',
            ),
            array(				
				'type'      => 'wcpi_table',
				'id'        => 'wcpi_table',
			),
			
			array(
				'id'       => 'wcpi_product_options',
				'type'     => 'textarea',
				'title'    => 'Названия свойств товара и ссылки на картинки',
				'options'  => array(
					'uno'  => __( 'The first option', 'my-textdomain' ),
					'dos' => __( 'The second option', 'my-textdomain' ),
				),
				'default'  => '',
				'desc'     => "формат:<br>Фотообои|imageurl<br>Можно мыть|imageurl ",
				'desc_tip' => true,
			),
			array(
				'type'  => 'sectionend',
				'id'    => 'wcpi_settings',
			),
        );		
		return $my_settings;
		
	} else {
		// otherwise give us back the other settings
		return $settings;
	}
}

add_filter( 'woocommerce_get_settings_products', 'wcpi_add_my_products_settings', 10, 2 );

//Custom html
add_action('woocommerce_admin_field_wcpi_table','wcpi_table_render');

function wcpi_table_render() {
    ?>
    <p>
        <table border="3" class="custom_wp_table" id="custom_wp_table">
            <tbody>
            <thead>
                <tr>
                    <th>Ключ</th>
                    <th>Название</th>
                    <th>URL иконки</th>
                    <th></th>
                </tr>
            </thead>                
            <tr>
                <td contenteditable='true'></td>
                <td contenteditable='true'></td>
                <td contenteditable='true'></td>
                <td><input type="button" value="Удалить" onclick="deleteRow(this)"/></td>
            </tr>
            </tbody>
        </table>
        <a href="javascript:addRow();">Добавить</a>
    </p>
        <style>
            .custom_wp_table td {
                min-width: 100px;
                max-width: 500px;
                min-height: 10px;
            }
            .custom_wp_table td input {
                width: 100%;
            }
        </style>
        <script>
        function addRow() {                
            var tbody = document.getElementById('custom_wp_table'),
            n, row, cell;

            var cellcount = tbody.rows[0].cells.length;                

            row = tbody.insertRow();
            for(var i=0; i < cellcount - 1; i++){
                row.insertCell().setAttribute("contenteditable", true);
            }
            var lastcell = row.insertCell();
            lastcell.innerHTML = '<input type="button" value="Удалить" onclick="deleteRow(this)"/>';                
        }
        function deleteRow(btn) {
            var row = btn.parentNode.parentNode;
            row.parentNode.removeChild(row);
        }
        </script>

        <script>
            jQuery(document).ready(function($) {
                var tbody = document.getElementById('custom_wp_table'),
                n, row, cell;
                var cellcount = tbody.rows[0].cells.length;
                var i=0;
                
                $('#custom_wp_table').bind("DOMSubtreeModified",function(){
                    var myRows = [];
                    var $headers = $("#custom_wp_table th");
                    var $json = '';
                    var $rows = $("#custom_wp_table tbody tr").each(function(index) {                            
                            $cells = $(this).find("td");
                            myRows[index] = {};
                            $cells.each(function(cellIndex) { 
                                if( i != cellcount - 1 ) {
                                    myRows[index][$($headers[cellIndex]).html()] = $(this).html();
                                    i++;
                                } 
                            }); 
                            i=0;
                        
                    });

                    // Let's put this in the object like you want and convert to JSON (Note: jQuery will also do this for you on the Ajax request)
                    var myObj = {};
                    myObj.myrows = myRows;
                    $json = JSON.stringify(myObj);
                    $('#wcpi_product_options').val($json);
                });
            })
        </script>
    <?php
}