在Woocommerce单一产品中，在简短说明结束后的meta之后添加div

Question

我需要对Woocommerce单一产品页面进行一些样式设置：我需要在价格（我将其移到“添加到购物车”按钮上方的位置）周围添加边框，以库存状态添加到购物车按钮和元数据。因此，这些项目基本上是视觉边界： https://postimg.cc/image/jp6e1hpa9/

由于它们不在一个特定的div中，因此我需要在它们周围放置一个新的div。如何在上述项目周围添加此div？

Answer 1

已更新

如果您已将商品价格移动到了添加到购物车按钮上方，并带有一些代码，则下面的代码将替换您的代码，因为它还会在商品简短说明下移动价格。

它还添加了一个div容器html标签，该标签开始于移动价格之前，结束于产品元数据之后（请参见最后的屏幕截图）。

代码：

add_action('woocommerce_single_product_summary', 'custom_single_product_price', 3 );
function custom_single_product_price() {

    // Remove product price
    remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

    // Add back the product price after short description
    add_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 25 );

    // Opening div container (just after the product short description and before the moved product price)
    add_action('woocommerce_single_product_summary', 'opening_div_single_product_summary', 21 );

    // Closing div container (after the product meta data)
    add_action('woocommerce_single_product_summary', 'closing_div_template_single_price', 60 );
}

function opening_div_single_product_summary() {
    // Display the opening div
    echo '<div class="custom-container">';
}

function closing_div_template_single_price() {
    // Then display the closing div
    echo '</div>';
}

代码进入活动子主题（或活动主题）的function.php文件中。经过测试并可以正常工作。

Answer 2

您需要从各自的主题覆盖woocommerce模板结构。 https://docs.woocommerce.com/document/template-structure/ 之后，请在单个产品文件夹中找到price.php（可能会在最新版本上进行更改）。我们将在那里找到价格的HTML结构。