WordPress 插件与 WooCommerce 产品页面冲突

Posted 2023-03-23

【中文标题】WordPress 插件与 WooCommerce 产品页面冲突

【英文标题】：WordPress Plugin Conflict with WooCommerce Product Page

【发布时间】：2015-11-09 10:15:29

【问题描述】：

我们的插件会在整个网站上显示一个红色的注册栏。仅在 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 提交了一张票，但我对收到两者的修复并不乐观，因为它是我们的插件。

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

【问题讨论】：

嗨@user2502479。您能否分享任何可能附加到该组件的样式

【参考方案1】：

我从未使用过 WooCommerce，但据我所知，您的注册栏直接位于内容之后。看起来该栏已附加到内容上，对于 WooCommerce 而言，这似乎是产品本身。

也许您想改为将注册栏与联系我们部分之前的操作挂钩。希望这是有道理的！

【讨论】：

我现在可以在 Woo Commerce 页面上使用它，但在网站的其他页面上却没有，所以这就是进步！

这段代码可以在 Woo Commerce 上运行，但不能在网站的其余部分上运行。我相信“联系我们”部分之前的操作因页面而异，但我还没有追求。这有效，但不适用于主页（尚未）：感谢您的帮助。remove_action('woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10); add_action('woocommerce_after_main_content', 'signup_bar', 10); add_action('wp_footer', 'signup_bar', 10);

谢谢！它现在运行良好，但它是页脚下方的最后一个。我不知道如何让它首先出现，所以我现在正在研究。

【参考方案2】：

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

另一种选择是使用钩子 woocommerce_after_main_content 在 woocommerce 页面底部额外加载您的插件

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

【讨论】：

我用这个动作代替了页脚，现在它不显示了。我可能需要更多的代码。 Woocommerce 页面看起来很复杂，但我想我可能需要去那个页面。对我可能尝试的整个代码 sn-p 的任何帮助将不胜感激。谢谢你。 add_action('wp_footer', 'signup_bar'); /* add_filter( 'the_content', 'signup_bar' );*/

它现在在所有页面上都可以正常工作，但在页脚之后，所以现在我只需要弄清楚如何让它成为页脚的第一个。

尝试更改添加操作的优先级。还可以使用开发工具检查源代码。或者打开footer.php并检查模板文件中是否存在一个actino钩子，你可以使用它而不是wp_footer

Anagio，任何关于最终解决方案的帮助都会非常受欢迎。我在这里重新发布了这个新的但相关的问题，该问题是 usinjg wp-footer 与 footer.php 文件一起引起的。我：***.com/questions/32160743/…'