Статьи

Как настроить страницы продукта WooCommerce

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

Теперь, когда магазин открыт, следующая проблема — беспорядок на страницах продукта. На странице WooCommerce Single Product есть много элементов, которые не помогают напрямую настраивать и настраивать магазин. Двумя распространенными виновниками являются категории продуктов и звездные рейтинги. Не каждому магазину нужны эти два элемента на странице «Единый продукт». Точно так же другие элементы также должны быть перемещены, чтобы соответствовать индивидуальному дизайну магазина.

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

Настройте страницы продукта WooCommerce

Первое, что вы можете сделать, это отобразить продукты в шаблоне, отличном от стандартного. Файл single-product.php

Обычная практика при настройке страниц шаблонов родительских тем и плагинов, которая часто рекомендуется, — это сделать копию шаблона в теме. Теперь внесите все изменения только в копию. Таким образом, если темы и плагины будут обновлены, ваши пользовательские изменения останутся без изменений.

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

Я буду использовать single-product.php Аналогично, content-single-product.php
Теперь откройте single_template

 function get_custom_post_type_template($single_template) {
 global $post;

 if ($post->post_type == 'product') {
      $single_template = dirname( __FILE__ ) . '/single-template.php';
 }
 return $single_template;
}
add_filter( 'single_template', 'get_custom_post_type_template' );

as well as following code include in template _include
add_filter( 'template_include', 'portfolio_page_template', 99 );

function portfolio_page_template( $template ) {

    if ( is_page( 'slug' )  ) {
        $new_template = locate_template( array( 'single-template.php' ) );
        if ( '' != $new_template ) {
            return $new_template ;
        }
    }

    return $template;
}

Создать пользовательский продукт / категорию WooCommerce

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

Настроить файлы шаблонов WooCommerce

Теперь помните, что при работе с файлом content-single-product.php Другая хорошая практика — дать ему имя, которое выделяет его и легко идентифицировать. Например, если у вас есть категория с именем «Книги», измените имя файла на content-single-product-books.php Это простое изменение позволит вам сразу определить правильный файл для определенной категории. Этот файл используется для внесения всевозможных изменений (добавление или удаление боковой панели, изменения в цикле и т. Д.), Чтобы убедиться, что страница продукта или категории продукта выглядит именно так, как вы хотите.

Следующий заказ — изменения в файле single-product.php. Этот файл содержит цикл, который решает, какие шаблоны будут загружены для отображения продуктов.

Я добавлю условие if, которое проверяет, относится ли продукт к определенной категории, а затем загружу связанный single-product.php Теперь нет необходимости переименовывать файл. Чтобы добавить к нему код, откройте файл и найдите следующий фрагмент кода:

 woocommerce_get_template_part( 'content', 'single-product' );

Вы хотите заменить его следующим кодом

 
global $post;
$terms = wp_get_post_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ) $categories[] = $term->slug;

if ( in_array( 'YOURCATEGORY', $categories ) ) {
    woocommerce_get_template_part( 'content', 'single-product-YOURCATEGORY' );
} else {
    woocommerce_get_template_part( 'content', 'single-product' );
}

В коде найдите YOURCATEGORY Кроме того, вам нужно будет заменить content-single-product.php новым именем файла. Используя приведенный выше пример, где слаг категории был «books», а content-single-product.phpcontent-single-product-books.php На данный момент код выглядит так:

 global $post;
$terms = wp_get_post_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ) $categories[] = $term->slug;
if ( in_array( 'books', $categories ) ) {
    woocommerce_get_template_part( 'content', 'single-product-books' );
} else {
    woocommerce_get_template_part( 'content', 'single-product' );
} 

На данный момент все файлы были успешно отредактированы и / или переименованы. Следующим шагом является загрузка этих файлов в магазин WooCommerce. Чтобы убедиться, что все идет гладко, убедитесь, что в каталоге темы есть подпапка с именем /woocommerce/ Помните, что оба файла ( content-single-product.phpsingle-product.php Рекомендуется изменять элементы кода в этой папке темы, чтобы можно было предотвратить сложную отладочную ошибку при перезаписи исходных файлов WooCommerce.

Последний шаг — проверить страницы продукта и категории продукта, чтобы убедиться, что все изменения, внесенные в код пользовательского шаблона, были применены и отлично отображаются.

Вывод

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