Как изменить раскладку страницы магазина в WordPress?

В настоящее время я работаю на странице магазина. И согласно проекту, я должен вставить баннер после 4-го продукта и после 7-го продукта, и у меня есть 3 продукта в каждой строке, а размер Баннера равен ширине 2-х продуктов. Это то, что мне нужно. введите описание изображения здесь

Я пробовал это через jquery с кодом, показанным ниже.

$("#left-area > ul > li:nth-child(4)").after('<img src="http://localhost/jew/wordpress/wp-content/uploads/2015/11/selection-page-copy_03.jpg">'); 

Изображение вставлено правильно в правильное положение, но проблема в том, что он меняет расположение всей области ниже этого баннера, как показано на рисунке ниже

введите описание изображения здесь

Я пробовал редактировать шаблон woocommerce, но я видел, что список продуктов генерируется динамически, и я запутался, куда поместить код для изображения. Так что я попробовал JQuery. Итак, пожалуйста, помогите мне, как правильно разместить баннер, чтобы позиция продукта менялась в соответствии с баннером, но правильно. Заранее спасибо.

Solutions Collecting From Web of "Как изменить раскладку страницы магазина в WordPress?"

Не используйте jQuery для размещения изображения на странице вашего магазина (так как есть правильный способ сделать это). Вместо этого прочитайте методы переопределения шаблона в Woocommerce: https://docs.woothemes.com/document/template-structure/

  1. Скопируйте папку woocommerce в свою тему (если у вас нет папки внутри главной темы / дочерней темы).
  2. Перейдите к your_theme / woocommerce / templates / archive-product.php (это всего лишь пример того, как переопределить файлы шаблонов вашего магазина).
  3. Напишите логику внутри шаблона, чтобы вставить раздел после нечетных итераций.