2015-08-16 9 views
1

Наш плагин отображает красную панель регистрации на всем сайте. На только страницах Woo Commerce, бар регистрацию собирается в Описание товара контейнер, как показано здесь:WordPress Plugin Conflict с WooCommerce Страница продукта

Incorrect Position


Это то, что он должен делать, в соответствии с остальной частью сайта:

enter image description here


Вот код выписки из плагина:


/*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.=' 
 
\t <signup> 
 
\t \t \t <form> 
 

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

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

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

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

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


Билет был представлен как ThemeForest и WooCommerce однако я не оптимистичен о получении исправления от любого, так как это наш плагин.

Любая помощь была бы принята с благодарностью! Спасибо.

+0

Привет @ user2502479. Можете ли вы поделиться любыми стилями, которые могут быть прикреплены к этому компоненту. – w3bMak3r

ответ

2

Я никогда не работал с WooCommerce, но из того, что я могу сказать, ваша панель регистрации появляется сразу после содержимого. Похоже, что панель привязана к контенту, что для WooCommerce кажется самим продуктом.

Возможно, вы хотите вместо этого подключить панель регистрации к действию перед тем, как обратиться к нам. Надеюсь, это имеет смысл!

+0

Теперь я работаю над страницей Woo Commerce, но не остальной частью сайта, так что это прогресс! – user2502479

+0

Этот код работает на Woo Commerce, но не на остальной части сайта. Я считаю, что действие перед разделом «свяжитесь с нами» зависит от страницы, но я этого еще не преследовал. Это работает, но не на главных страницах (пока): Спасибо за help.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); – user2502479

+0

Спасибо! Теперь он работает хорошо, но он последний ниже нижнего колонтитула. Я не знаю, как сделать это первым, поэтому я сейчас исследую это. – user2502479

2

Вместо того, чтобы фильтровать the_content, почему бы не использовать wp_footer, чтобы ваша панель регистрации находилась в нижней части страницы. WooCommerce загружает заголовки и нижние колонтитулы пользовательского содержимого, которые могут влиять на ваш макет.

Другой вариант дополнительно загрузить плагин в нижней части страницы WooCommerce с помощью крюке woocommerce_after_main_content

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

+0

Я заменил это действие для нижнего колонтитула, и теперь он не отображается. Мне может понадобиться больше кода. Страница Woocommerce выглядит сложной, но я думаю, мне, возможно, придется пойти на это. Любая помощь со всем фрагментом кода, который я могу попробовать, будет с благодарностью. Спасибо. add_action ('wp_footer', 'signup_bar'); /* add_filter ('the_content', 'signup_bar'); */ – user2502479

+0

Теперь он работает последовательно на всех страницах, но после нижнего колонтитула теперь мне просто нужно выяснить, как получить его первым в нижнем колонтитуле. – user2502479

+0

Попытайтесь изменить приоритет, добавленный в действие. Также проверьте источник с помощью инструментов dev. Или откройте footer.php и проверьте, существует ли в этом файле шаблона более высокий уровень активности в этом файле шаблона, который можно использовать, кроме wp_footer – Anagio

Смежные вопросы