• Никакой политики на форуме. Иначе - бан!
  • Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы или капсом удаляются без предупреждения!

Важно! Настройка сторонних тем для работы с WooCommerce

D&B

D&B

Администратор
Команда форума
Местный
В большинстве случаев WooCommerce прекрасно интегрируется с подавляющим большинством WordPress тем. Проблемы начинаются тогда, когда дефолтные WooCommerce контейнеры, содержащие контент, не соответствуют выбранной теме. В результате этого появляются нарушения в шаблоне WooCommerce страниц, проявляющиеся в виде смещения сайдбара в неправильное место.

Это проблема может повлиять на главную страницу магазина, страницы товаров и страницы таксономии (категории и теги), потому что WooCommerce использует собственные шаблоны для отображения этих страниц (и невозможно сделать так, чтоб WooCommerce распознавал разметку, которую использует ваша тема). Другие «страницы» (оформление заказа, корзина, профиль) не подвергаются изменениям, так как они используют шаблон страницы выбранной темы page.php.

Существуют два способа решения проблемы: использовать «крючки» (для продвинутых пользователей и разработчиков) или использовать нашу функцию перенаправления woocommerce_content() в вашей теме.

Использование woocommerce_content()

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

Хоть, данное решение с перенаправлением и довольно простое, оно все же имеет недостаток, который заключается в том, что этот шаблон будет использован для всех WC таксономий (категорий товаров) и типов записей (архивы товаров, страницы товаров).

Разработчикам рекомендуется использовать вместо этого метода Hooks «крючки»

Чтоб создать такую страницу шаблона нужно проделать следующие шаги:

Дупликация page.php

Продублируйте файл вашей темы page.php и назовите его woocommerce.php. Вот примерный путь до этого файла: wp-content/themes/YOURTHEME/woocommerce.php.

Редактирование страницы woocommerce.php

Откройте ваш свежесозданный файл woocommerce.php в текстовом редакторе (или в любом другом редакторе на ваш выбор).

Замена цикла

Следующее, что вам нужно сделать, это найти этот цикл. Цикл обычно начинается с :

Код: 
<?php if ( have_posts() ) :

…и кончается так :

Код: 
<?php endif; ?>

Но его вид может варьироваться в зависимости от темы. Как найдете его, смело удаляйте, а на его место вставьте:

Код: 
<?php woocommerce_content(); ?>

Благодаря этой процедуре вместо старого цикла будет использоваться WooCommerce цикл. Сохраните файл. Все готово!

Использование Hooks

Метод с использование «крючка» сложнее, чем метод с использованием функции woocommerce_content, но он более гибкий. Мы также используем этот метод для гладкой интеграции с темами Twenty Ten и Twenty Eleven. Вставив нескольких строк в файл вашей темы functions.php, прежде всего, «отцепите» WooCommerce контейнеры.

Код: 
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

Затем» прицепите» ваши собственные функции для отображения контейнеров, которые использует ваша тема.

Код: 
add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
  echo '<section id="main">';
}

function my_theme_wrapper_end() {
  echo '</section>';
}

Убедитесь в том, что эта разметка соответствует разметке вашей темы. Если вы не уверены, какие классы или ID нужно использовать, взгляните на файл page.php вашей темы.

Скрываем сообщение от WooCommerce

Как только вы порадовались тому, что ваша тема полностью поддерживает WooCommerce, вы должны «сообщить» об этом коду, чтоб скрыть сообщение «Ваша тема не поддерживается WooCommerce». Чтоб это сделать вы должны добавить следующий код в файл вашей темы functions.php.

Код: 
add_theme_support( 'woocommerce' );

Если все это не сработало

Если не один из указанных методов не сработал, и у вас нет возможности обратиться к специалисту, рекомендуется обратить внимание на WooCommerce темы, которые работают сразу после установки, являясь беспроблемным бесплатным решением.

Оригинал для перевода взят отсюда.
 
  • Like
Реакции: teha
Ю

Юрий Николаевич

Опытный
День добрый! Взял тему не интегрированную , но вроде воспринимает woocommerce Но все подскажите


get_header();

if ($mantra_frontpage=="Enable" && is_front_page() ) {

mantra_frontpage_generator();

}

else {

?>

<section id="container">



<div id="content" role="main">

<?php cryout_before_content_hook(); ?>


<?php get_template_part( 'content', 'page'); ?>


<?php cryout_after_content_hook(); ?>

</div><!-- #content -->

<?php get_sidebar(); ?>

</section><!-- #container -->



<?php } // else

get_footer(); ?>


Куда вставить
<?php woocommerce_content(); ?>
ПОЖАЛУЙСТА!!!!!
 
Ю

Юрий Николаевич

Опытный
День добрый! Подскажите тема twenty ten может использовать
loop-page.php, а не
page.php. Ибо в
loop-page.php есть <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
 
S

searchingman

Гуру
Местный
Как отключить стили WooCommerce и подключать из своей темы?

WooCommerce имеет 3 файла стилей по умолчанию. Вы можете отключить их следующим кодом.
PHP: 
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
Эта рекомендация подходит, если Вы разрабатываете свою тему.
Подобный способ избавит Вас от проблем при обновлении плагина WooCommerce.

Если Вы хотите отключить конкретные стили можно воспользоваться кодом.
PHP: 
// удалить конкретные файлы стилей

add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_dequeue_styles( $enqueue_styles ) {
        // \wp-content\plugins\woocommerce\assets\css\woocommerce.css
        // основные стили плагина  
        unset( $enqueue_styles['woocommerce-general'] );    // удалить the gloss
    // \wp-content\plugins\woocommerce\assets\css\woocommerce-layout.css
        // разметка дизайна по умолчанию
        unset( $enqueue_styles['woocommerce-layout'] );        // удалить layout
        // \wp-content\plugins\woocommerce\assets\css\woocommerce-smallscreen.css
        // оптимизация разметки при просмотре на мобильных устройствах
    unset( $enqueue_styles['woocommerce-smallscreen'] );    // удалить the smallscreen optimisation
    return $enqueue_styles;
}

Для подключения своего файла стилей используйте код
PHP: 
function wp_enqueue_woocommerce_style(){
    wp_register_style( 'mytheme-woocommerce', get_template_directory_uri() . '/css/woocommerce.css' );
    if ( class_exists( 'woocommerce' ) ) {
        wp_enqueue_style( 'mytheme-woocommerce' );
    }
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' );

Как удаляются стили WooCommerce и подключаются свои стили в теме StoreFront?
PHP: 
// подключаем свои стили
add_action( 'wp_enqueue_scripts', 'storefront_woocommerce_scripts',20 );
// удаляем стили WooCommerce по умолчанию
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
function storefront_woocommerce_scripts() {
    global $storefront_version;
    wp_enqueue_style( 'storefront-woocommerce-style', get_template_directory_uri() . '/inc/woocommerce/css/woocommerce.css', $storefront_version );
}
 
  • Like
Реакции: D&B
Ю

Юрий Николаевич

Опытный
D&B написал(а):
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10); remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
Нажмите для раскрытия...
D&B написал(а):
В большинстве случаев WooCommerce прекрасно интегрируется с подавляющим большинством WordPress тем. Проблемы начинаются тогда, когда дефолтные WooCommerce контейнеры, содержащие контент, не соответствуют выбранной теме. В результате этого появляются нарушения в шаблоне WooCommerce страниц, проявляющиеся в виде смещения сайдбара в неправильное место.

Это проблема может повлиять на главную страницу магазина, страницы товаров и страницы таксономии (категории и теги), потому что WooCommerce использует собственные шаблоны для отображения этих страниц (и невозможно сделать так, чтоб WooCommerce распознавал разметку, которую использует ваша тема). Другие «страницы» (оформление заказа, корзина, профиль) не подвергаются изменениям, так как они используют шаблон страницы выбранной темы page.php.

Существуют два способа решения проблемы: использовать «крючки» (для продвинутых пользователей и разработчиков) или использовать нашу функцию перенаправления woocommerce_content() в вашей теме.

Использование woocommerce_content()

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

Хоть, данное решение с перенаправлением и довольно простое, оно все же имеет недостаток, который заключается в том, что этот шаблон будет использован для всех WC таксономий (категорий товаров) и типов записей (архивы товаров, страницы товаров).

Разработчикам рекомендуется использовать вместо этого метода Hooks «крючки»

Чтоб создать такую страницу шаблона нужно проделать следующие шаги:

Дупликация page.php

Продублируйте файл вашей темы page.php и назовите его woocommerce.php. Вот примерный путь до этого файла: wp-content/themes/YOURTHEME/woocommerce.php.

Редактирование страницы woocommerce.php

Откройте ваш свежесозданный файл woocommerce.php в текстовом редакторе (или в любом другом редакторе на ваш выбор).

Замена цикла

Следующее, что вам нужно сделать, это найти этот цикл. Цикл обычно начинается с :

Код: 
<?php if ( have_posts() ) :

…и кончается так :

Код: 
<?php endif; ?>

Но его вид может варьироваться в зависимости от темы. Как найдете его, смело удаляйте, а на его место вставьте:

Код: 
<?php woocommerce_content(); ?>

Благодаря этой процедуре вместо старого цикла будет использоваться WooCommerce цикл. Сохраните файл. Все готово!

Использование Hooks

Метод с использование «крючка» сложнее, чем метод с использованием функции woocommerce_content, но он более гибкий. Мы также используем этот метод для гладкой интеграции с темами Twenty Ten и Twenty Eleven. Вставив нескольких строк в файл вашей темы functions.php, прежде всего, «отцепите» WooCommerce контейнеры.

Код: 
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

Затем» прицепите» ваши собственные функции для отображения контейнеров, которые использует ваша тема.

Код: 
add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
  echo '<section id="main">';
}

function my_theme_wrapper_end() {
  echo '</section>';
}

Убедитесь в том, что эта разметка соответствует разметке вашей темы. Если вы не уверены, какие классы или ID нужно использовать, взгляните на файл page.php вашей темы.

Скрываем сообщение от WooCommerce

Как только вы порадовались тому, что ваша тема полностью поддерживает WooCommerce, вы должны «сообщить» об этом коду, чтоб скрыть сообщение «Ваша тема не поддерживается WooCommerce». Чтоб это сделать вы должны добавить следующий код в файл вашей темы functions.php.

Код: 
add_theme_support( 'woocommerce' );

Если все это не сработало

Если не один из указанных методов не сработал, и у вас нет возможности обратиться к специалисту, рекомендуется обратить внимание на WooCommerce темы, которые работают сразу после установки, являясь беспроблемным бесплатным решением.

Оригинал для перевода взят отсюда.
Нажмите для раскрытия...
 
Ю

Юрий Николаевич

Опытный
День добрый! Подскажите пожалуйста. Встречал , что
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10); -надо оборачивать в функцию , так не сработает. Или тут получится
 
S

searchingman

Гуру
Местный
Юрий Николаевич написал(а):
День добрый! Подскажите пожалуйста. Встречал , что
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10); -надо оборачивать в функцию , так не сработает. Или тут получится
Нажмите для раскрытия...
Что в Вашем понимании означает "оборачивать функцию" ?
Выше приведенный код убирает стандартные "врапперы", чтобы затем подключить из своей темы?
 
rikitiki

rikitiki

Специалист
Местный
D&B написал(а):
Затем» прицепите» ваши собственные функции для отображения контейнеров, которые использует ваша тема.

add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
echo '<section id="main">';
}

function my_theme_wrapper_end() {
echo '</section>';
}
Убедитесь в том, что эта разметка соответствует разметке вашей темы. Если вы не уверены, какие классы или ID нужно использовать, взгляните на файл page.php вашей темы.
Нажмите для раскрытия...

Для пояснения.
Допустим вы установили тему и увидели что она несовместима ( к примеру сайдбар ушёл вниз и т.п.)
Что делаем? Вставляем в конце functions.php код что выше.
Затем открываем page.php и видим, например, следующий код:

<?php
get_header(); ?>

<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">

<?php while ( have_posts() ) : the_post(); ?>

<?php get_template_part( 'content', 'page' ); ?>

<?php comments_template( '', true ); ?>

<?php endwhile; // end of the loop. ?>

</div><!-- #content .site-content -->
</div><!-- #primary .content-area -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Копируем кусок кода (у меня выделен красным жирным шрифтом) и заменяем им часть кода, которая также выделена красным жирным шрифтом:

remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);


add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
echo '<section id="main">';
}

function my_theme_wrapper_end() {
echo '</section>';
}

В итоге в functions.php темы получим следующий исправленный для моего случая код:

add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
echo '<section id="primary" class="content-area">';
}

function my_theme_wrapper_end() {
echo '</section>';
}
 
Последнее редактирование:
Coolfreeze

Coolfreeze

Новичок
searchingman написал(а):
Как отключить стили WooCommerce и подключать из своей темы?

WooCommerce имеет 3 файла стилей по умолчанию. Вы можете отключить их следующим кодом.
PHP: 
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
Эта рекомендация подходит, если Вы разрабатываете свою тему.
Подобный способ избавит Вас от проблем при обновлении плагина WooCommerce.



Для подключения своего файла стилей используйте код
PHP: 
function wp_enqueue_woocommerce_style(){
    wp_register_style( 'mytheme-woocommerce', get_template_directory_uri() . '/css/woocommerce.css' );
    if ( class_exists( 'woocommerce' ) ) {
        wp_enqueue_style( 'mytheme-woocommerce' );
    }
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' );

Всем хорошего времени суток! А куда вставлять эти коды? И нужно ли прописывать в коде название своей темы?
Нажмите для раскрытия...
 
emsti

emsti

Новичок
Привет всем!

Прочел тему и не нашел решения своего вопроса.
Тема Avada 5.3 с интеграцией WooCommerce (поставляется вместе с этим плагином). WordPress 4.9.1. WooCommerce 3.5.2.
Кроме стандартного редактора WordPress тема имеет свой визуальный конструктор, позволяющий настраивать шаблон любой (не WooCommerce) страницы на свое усмотрение и добавлять/изменять/удалять в нее любые доступные элементы.
Такой возможности нет у стандартных шаблонов WooCommerce, за исключением стандартных настроек самого WooCommerce и настроек дополнительных плагинов к нему.
Вывод на сайте стандартных шаблонов WooCommerce не устраивает как раз из-за отстутствия этой самой возможности (кроме сайдбаров) - добавить/изменить/удалить дополнительные элементы страницы (например, текстовое поле или виджет на всю ширину страницы) над/под шаблоном.
Вставка в отдельную страницу шорткода с выводом шаблона (например, товаров какой-то категории) тоже не подходит, так как не выводятся некоторые элементы шаблона (сортировка товара по каким-либо признакам, пагинация и прочее).

Как интегрировать шаблоны WooCommerce в страницы темы для WordPress так, чтобы их можно было редактировать в конструкторе темы?
 
Последнее редактирование:
tuxfighter

tuxfighter

Гуру
Местный
переписать шаблоны на свой вкус, в соответствии с требованиями темы
 
emsti

emsti

Новичок
tuxfighter написал(а):
переписать шаблоны на свой вкус, в соответствии с требованиями темы
Нажмите для раскрытия...
Сомневаюсь, что понял этот ответ.
Что подразумевается под "требованиями темы"? Не системные же требования имелись в виду... Но какие другие требования предъявляют темы для своих пользователей?
 
Последнее редактирование:
tuxfighter

tuxfighter

Гуру
Местный
чтобы все шаблоны могли взаимодействовать с вашим визуальным конструктором
 
emsti

emsti

Новичок
tuxfighter написал(а):
чтобы все шаблоны могли взаимодействовать с вашим визуальным конструктором
Нажмите для раскрытия...
Вот этого я как раз и пытаюсь добиться. Пока безрезультатно. Потому и спрашиваю "Как интегрировать шаблоны WooCommerce в страницы темы для WordPress так, чтобы их можно было редактировать в конструкторе темы?".
 
marr

marr

Специалист
Местный
AnaitAstrit написал(а):
После обновления вукомерса...
Нажмите для раскрытия...
Надеюсь, до обновления вы сделали бекап? Если тема не поддерживает последний релиз, но нормально работала на предыдущем, то зачем было трогать. Откатить все обратно и не обновлять.
 
A

AlexInfo

Новичок
Всем доброго времени суток. Делаю на WordPress сайт для зоомагазина (продажа сухого корма), нашел отличную бесплатную тему pettie. Все устраивает, кроме одного очень существенного бага - когда настраиваешь на странице магазина через меню настройка-woocommece-каталог товаров выводить на странице категории, не выводится ничего, когда ставишь категории и товары, все товары выводятся в беспорядке и без категорий. При этом в другой теме, storefront, все работает, только настроек у нее мало. Подскажите, пожалуйста, если кто сталкивался, где можно устранить этот баг? Пробовал обновлять устаревшие шаблоны, как написано на сайте woocommerce, еще хуже стало.
Ссылка на сайт: http://alex109t.beget.tech (если не будет открываться, скопировать и вставить в адресную строку браузера, т.к. служебный адрес).
 
A

AlexInfo

Новичок
А я и не говорю, что взял ее из официального каталога. Там вообще ничего похожего нет. Нашел в Интернете, долго искал. К сайту подходит по всем статьям. Только вот баг обидный с отображением каталога. А я, к сожалению, не программист и не дизайнер. Лишних ресурсов на наем спецов нет. Если кто сможет подсказать, где и что надо поправить, буду благодарен. К тому же мы тут рассматриваем сторонние темы для Wordpress или я что-то неправильно понял?
 
tuxfighter

tuxfighter

Гуру
Местный
AlexInfo написал(а):
К тому же мы тут рассматриваем сторонние темы для Wordpress или я что-то неправильно понял?
Нажмите для раскрытия...
да, вы совершенно не правильно поняли.
Здесь рассматривается вопрос как подружить WOO и официальные темы, которые не имеют такой поддержки (не поддерживают WOO).
А с тем, что вы где-то откопали, неизвестно кем сделанная и с неизвестным кол-вом вирусов, никто разбираться не будет.
Можете попробовать сделать это самостоятельно по приведенной инструкции или обратится к авторам этой теме, да и то я сильно сомневаюсь в успехе.
 
Войдите или зарегистрируйтесь для ответа.
Сверху Снизу