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

Опубликовано: 2021-04-15

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

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

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

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

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

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

В этом посте мы поделимся некоторыми решениями для программного редактирования страницы продукта.

Во-первых, давайте посмотрим на макет страницы продукта по умолчанию.

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

Вот как отображается страница продукта: макет страницы

Есть 2 основных файла WooCommerce, отвечающих за вывод страницы продукта.

single-product.php: создает необходимый шаблон для текущего макета.
content-single-product.php: этот файл печатает содержимое шаблона

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

Давайте рассмотрим несколько практических примеров того, как вы можете настроить страницу продукта.

Редактируйте страницу продукта WooCommerce с помощью хуков

В этом разделе мы будем использовать хуки для настройки страницы продукта.

1. Удалить элементы

Есть несколько хуков для удаления разных элементов на странице товаров. Крючки работают с определенными элементами.

Это означает, что вы должны использовать правильный хук, функцию и значение приоритета.

Вот несколько скриптов для удаления различных элементов и настройки страницы продукта. Скопируйте и вставьте его в файл functions.php:

// remove title

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );

// remove  rating  stars

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );

// remove product meta

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );

// remove  description

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );

// remove images

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

// remove related products

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

// remove additional information tabs

remove_action('woocommerce_after_single_product_summary ','woocommerce_output_product_data_tabs',10);

2.Добавить новые элементы

Вы можете добавить новый контент на страницу продукта, создав собственную функцию. Вы должны скопировать и вставить его в файл functions.php:

 

add_action('woocommerce_after_single_product_summary','njengah_callback_function'); 

function njengah_callback_function(){    
    printf('     
    <h1> Hey there !</h1>  
   <div><h5>Welcome to my custom product page</h5>      
   </div>'); 
}

Это результат: добавить элемент

3. Редактировать вкладки продуктов

Вы можете использовать хук фильтра woocommerce_product_tabs для удаления, добавления, изменения порядка или добавления новой вкладки в разделе «Дополнительная информация».

Вот пример скрипта, который удалит вкладку «Описание» и ее содержимое, переименует вкладку «Отзывы» и поменяет приоритет «Дополнительной информации» на первое место. Вы должны скопировать и вставить его в файл functions.php:

add_filter( 'woocommerce_product_tabs', 'njengah_remove_product_tabs', 98 );

function njengah_remove_product_tabs( $tabs ) {

    unset( $tabs['description'] );           // Remove the Description tab

    $tabs['reviews']['title'] = __( 'Ratings' );     // Rename the Reviews tab

    $tabs['additional_information']['priority'] = 5;       // Additional information at first

    return $tabs;

}

Это результат: редактировать вкладки товаров

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

 

add_filter( 'woocommerce_product_tabs', 'njengah_new_product_tab' );

function njengah_new_product_tab( $tabs ) {         

            // Adds the new tab   

            $tabs['test_tab'] = array(

                        'title'    => __( 'New Tab Here!', 'woocommerce' ),

                        'priority'  => 50,

                        'callback'  => 'njengah_new_product_tab_content'

            );

            return $tabs;

}

function njengah_new_product_tab_content() {

            echo '<h2>New Tab Here!</h2><p>Here\'s your new product tab content</p>.';

}

Это результат: новая вкладка

Настройте страницу продукта, переопределяя файлы шаблонов WooCommerce

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

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

Этот процесс аналогичен переопределению любого другого файла в вашей дочерней теме.

Мы рекомендуем создать дочернюю тему или плагин для внесения изменений.

1. Отредактируйте метаинформацию

В этом разделе мы будем редактировать метаинформацию. Это означает, что у нас есть файл шаблона, отвечающий за печать соответствующих данных. Это файл meta.php.

Этот файл находится в плагине WooCommerce по следующему пути: woocommerce/templates/single-product/meta.php.

Следующий шаг — отредактировать каталог файлов дочерней темы и создать папку WooCommerce.

Создайте внутри нее еще одну папку с именем single-product и вставьте в нее файл meta.php: Child_theme/woocommerce/single-product/meta.php

Это позволит вам отредактировать файл meta.php и увидеть ваши изменения во внешнем интерфейсе.

Следующий образец файла meta.php будет:

Изменить метку SKU на ID
Измените теги на Опубликовано под
Удалить ярлык категории

global $product;
?>

<div class="product_meta">

            <?php do_action( 'woocommerce_product_meta_start' ); ?>

            <?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>

                        <span class="sku_wrapper"><?php esc_html_e( 'ID:', 'woocommerce' ); ?>

                                    <span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?>

                                    </span>

                        </span>

            <?php endif; ?>

            <?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( '', '', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>

            <?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Published under:', 'Published under:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>

            <?php do_action( 'woocommerce_product_meta_end' ); ?>

</div>

Это результат: изменить мета-описание

2. Настройте страницу продукта с помощью CSS-скрипта

Вы можете легко редактировать страницу продукта WooCommerce программно, используя код CSS.

Это поможет вам оформить страницу продукта и придать ей внешний вид вашего бизнеса.

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

Поместите файл в основную папку дочерней темы на том же уровне, что и файлы functions.php и style.css.

Вставьте следующий скрипт в файл functions.php вашей дочерней темы и при необходимости замените имя файла CSS.

add_action( 'wp_enqueue_scripts', 'njengah_custom_product_style' );

function njengah_custom_product_style() {

if ( is_product() ){

wp_register_style( 'product_css', get_stylesheet_directory_uri() . '/single-product.css', false, '1.0.0', 'all' );

wp_enqueue_style('product_css');

}

}

Условие if(is_product()) проверяет, является ли текущая страница страницей продукта. Это предотвращает ненужную загрузку файла CSS, если это не страница продукта.

К настоящему времени вы должны иметь возможность редактировать стиль страниц продукта с помощью пользовательских правил CSS.

Вывод

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

Вы также можете проверить, что делают интернет-магазины, такие как Amazon и Walmart. Вы можете имитировать их внешний вид, включая общие черты.

Если вам нужна помощь в настройке этой страницы, обратитесь к квалифицированному разработчику WordPress.