WordPress Plugin Conflict with WooCommerce Product Page

Question

Our plugin displays a red signup bar across the entire site. On the Woo Commerce pages only, the signup bar is going into the Product Description Container as shown here:

---

This is what it should be doing, consistent with the rest of the site:

---

Here is a code extract from the plugin:

---

/*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.

---

A ticket was submitted to both Themeforest and WooCommerce however I am not optimistic about receiving a fix from either since it is our plugin.

Any help would be greatly appreciated! Thank you.

Answer 1

Rather than filtering the_content why not use wp_footer to ensure your signup bar is at the bottom of the page. WooCommerce loads custom content wrapper header and footers which may be affecting your layout.

Another option is to additionally load your plugin at the bottom of a woocommerce page using the hook woocommerce_after_main_content

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

Answer 2

I have never worked with WooCommerce, but from what I can tell your signup bar comes directly after the content. It looks like the bar gets attached to the content, which for WooCommerce seems to be the product itself.

Maybe you want to instead hook the signup bar to the action before the contact us section instead. Hope that makes sense!