Wordpress 将文本放置在产品图像下方

我正试图在Wordpress Woo商业网站的产品库图片下方添加文本

我已尝试使用联机找到的常规脚本：

add_action( 'woocommerce_after_single_product_summary' , 'bbloomer_add_below_prod_gallery', 5 );

function bbloomer_add_below_prod_gallery() {
   echo '<div class="woocommerce-product-gallery" style="background: #fdfd5a; padding: 1em 2em">';
   echo '<span>THIS IS A TEST. YOU CAN ADD TEXT, IMAGES AND ANY HTML</span>';
   echo '</div>';
}

add\u action（'woocommerce\u在单个产品摘要之后，'bbloomer\u add\u在产品库下面，'5'）；
功能bbloomer\u在产品库（）下方添加{
回声'；
echo“这是一个测试。你可以添加文本、图像和任何HTML”；
回声'；
}

您可以在下面的屏幕截图中看到，文本显示在此处，而不是实际图像的下方

此引用的网站链接可在以下位置找到：

更新： 在尝试了下面建议的解决方案后，div文本始终显示在底部：

我正在尝试使此div显示在此处：

---

我正在使用的链接可以在这里找到：

您需要在您的

div中添加样式
清除：两个
。检查下面的代码

add_action( 'woocommerce_after_single_product_summary' , 'bbloomer_add_below_prod_gallery', 5 );

function bbloomer_add_below_prod_gallery() {
   echo '<div class="woocommerce-product-gallery" style="background: #fdfd5a; padding: 1em 2em; clear:both;">';
   echo '<span>THIS IS A TEST. YOU CAN ADD TEXT, IMAGES AND ANY HTML</span>';
   echo '</div>';
}

add\u action（'woocommerce\u在单个产品摘要之后，'bbloomer\u add\u在产品库下面，'5'）；
功能bbloomer\u在产品库（）下方添加{
回声'；
echo“这是一个测试。你可以添加文本、图像和任何HTML”；
回声'；
}
请查看编辑，这仍然不起作用appropriately@user2592356你想让文字正好在图像下方吗？