Создания “Шапки” на странице “Каталог” в Wordpress

397

26 ноября 2016, 18:42

Всем доброго времени суток.Подскажите в каком файле нужно добавить блок(div). Чтобы обернуть 3 элемента(заголовк,параграф и форму) на главной странице.Нужно сделать белый фон.На скриншоте я выделил его черным цветом. Сейчас код состоит так

<div id="main" class="col-left"> 
<h1 class="page-title">Каталог</h1>
<div class="woof_products_top_panel" style="display: none;"></div>
<p class="woocommerce-result-count">Отображаются все 4 результата</p>
<form class="woocommerce-ordering" method="get">
<select name="orderby" class="orderby">
<option value="menu_order" selected="selected">Исходная сортировка</option>
<option value="popularity">По популярности</option>
<option value="date">По новизне</option>
<option value="price">Цены: по возрастанию</option>
<option value="price-desc">Цены: по убыванию</option>
</select>
</form>
<ul class="products"> </ul>
</div>

Заранее благодарю за ответы

Answer 1

Для начала в директории вашей темы "Mystile" создайте директории \wp-content\themes\mystile\woocommerce\loop\

копируем шаблон archive-product.php из \wp-content\plugins\woocommerce\templates\ в \wp-content\themes\mystile\woocommerce\
копируем шаблон orderby.php из \wp-content\plugins\woocommerce\templates\loop\ в \wp-content\themes\mystile\woocommerce\loop\

Теперь редактируем созданные нами файлы:

archive-product.php

перед:

    <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
     <h1 class="page-title"><?php woocommerce_page_title(); ?></h1>
    <?php endif; ?>

открываем наш <div class="page-title-wrap">

    <!-- Start Page Title Wrap-->
    <div class="page-title-wrap">
     <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
      <h1 class="page-title"><?php woocommerce_page_title(); ?></h1>
     <?php endif; ?>

orderby.php

после:

     <form class="woocommerce-ordering" method="get">
      <select name="orderby" class="orderby">
       <?php foreach ( $catalog_orderby_options as $id => $name ) : ?>
        <option value="<?php echo esc_attr( $id ); ?>" <?php selected( $orderby, $id ); ?>><?php echo esc_html( $name ); ?></option>
      <?php endforeach; ?>
     </select>
     <?php
      // Keep query string vars intact
      foreach ( $_GET as $key => $val ) {
       if ( 'orderby' === $key || 'submit' === $key ) {
        continue;
       }
       if ( is_array( $val ) ) {
        foreach( $val as $innerVal ) {
         echo '<input type="hidden" name="' . esc_attr( $key ) . '[]" value="' . esc_attr( $innerVal ) . '" />';
        }
       } else {
        echo '<input type="hidden" name="' . esc_attr( $key ) . '" value="' . esc_attr( $val ) . '" />';
       }
      }
     ?>
     </form>

закрываем наш </div>

     <form class="woocommerce-ordering" method="get">
      <select name="orderby" class="orderby">
       <?php foreach ( $catalog_orderby_options as $id => $name ) : ?>
        <option value="<?php echo esc_attr( $id ); ?>" <?php selected( $orderby, $id ); ?>><?php echo esc_html( $name ); ?></option>
      <?php endforeach; ?>
     </select>
     <?php
      // Keep query string vars intact
      foreach ( $_GET as $key => $val ) {
       if ( 'orderby' === $key || 'submit' === $key ) {
        continue;
       }
       if ( is_array( $val ) ) {
        foreach( $val as $innerVal ) {
         echo '<input type="hidden" name="' . esc_attr( $key ) . '[]" value="' . esc_attr( $innerVal ) . '" />';
        }
       } else {
        echo '<input type="hidden" name="' . esc_attr( $key ) . '" value="' . esc_attr( $val ) . '" />';
       }
      }
     ?>
     </form>
    </div><!-- End Page Title Wrap-->

Таким образом после обновления плагина Woocommerce ваши изменения останутся

Answer 2

У вас установлена тема mystile от WooCommerce.

Код вывода div id="main" находится в файле \wp-content\themes\mystile\includes\theme-woocommerce.php В этом файле после <div id="main" class="col-left"> добавьте <div id="my_header">

В файле \wp-content\plugins\woocommerce\templates\loop\orderby.php перед </div>