BVADNK

Как и с селектами/чекбоксами - инпат "файл" необходимо скрыть, а вместо него скормить браузеру фейковое поле.

<label for="file-upload" class="custom-file-upload">
    Загрузка файла
</label>
<input id="file-upload" type="file"/>

Скрываем стандартное поле в стилях

input[type="file"] {
    display: none;
}

Стилизуем наше "псевдо-поле"

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

Пример взял со стака.
Конкретно форма, которая вам понравилась - есть тут, можете ориентироваться на стилистику (скрипты дёргать не нужно)

Подготовь фотки для всех товаров в одном размере и загрузи. Это, вообще, нормальная практика, если ты хочешь, чтобы твой магазин выглядел нормально.

Почему то у меня текст начинается с новой строки.

Скорее всего ты вставил текст со скрытыми символами, которые не видишь в визивиге, но их рендерит html.

И подскажите еще, где в каком файле искать код что бы заменить вот эти слова?

Сделать это можно через фильтры.

add_filter( "woocommerce_product_tabs", "woocommerce_rename_tab_callback",  98);
function woocommerce_rename_tab_callback($tabs) {
  $tabs["description"]["title"] = "Новое название";
  return $tabs;
}

Ищите в настройках горячих клавиш команду editor.action.blockComment

Я себе сочетание Ctrl+Shift+/ поставил

{
  "key": "ctrl+shift+/",
  "command": "editor.action.blockComment",
  "when": "editorTextFocus && !editorReadonly"
}