• Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!

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

Image CMS

Ollti

Форумчанин
#1
Добрый день.

Подскажите пожалуйста, как добавить произвольный блок, например 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

Гуру
Местный
#2
На примере темы Storefront выведем кнопки только на странице товара.
В functions.php темы вставляем следующий код.
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 );
Результат на скриншоте.
 

Umka

Форумчанин
#4
На примере темы Storefront выведем кнопки только на странице товара.
В functions.php темы вставляем следующий код.
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

Гуру
Местный
#5
Здравствуйте! Скажите пожалуйста, как убрать из всего этого кнопку "WhatsApp" и можно ли сместить данные значки немного правее, а то он вставился у меня прям под кнопкой " в избранные" что будет не очень удобно. Ниже скрин
Уберите в используемом коде whatsapp из data-services .
 

Ollti

Форумчанин
#7
Вставьте в 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

Форумчанин
#8
Вставьте в 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;
}}
Спасибо, учту=)