问如何更改wordpress中的页面布局？

EN

目前，我正在商店的网页上工作。根据设计，我必须在第4产品后和第7产品之后插入一个横幅，每行有3个产品，横幅等于2 products.This是我所需要的。

我已经通过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的模板，但是我看到了产品列表是动态生成的，我很困惑如何为image.So放置代码，我尝试了Jquery。因此，请帮助我如何安装横幅，使产品的位置变化根据横幅，但以适当的方式。提前谢谢你。