首页 > 解决方案 > 如何使用我的自定义 html 更改 content-single-product.php 页面

问题描述

我想在产品页面上显示我的自定义 html 代码,我已经创建了子主题并复制了 woocommerce 的文件。现在我想为该页面实现我的自定义 html 代码。

这是我的自定义代码

<section id="aboutus-section" class="content-section">
                <div class="container">
                    <div class="row">
                        <div class="main-title">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <h1 class="text-uppercase">ART BY MONA LIND</h1>
                                <h3>$150 - <a herf="https://www.definitepossibilities.com/hosting-clients/monalind/checkout/"> Checkout</a></h3>
                                <hr/>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <img class="img-responsive pull-right" style="margin-left: 20px; margin-bottom: 15px;" src="https://www.definitepossibilities.com/hosting-clients/monalind/wp-content/uploads/2018/07/Abstract-2-1.jpg" alt="Capturing  the light  and  the  natural  elements  of  life." />
                            <p>Art is a diverse range of human activities in creating visual, auditory or performing artifacts (artworks), expressing the author's imaginative, conceptual idea, or technical skill, intended to be appreciated for their beauty or emotional power. </p>
                            <p>Many argue that art cannot be defined. ... Art is often considered the process or product of deliberately arranging elements in a way that appeals to the senses or emotions. 
                                <br/> It encompasses a diverse range of human activities, creations and ways of expression, including music, literature, film, sculpture and paintings.
                                <br/><a herf="https://www.definitepossibilities.com/hosting-clients/monalind/checkout/"> Purchase this for $150</a>

                                </p>
                        </div>
                    </div>
                </div>
            </section>

这就是我希望它看起来的样子:

在此处输入图像描述

这是我的content-single-product.php模板代码:

<?php 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 wc_product_class(); ?>>

    <?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="summary entry-summary">
        <?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>

    <?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' ); ?>

标签: phpwordpresswoocommerce

解决方案


推荐阅读