页面的布局是由woocommerce中的模板和模板中的WordPress操作决定的。你可能需要使用css、删除和添加操作以及更改模板的组合。
模板位于wp-content/plugins/woocommerce/templates/中。对于您的情况最重要的模板是content-single-product.php。这些模板可以在主题中覆盖，方法是将您自己的模板文件以相同的名称放在wp-content/themes/yourtheme/woocommerce中。我建议如下：

remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

然后

add_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_excerpt', 15 );
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

除了在主题中创建的自定义模板之外，还可以将do_action( 'woocommerce_before_single_product_summary' ); Package 在它自己的div中。将此div向左浮动，并赋予它相同的灰色背景。此div包含woocommerce_before_single_product_summary操作输出的任何内容。对于类为image的div，可能需要阻止它向左浮动。
从外部看，这是我们能得到的最具体的信息。
编辑：这是一个content-single-product.php文件，添加了before-single-product-summary类的div来 Package 动作。

<?php
/**
 * The template for displaying product content in the single-product.php template
 *
 * Override this template by copying it to yourtheme/woocommerce/content-single-product.php
 *
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     1.6.4
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

?>

<?php
    /**
     * woocommerce_before_single_product hook
     *
     * @hooked wc_print_notices - 10
     */
     do_action( 'woocommerce_before_single_product' );

     if ( post_password_required() ) {
        echo get_the_password_form();
        return;
     }
?>

<div itemscope itemtype="<?php echo woocommerce_get_product_schema(); ?>"      id="product-<?php the_ID(); ?>" <?php post_class(); ?>>

    <div class="before-single-product-summary">

    <?php
        /**
         * woocommerce_before_single_product_summary hook
         *
         * @hooked woocommerce_show_product_sale_flash - 10
         * @hooked woocommerce_show_product_images - 20
         */
        do_action( 'woocommerce_before_single_product_summary' );
    ?>

    </div>
    <div class="summary entry-summary">

        <?php
            /**
             * woocommerce_single_product_summary hook
             *
             * @hooked woocommerce_template_single_title - 5
             * @hooked woocommerce_template_single_rating - 10
             * @hooked woocommerce_template_single_price - 10
             * @hooked woocommerce_template_single_excerpt - 20
             * @hooked woocommerce_template_single_add_to_cart - 30
             * @hooked woocommerce_template_single_meta - 40
             * @hooked woocommerce_template_single_sharing - 50
             */
            do_action( 'woocommerce_single_product_summary' );
        ?>

    </div><!-- .summary -->

    <?php
        /**
         * woocommerce_after_single_product_summary hook
         *
         * @hooked woocommerce_output_product_data_tabs - 10
         * @hooked woocommerce_upsell_display - 15
         * @hooked woocommerce_output_related_products - 20
         */
         do_action( 'woocommerce_after_single_product_summary' );
    ?>

    <meta itemprop="url" content="<?php the_permalink(); ?>" />

</div><!-- #product-<?php the_ID(); ?> -->

<?php do_action( 'woocommerce_after_single_product' ); ?>

然后添加以下css：

.before-single-product-summary{
    float: left;
    background: #3c3f4e;
}
.product .images{
    float: none;
}

我不能保证这个修改会解决你的问题，但它会开始你走上正确的轨道。

我们需要查看content-single-product.php模板文件。下面是我们需要查看的两个部分：

**位于：**插件/woocommerce/templates/内容-单一产品. php

<?php
        /**
         * woocommerce_before_single_product_summary hook.
         *
         * @hooked woocommerce_show_product_sale_flash - 10
         * @hooked woocommerce_show_product_images - 20
         */
        do_action( 'woocommerce_before_single_product_summary' );
    ?>
    <div class="summary entry-summary">
        <?php
            /**
             * woocommerce_single_product_summary hook.
             *
             * @hooked woocommerce_template_single_title - 5
             * @hooked woocommerce_template_single_rating - 10
             * @hooked woocommerce_template_single_price - 10
             * @hooked woocommerce_template_single_excerpt - 20
             * @hooked woocommerce_template_single_add_to_cart - 30
             * @hooked woocommerce_template_single_meta - 40
             * @hooked woocommerce_template_single_sharing - 50
             */
            do_action( 'woocommerce_single_product_summary' );
        ?>
    </div><!-- .summary -->

"我们在这里看到两个动作"

• 产品形象的第一个行动是-

1]woocommerce单一产品之前的摘要

• 第二个动作输出的产品标题是-

2]woocommerce_单个_产品_摘要
让我们将标题从摘要块中拉出，并将其放在其前面的块中，以便产品标题位于产品图片上方。

步骤1：从woocommerce_single_product_summary中删除操作-

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );

第2步：将操作添加到woocommerce_before_single_product_summary-

add_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_title', 5 );