Решено Добавить произвольный блок на страницу товара через functions.php

[Ollti]

Добрый день.

Подскажите пожалуйста, как добавить произвольный блок, например div на страницу товара.
Требуется добавить социальные кнопки под кратким описанием и кнопкой купить.

Нет желания использовать для этого плагин. С нужным набором соц сетей сложно найти такой.
Код, который нужно вставить:

<script type="text/javascript" src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js" charset="utf-8"></script>
<script type="text/javascript" src="//yastatic.net/share2/share.js" charset="utf-8"></script>
<div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,viber,whatsapp" data-counter=""></div>

Спасибо!

 

[searchingman]

На примере темы Storefront выведем кнопки только на странице товара.
В functions.php темы вставляем следующий код.

// подключаем внешние скрипты только на странице товара
function my_scripts_yastatic() {   
    wp_enqueue_script( 'es5-shims', '//yastatic.net/es5-shims/0.0.2/es5-shims.min.js');
    wp_enqueue_script( 'share', '//yastatic.net/share2/share.js');
}
function add_my_script_yastatic() {
    if (is_product()) add_action( 'wp_enqueue_scripts', 'my_scripts_yastatic' );
}
add_action('wp', 'add_my_script_yastatic');

// добавляем нужные кнопки под кнопкой "купить"
function  my_share_yastatic() {
    echo '<div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,viber,whatsapp" data-counter=""></div>';
}
add_action( "woocommerce_single_product_summary", "my_share_yastatic", 35 );

Результат на скриншоте.

 

[Ollti]

Спасибо! Надеюсь будет полезно не только мне.

 

[Umka]

На примере темы Storefront выведем кнопки только на странице товара.
В functions.php темы вставляем следующий код.

// подключаем внешние скрипты только на странице товара
function my_scripts_yastatic() {  
    wp_enqueue_script( 'es5-shims', '//yastatic.net/es5-shims/0.0.2/es5-shims.min.js');
    wp_enqueue_script( 'share', '//yastatic.net/share2/share.js');
}
function add_my_script_yastatic() {
    if (is_product()) add_action( 'wp_enqueue_scripts', 'my_scripts_yastatic' );
}
add_action('wp', 'add_my_script_yastatic');

// добавляем нужные кнопки под кнопкой "купить"
function  my_share_yastatic() {
    echo '<div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,viber,whatsapp" data-counter=""></div>';
}
add_action( "woocommerce_single_product_summary", "my_share_yastatic", 35 );

Результат на скриншоте.

Здравствуйте! Скажите пожалуйста, как убрать из всего этого кнопку "WhatsApp" и можно ли сместить данные значки немного правее, а то он вставился у меня прям под кнопкой " в избранные" что будет не очень удобно. Ниже скрин

 

[searchingman]

Здравствуйте! Скажите пожалуйста, как убрать из всего этого кнопку "WhatsApp" и можно ли сместить данные значки немного правее, а то он вставился у меня прям под кнопкой " в избранные" что будет не очень удобно. Ниже скрин

Уберите в используемом коде whatsapp из data-services .

 

[Umka]

Уберите в используемом коде whatsapp из data-services .

ага, спасибо! а сместить эти кнопки никак?

 

[Ollti]

Вставьте в style.css дочерней темы, если таковой нет, то в основную, но после обновления все изменения от туда удалятся.

.ya-share2.ya-share2_inited {margin: 5px 0px 12px 14px;}

где 5px - отступ сверху, 0 - справа, 12 - снизу, 14 сверху. Величины задавайте любые, как нравятся. Значения можно указывать в px, em, %.

В идеале, добавить этот код под медиазапрос, для экранов с разрешением больше 768px, то есть пк, а для мобильных свои стили.

@media (min-width: 768px) {
.ya-share2.ya-share2_inited {
    margin: 5px 5px 15px 15px;
}}

 

[Umka]

Вставьте в style.css дочерней темы, если таковой нет, то в основную, но после обновления все изменения от туда удалятся.

.ya-share2.ya-share2_inited {margin: 5px 0px 12px 14px;}

где 5px - отступ сверху, 0 - справа, 12 - снизу, 14 сверху. Величины задавайте любые, как нравятся. Значения можно указывать в px, em, %.

В идеале, добавить этот код под медиазапрос, для экранов с разрешением больше 768px, то есть пк, а для мобильных свои стили.

@media (min-width: 768px) {
.ya-share2.ya-share2_inited {
    margin: 5px 5px 15px 15px;
}}

Спасибо, учту=)