Как изменить Woocommerce с помощью дочерей темы. Часть 7

Сегодня рассмотрим самые частые поправки, которые владельцы интернет-магазинов вносят на страницы товаров. Рекомендую для начала ознакомиться с первыми частями серии статей, в особенности о том, как работают action hook и filter hook.

Удалим tab со страницы описания товара

Вот так выглядят tab на стандартной странице товара темы storefront с woocommerce

Посмотрим, как это выглядит в виде массива

В functions.php пропишем такой код

    function carolinaspa_remove_tab2($tabs2) {

        echo '<pre>';

        var_dump ($tabs2);

        echo '</pre>';}

  add_filter('woocommerce_product_tabs', 'carolinaspa_remove_tab2', 20);

Перейдем на страницу товара (или обновим уже открытую) и увидим следующее

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

Как переименовать tab на странице описания товара

/* переименовать tab на странице описания товара */

function carolinaspa_title_tab($tabs_title) {

    $tabs_title['description']['title'] = "New title";

    return $tabs_title;

    }

add_filter('woocommerce_product_tabs', 'carolinaspa_title_tab');

Изменить название «Описание»

    /* изменить название в описании*/

function carolinaspa_title_tab_content($title) {

    $title = "New title Here";

    return $title;

    }

 add_filter('woocommerce_product_description_heading', 'carolinaspa_title_tab_content');

Удалить tab со страницы описания товара

/* удалить tab со страницы описания товара */
/* function carolinaspa_remove_tab($tabs) {
unset($tabs['description']);
return $tabs;
}
add_filter('woocommerce_product_tabs', 'carolinaspa_remove_tab');

Переименовать tab на странице описания товара на имя товара

     /* переименовать tab на странице описания товара на имя товара*/

function carolinaspa_title_tab1($tabs_title1) {

    global $post;

    if($tabs_title1['description']):

    $tabs_title1['description']['title'] = $post->post_title;

    endif;

    return $tabs_title1;

    }

  add_filter('woocommerce_product_tabs', 'carolinaspa_title_tab1');

Переименовать название «Описание» в название товара

 /* переименовать название Описание в название товара */

function carolinaspa_title_tab_content1($title1) {

    global $post;

    $title1 = $post->post_title;

    return $title1;

    }

add_filter('woocommerce_product_description_heading', 'carolinaspa_title_tab_content1');

Добавить данные с помощью ACF

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

Как добавить подзаголовок в карточку товара

Создадим новую группу полей и 2 поля внутри – текстовое и файл (для видео).

Перейдем на страницу товара и заполним поля

В functions.php прописать

/*Добавить подзаголовок  в карточку товара  */

function carolinaspa_display_subtitle() {

global $post;

$subtitle = get_field('subtitle', $post->ID);

echo "<h4>" . $subtitle . "</h4>";

}

add_filter('woocommerce_single_product_summary', 'carolinaspa_display_subtitle', 6);

Как добавить видео в новый таб

/* Видео добавить в новый таб */

function carolinaspa_video_tab($tabbs) {

global $post;

$video = get_field('video', $post->ID);

if ($video):

$tabbs['video'] = array(

'title'=> 'Video',

'priority' => 5,

'callback' => 'carolinaspa_video_display'

);

endif;

return $tabbs;

}

add_filter('woocommerce_product_tabs', 'carolinaspa_video_tab', 11, 1);



function carolinaspa_video_display(){

global $post;

$video = get_field('video', $post->ID);

if ($video):

echo '<video controls>';

echo '<source src="' .$video . '">' ;

echo '</video>';

endif;

}

Добавим значки соц.сетей на страницу товара

Существует множество плагинов с помощью которых можно добавить кнопки социальных сетей на сайт. Но мне нравится сервис addthis (https://www.addthis.com).

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

Затем настроить их внешний вид

И скопировать получившийся скрипт в файл functions.php.

Не забываем, что все скрипты лучше добавлять внизу страницы. Поэтому воспользуемся хуком wp_footer.

/* соц сети */

function carolinaspa_addthis(){?>

<div class="addthis_inline_share_toolbox"></div>

<?php

}

add_action("woocommerce_before_add_to_cart_form", "carolinaspa_addthis");

function carolinaspa_addthis_script(){?>

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5e874ba28ef97acf"></script>

<?php

}

add_action("wp_footer", "carolinaspa_addthis_script");