在Woocommerce单一产品中以meta结尾后的简短描述后添加div

Question

I need to do some styling to the Woocommerce single product page: I need a border around the price(which I moved above the add to cart button), in stock status, add to cart button and meta data. So basically a visual border around these items: https://postimg.cc/image/jp6e1hpa9/

Since they are not in one specific div, I need to place a new div around them. How can I add this div around the above mentioned items?

Answer 1

Updated

If you have moved the product price above add to cart button with some code, the following code bellow will replace your code as it also move the price under product short description.

It also adds a div container html tag starting before the moved price and ending after the product meta data (see the screenshot at the end).

The code:

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>';
}

Code goes in function.php file of the active child theme (or active theme). tested and works.