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

Решено Добавить произвольный блок на страницу товара через 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 темы вставляем следующий код.
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

Форумчанин
На примере темы 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

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

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;
}}
Спасибо, учту=)
 
Сверху Снизу