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

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

Тема в разделе "Темы для WooCommerce", создана пользователем D&B, 17 фев 2014.

  1. D&B

    D&B Администратор Команда форума Местный

    Сообщения:
    3.260
    Симпатии:
    721
    Баллы:
    113
    В большинстве случаев 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 темы, которые работают сразу после установки, являясь беспроблемным бесплатным решением.

    Оригинал для перевода взят отсюда.
     
    • Нравится Нравится x 1
  2. Юрий Николаевич

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

    Сообщения:
    145
    Симпатии:
    3
    Баллы:
    18
    День добрый! Взял тему не интегрированную , но вроде воспринимает 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(); ?>
    ПОЖАЛУЙСТА!!!!!
     
  3. Юрий Николаевич

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

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

     
  4. searchingman

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    552
    Баллы:
    113
    Как отключить стили 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 );
    }
     
    • Нравится Нравится x 1
  5. Юрий Николаевич

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

    Сообщения:
    145
    Симпатии:
    3
    Баллы:
    18
     
  6. Юрий Николаевич

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

    Сообщения:
    145
    Симпатии:
    3
    Баллы:
    18
    День добрый! Подскажите пожалуйста. Встречал , что
    remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
    remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10); -надо оборачивать в функцию , так не сработает. Или тут получится
     
  7. searchingman

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    552
    Баллы:
    113
    Что в Вашем понимании означает "оборачивать функцию" ?
    Выше приведенный код убирает стандартные "врапперы", чтобы затем подключить из своей темы?
     
  8. rikitiki

    rikitiki Местный

    Сообщения:
    749
    Симпатии:
    184
    Баллы:
    43
    Для пояснения.
    Допустим вы установили тему и увидели что она несовместима ( к примеру сайдбар ушёл вниз и т.п.)
    Что делаем? Вставляем в конце 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>';
    }
     
    Последнее редактирование: 18 июл 2015
    • Нравится Нравится x 1
  9. Юрий Николаевич

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

    Сообщения:
    145
    Симпатии:
    3
    Баллы:
    18
    Спасибо !!!!!!!!!!!! Завтра испытаю. И еще раз спасибо, что отозвались