Question

我试图改变woocommerce单一产品页面的布局。只想更改标题，摘录并添加到购物车按钮位置。（图像前的标题和摘录，图像下方的按钮）。

Answer 1

页面布局在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' );包装在其自己的div中。你向左漂浮这个div并给它相同的灰色背景。此div包含woocommerce_before_single_product_summary动作输出的任何内容。类image的div您可能需要停止向左浮动。

从外面看，我们可以得到具体的信息。

编辑：这里添加了content-single-product.php个文件，其中包含了类before-single-product-summary的div来包装操作。

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

我无法保证此修改会解决您的问题，但它会让您走上正确的道路。

Answer 2

我们需要查看 content-single-product.ph p模板文件。以下是我们需要在该文件中查看的两个部分：

位于： plugins / woocommerce / templates / content-single-product.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_before_single_product_summary
第二个操作输出产品标题为 -

2] woocommerce_single_product_summary

让我们从摘要块中取出标题并将其放在其前面的块中，以便产品标题位于产品图像上方。

第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 );

woocommerce产品单页面布局

2 个答案: