Question

我在其中一个项目中使用WooCommerce。由于我是WooCommerce开发的新手，我遇到的问题如下：

我已下载，安装了woocommerce，并将其文件夹中的文件复制到主题根文件夹。我正在使用Bootstrap 4，我想使用Bootstrap布局单个产品页面。

我想将我的单个产品页面显示为： expectation
但我得到的是： reality

以下是我的代码：
single-product.php：https://pastebin.com/tPVC2XFv

    <?php

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

get_header( 'shop' ); ?>

    <header class="page-banner product-header container-fluid">
        <div class="container">
            <?php if (apply_filters('woocommerce_show_page_title', true)) : ?>
                <?php echo woocommerce_template_single_title(); ?>
            <?php endif; ?>
            <?php woocommerce_breadcrumb(); ?>
            <?php do_action('woocommerce_archive_description'); ?>
        </div>
    </header>

    <section class="single-product container-fluid">
        <div class="container">
            <div class="row">
                <div class="col-4">
                    <?php
                        /**
                         * woocommerce_sidebar hook.
                         *
                         * @hooked woocommerce_get_sidebar - 10
                         */
                        do_action( 'woocommerce_sidebar' );
                    ?>
                </div>
                <div class="col-8">
                    <?php while ( have_posts() ) : the_post(); ?>

                        <?php wc_get_template_part( 'content', 'single-product' ); ?>

                    <?php endwhile; // end of the loop. ?>
                </div>
            </div>
        </div>
    </section>

<?php get_footer( 'shop' );

/* Omit closing PHP tag at the end of PHP files to avoid "headers already sent" issues. */

content-single-product.php：https://pastebin.com/2LL8YewM

<?php
/**
 * The template for displaying product content in the single-product.php template
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/content-single-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see         https://docs.woocommerce.com/document/template-structure/
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     3.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

/**
 * Hook Woocommerce_before_single_product.
 *
 * @hooked wc_print_notices - 10
 */
do_action( 'woocommerce_before_single_product' );

if ( post_password_required() ) {
    echo get_the_password_form(); // WPCS: XSS ok.
    return;
}
?>
<div id="product-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="row">
        <div class="col-5">
            <?php
                /**
                 * Hook: woocommerce_before_single_product_summary.
                 *
                 * @hooked woocommerce_show_product_sale_flash - 10
                 * @hooked woocommerce_show_product_images - 20
                 */
                do_action( 'woocommerce_before_single_product_summary' );
            ?>
        <div class="col-7">
            <?php
                /**
                 * Hook: Woocommerce_single_product_summary.
                 *
                 * @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
                 * @hooked WC_Structured_Data::generate_product_data() - 60
                 */
                do_action( 'woocommerce_single_product_summary' );
            ?>
        </div>
    </div>

    <?php
        /**
         * Hook: woocommerce_after_single_product_summary.
         *
         * @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' );
    ?>
</div>

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

我不知道有什么问题，产品库滑块中的图像具有内联样式，因此布局不会按我的要求显示。我想要你的适当指导。我希望我会得到像你这样的优秀人才的帮助。 ;）

Answer 1

我不确定这是不是重复，但我会高度建议更多阅读和学习如何设置和使用Woo-commerce的儿童主题会在这种情况下帮助你：https://docs.woocommerce.com/document/set-up-and-use-a-child-theme/

除了上面提到的两个模板（单个产品和内容单个产品）之外，还有更多模板，您需要编辑这些模板才能实现您正在寻找的布局。另外，需要注意的一件事是在给定区域内使用多个引导容器。我可以看到，在你的single-product.php模板中，你有一个容器流体，紧接着是另一个容器。这可能会打破你的整个布局，所以要小心！

使用WooCommerce＆amp; amp ;;在自定义布局中开发自定义单个产品页面引导

1 个答案: