Здравствуйте!
Как я понял у вас имеется уже верстка. Осталось для начала создать тему, а потом уже адаптировать под Woocommerce.
https://codex.wordpress.org/Theme_Development
Создайте тему -
создайте файл style.css и добавьте:
/*
Theme Name: MyTheme
Theme URI: mytheme.loc
Description: Individual WP Theme
Author: AuthorName
Author URI: mytheme.loc
Version: 1.0
*/
Внесите свои правки...
Создайте файл functions.php и подключите все скрипты, стили и шрифты через код. Например,
// подключаем стили и скрипты
function register_styles_scripts() {
//стили
wp_enqueue_style('customCSS', get_template_directory_uri() .
'/custom.css');
//скрипты
wp_enqueue_script('jquery', get_template_directory_uri() .
'.js/script.js');
}
add_action('wp_enqueue_scripts', 'register_styles_scripts');
Создайте необходимый набор файлов рнр (index.php, header.php, footer.php, page.php, single.php, archive.php). Смотря, какие страницы вам нужны...
https://developer.wordpress.org/themes/basics/temp...
Создайте меню в functions.php Например:
register_nav_menu ('menu', 'Main menu');
и выведите меню через - wp_nav_menu()
https://wp-kama.ru/function/register_nav_menu
https://wp-kama.ru/function/wp_nav_menu
Включите поддержку миниатюр для записей -
add_theme_support( 'post-thumbnails' );
Далее по шаблонам:
- вставляем <?php wp_head(); ?> перед </head>
- вставляем <?php wp_footer(); ?> перед </body>
- Копируем header вырезаем и вставляем в header.php
- Взамен добавляем код <?php get_header(); ?>
- Копируем sidebar вырезаем и вставляем в sidebar.php
- Взамен добавляем код <?php get_sidebar(); ?>
- Копируем footer вырезаем и вставляем в footer.php
- Взамен добавляем код <?php get_footer(); ?>
- в index.php изменяем url изображений на <?php bloginfo('template_url'); ?>/
- вставляем между <title><?php bloginfo('name');?> | <?php wp_title(); ?></title>
В шаблоны добавьте цикл ВП:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_content (); ?>
<?php endwhile; ?>
<?php endif; ?>
После этого можно приступать к адаптации вукомерца.
Для корректного применения стилей вукомерца в тег body надо добавить body_class()
https://wp-kama.ru/function/body_class
Далее установите плагин Woocommerce. В папке с плагином есть папка templates. Скопируйте ее в директорию вашей темы и переименуйте в woocommerce
Цикл вукомерца отличается от стандартного цикла ВП. Подробная информация:
https://docs.woocommerce.com/document/third-party-...
Шаблоны вукомерца работают используют хуки. Используйте их для кастомизации.
https://docs.woocommerce.com/document/introduction... 
Сложный
