wordpress 产品页面自定义按钮

Question

我想要 woocommerce 产品页面上的一个按钮，当我们单击该按钮时，应该会弹出一个弹出窗口来显示该人的标题和联系方式。 我已经添加了按钮和一个弹出窗口，它在桌面上运行良好，但在移动设备上它不起作用，我无法在移动设备上关闭我的弹出窗口，我每次都必须刷新才能关闭..

<?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     3.0.0
 */
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
$selena_opt = get_option( 'selena_opt' );
global $product;
$schema = "Product";
// Downloadable product schema handling
if ( $product->is_downloadable() ) {
    switch ( $product->download_type ) {
        case 'application' :
            $schema = "SoftwareApplication";
            break;
        case 'music' :
            $schema = "MusicAlbum";
            break;
        default :
            $schema = "Product";
            break;
    }
}
?>
<div class="container">
<?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>
<div itemscope itemtype="<?php echo esc_url('http://schema.org/'.$schema); ?>" id="product-<?php the_ID(); ?>" <?php 
post_class(); ?>>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-4">
                <div class="single-product-image">
                    <?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>
            <div class="col-xs-12 col-md-8">
                <div class="summary entry-summary single-product-info">
                    <div class="product-nav">
                        <div class="next-prev">
                            <div class="prev"><?php previous_post_link('%link'); ?></div>
                            <div class="next"><?php next_post_link('%link'); ?></div>
                        </div>
                    </div>
                    <?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' );
                        //echo "saif";
                    ?><button type="button" class="btn_submit2" data-toggle="modal"  style="font-
family: Ralewa;
    background: #303030;     border: 1px solid #303030;"data-target="#orderModal">Call for Price</button>
                    <div class="single-product-sharing">
                        <?php 
                        if(function_exists('selena_product_sharing')) {
                            selena_product_sharing();
                        } ?>
                    </div>
                </div><!-- .summary -->
            </div>
        </div>
    </div>
    <div class="container">
        <?php
            /**
             * woocommerce_after_single_product_summary hook
             *
             * @hooked woocommerce_output_product_data_tabs - 10
             * @hooked woocommerce_output_related_products - 20
             */
            do_action( 'woocommerce_after_single_product_summary' );
        ?>
    <meta itemprop="url" content="<?php the_permalink(); ?>" />
    </div>
</div><!-- #product-<?php the_ID(); ?> -->
<?php do_action('woocommerce_show_related_products');
//dynamic_sidebar( 'sidebar-product' ); ?>
<?php do_action( 'woocommerce_after_single_product' ); ?>
<!-- Modal -->
    <div id="orderModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <form id="order-product" class="order-product">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <div class="order-prod">
                <?php /*?>Order Submission for : <?php the_title(); ?><?php */?>
                <div class="text-center pop-title" style="font-family: Raleway, Arial, Helvetica, sans-serif;
    font-size: 19px;
    font-weight: 600;
    display: block;
    line-height: 62px;
    min-height: 62px;
    text-transform: uppercase;
    position: relative;
    -webkit-transition: all .4s ease-out;
    color: #303030;">Product : <?php the_title(); ?>
                    <button type="button" class="close" data-dismiss="modal">&times;</button> 
                </div>
         </div>
         </div>
              <?php /*?><div class="modal-body">
              <div id="eqshow_message"></div>
                    <input type="hidden" name="enq_prodname" id="enq_prodname" value="<?php the_title(); ?>" />
                    <?php
                        $product = new WC_Product($post->ID);
                       $salePrice = $product ->sale_price;
                        if($salePrice){
                            $mainPrice = get_woocommerce_currency_symbol().$product ->sale_price;
                        } else {
                            $mainPrice = get_woocommerce_currency_symbol().$product ->regular_price;
                        }
                    ?>
                    <input type="hidden" name="enq_prodprice" id="enq_prodprice" value="<?php echo $mainPrice; ?>" />
                    <input type="hidden" name="enq_prodqty" id="enq_prodqty" value="" />
 <div class="form-group">
                    <input type="text" class="form-control" placeholder="First Name" name="enq_fname" id="enq_fname" autocomplete="off">
                    <div id="enq_fname_error" style="color:red;"></div>
                  </div>
                  <div class="form-group">
                    <input type="text" class="form-control" placeholder="Last Name" name="enq_lname" id="enq_lname" autocomplete="off">
                    <div id="enq_lname_error" style="color:red;"></div>
                  </div>
                  <div class="form-group">
                    <input type="text" class="form-control" placeholder="Email" name="enq_email" id="enq_email" autocomplete="off">
                    <div id="enq_email_error" style="color:red;"></div>
                  </div>
                  <div class="form-group">
                    <input type="text" class="form-control" placeholder="Phone" name="enq_phone" id="enq_phone" autocomplete="off">
                    <div id="enq_phone_error" style="color:red;"></div>
                  </div>
                  <div class="form-group">
                    <textarea name="enq_query" id="enq_query" class="form-control" rows="4" cols="50" placeholder="Your Query"></textarea>  
                    <div id="enq_query_error" style="color:red;"></div>
                  </div> 
                  <div class="form-group">
                    <button class="btn btn-lg btn-primary btn-block" type="button" id="btn-enquiry-submit">Order Now</button>
                    <!--<div class="message-log"></div>-->
                  </div>
          </div><?php */?>
          <div class="modal-body">
            <div class="text-center pop-number" style="font-family: Raleway, Arial, Helvetica, sans-serif;
    font-size: 19px;
    font-weight: 600;
    display: block;
    line-height: 62px;
    min-height: 62px;
    text-transform: uppercase;
    position: relative;
    -webkit-transition: all .4s ease-out;
    color: #303030;">Call for Price / Whatsapp : <span>+971 55 3263 444</span></div>
          </div>              
        </div>    
        </form>        
      </div>
    </div>

Answer 1

只需将您的模型代码（从具有 id "orderModal" 的 div 元素）添加到 wp_footer 挂钩。

您可以使用 is_product() 函数检查产品页面。