Пользовательская кнопка рядом с кнопкой "Добавить в корзину" WooCommerce на основе типа продукта

Я хочу добавить пользовательскую кнопку "Просмотр демо" рядом с кнопкой "Добавить в корзину" WooCommerce на основе типа продукта, как на главной странице магазина, так и на одной странице продукта.

Я сделал эти шаги:

добавить код в файл темы header.php:

<script>var url_demo = "<?php echo the_field('url_demo'); ?>"</script>

добавить скрипт jQuery с помощью плагина" TC Custom JavaScript":

jQuery(function($) {
 $('.add_to_cart_button, .single_add_to_cart_button').after(' <a class="button demo_button" style="padding-right: 0.75em;padding-left: 0.75em;margin-left: 8px; background-color: #0ebc30;" href="'+url_demo+'" target="_blank">View Demo</a>');
});

это работа, пользовательская кнопка "просмотр демо", показанная на главной странице магазина и одной странице продукта.

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

мои вопросы: Как добавить кнопку" Просмотр демо " (как на главной странице магазина, так и на одной странице продукта), которая отображается только для типа продукта spesific, например, только в категории тема? Наконец, есть ли другой способ добавить демо-ссылку без редактирования header.php файл, как выше метод? Я просто предвкушаю ... header.php сброс файла, если тема обновлена.

6
javascript jquery php woocommerce wordpress

3 ответов

Я использую другой способ сделать это: WooCommerce крючки.

вам больше не нужно скрипт jQuery, а также javascript, расположенный в вашем заголовок.в PHP, так что вы можете стереть их.

используя get_field() вместо the_field (спасибо Дипти chipdey), чтобы получить только значение, объединенное в echoed строку.

вставьте этот фрагмент кода в ваш в активной дочерней теме или папке темы:

function wc_shop_demo_button() {
    echo '<a class="button demo_button" style="padding-right: 0.75em;padding-left: 0.75em;margin-left: 8px; background-color: #0ebc30;" href="'.get_field( "url_demo" ).'" target="_blank">View Demo</a>';
}
add_action( 'woocommerce_after_shop_loop_item', 'wc_shop_demo_button', 20 );
add_action( 'woocommerce_after_add_to_cart_button', 'wc_shop_demo_button', 20 );

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

5

изменить 

the_field('url_demo');

to

 get_field('url_demo');
2

почему-то LoicTheAztec ' s ответ сделал это не для меня.

вот что получилось:

function wc_shop_demo_button() {
    echo '<a class="button demo_button" href="'.get_field( "url_demo" ).'" target="_blank">View Demo</a>';
}
add_action( 'woocommerce_after_add_to_cart_button', 'wc_shop_demo_button' );

надеюсь, что это поможет кому-то в их путешествии.

1