WordPress插件与WooCommerce产品页面冲突

Question

我们的插件在整个网站上显示一个红色注册栏。仅在Woo Commerce页面上，注册栏将进入产品描述容器，如下所示：

这应该是它应该做的，与网站的其余部分一致：

以下是插件的代码摘录：

/*Style sheet for the Signup Plugin
Teresa Light August 16, 2015
Version 1.0
*/

#main.clearfix.width-100{
    padding-right:0px!important;
    padding-left:0px!important;
}

/* Overall Container */
signup  {
  margin: auto;
  padding: auto 0px!important;
  font-size:80%;
  background: #d03925;
  text-align: center;  
  display: flex;  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  display: -webkit-flex; /* NEW - Chrome */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
/* Begin Flex */
.flex-container {
  text-align: center;  
  display: flex;  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  display: -webkit-flex; /* NEW - Chrome */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}

/* MOBIL FIRST */
.flex-container{
   flex-direction: column;
   -webkit-box-flex-direction: column;
  -moz-box-flex-direction: column;
  -webkit-flex-direction: column;
  margin:0 0 5px 0;
  padding:15px;
}

/* DESKTOPS - go to a row for screens greater than 1000px */ 
@media screen and (min-width: 1024px) {
  .flex-container{
   flex-direction: row;
   -webkit-box-flex-direction: row;
  -moz-box-flex-direction: row;
  -webkit-flex-direction: row;
  margin:0 10px;
  padding:10px 0;
  }
}
/* End  Flex */

h3.signup-message, .signup-message{
  margin: auto;
  padding:0;
  color: #ffffff !important;
  font-family: 'lato', sans-serif;
  font-weight: 500; 
  text-align:right;
  font-size:20px;
  line-height:30px;
}

#inf_field_FirstName, #inf_field_Email {
  border: 1px solid #d2d2d2;
  font-size: 15px;
  font-family: 'lato', sans-serif;
  color: #747474;
  padding: 15px 5px;
  width: 270px;
}

.ccg-button {
    border-width: 2px;
    border-style: solid;
    border-color:#ffffff;
    background: #d03925;
    color: #fff;
    font-family: 'lato', sans-serif;
    font-weight: 700;
    line-height: 20px;
    font-size:15px;
    cursor: pointer;
    padding: 13px 30px 13px 30px;
}
.ccg-button:hover, .ccg-button:focus, .ccg-button:active{
    border-width:2px;
    border-style: solid;
    border-color:#d03925;
    color:#d03925;
    background: #ffffff;
}

<?php 
/*
Plugin Name: ccg-signup
Description:  Adds an eye-catching signup bar to the bottom of the page
Author: Teresa Light
Author URI: https://teresalight.com
Plugin URI: 
Version: 1.0
License: 
*/

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

// Register style sheet.
    add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );

/**
 * Register style sheet.
 */

  function register_plugin_styles() {
    wp_register_style( 'ccg-signup', plugins_url( 'ccg-signup/css/signup-bar.css' ) );
    wp_enqueue_style( 'ccg-signup' );
    }

    add_filter( 'the_content', 'signup_bar' );

    function signup_bar($content){

$content.='';
$content.='
	<signup>
			<form>

		 		<div class="flex-container">
		 			<h3 class="signup-message">Get tips to start, fund and grow Your Great Business:</h3>
		 		</div> 

		 		<div class="flex-container">
		 			<input id="inf_field_FirstName"  name="inf_field_FirstName" type="text" placeholder="First Name*">
		 		</div>

				<div class="flex-container">
					<input style="margin:10px 0;"id="inf_field_Email" name="inf_field_Email" type="text" placeholder="Email*">
				</div>

				<div class="flex-container">
					<input class="input.flex-container ccg-button" type="submit" value="START NOW">
				</div>
			</form>
	</signup>';
$content.='';
return $content;
    }

// Omit closing PHP tag to avoid "Headers already sent" issues.

门票已经提交给了Themeforest和WooCommerce，但是我不乐意接受修复，因为它是我们的插件。

任何帮助将不胜感激！谢谢。

Answer 1

我从未使用过WooCommerce，但是我可以告诉你的注册栏直接在内容之后。看起来条形图附加到内容上，这对于WooCommerce来说似乎就是产品本身。

也许您想在联系我们之前将注册栏挂钩到操作部分。希望有意义！

Answer 2

不要过滤the_content，而是使用wp_footer来确保您的注册栏位于页面底部。 WooCommerce加载可能影响您的布局的自定义内容包装器页眉和页脚。

另一种选择是使用hook woocommerce_after_main_content

在woocommerce页面底部另外加载插件

http://docs.woothemes.com/document/third-party-custom-theme-compatibility/