Как открыть партнерский товар WooCommerce на WordPress в новой вкладке (окне)?

Продолжая тему создания сайтов для заработка на CPA-партнерках, мы обсудим сегодня, как настроить карточки товаров WooCommerce на WordPress для партнерских товаров. Например, сам работаю с Admitad.

Если нет времени разбираться во всем самостоятельно, или понимаете, что не справитесь сами, найдите специалиста, который поможет вам решить вопрос. Защищенные сделки и доступные цены.

Как создать партнерский товар WooCommerce на WordPress?

Создать внешний партнерский товар на WordPress, достаточно просто. При добавлении или редактировании товара, выбираем вариант «Внешний / Партнерский товар»:

После этого, у нас появится поле для ссылки «Введите внешнюю ссылку на товар». Указываем свою партнерскую ссылку на товар:

После этого, в нашей карточке товара, когда мы нажмем по кнопке «Купить товар», будет открыта данная ссылка с товаром на партнерский магазин.

Недостаток данного способа в том, что WooCommerce не позволяет настроить открытие партнерских ссылок в новом окне (вкладке). Таким образом, находясь на вашем сайте, пользователь который щелкнет по товару «Купить товар», сразу перейдет на партнерский сайт, в этом же окне браузера.

По теме: Выгодное предложение от хостинг-провайдера Fornex. Есть возможность воспользоваться скидочными купонами.

В данной заметке, нет цели показывать все по шагал, как создать партнерский товар в WooCommerce на WordPress. Данной информации, достаточно на сегодняшний день в Сети. Например, есть простой и понятный видеоурок по настройке внешнего / партнерского товара на WordPress с использованием WooCommerce :

Моя задача, показать основной принцип и подробно объяснить, как настроить открытие партнерского товара в новой вкладке.

Как открыть партнерский товар WooCommerce на WordPress в новой вкладке?

Итак, как же сделать так, чтобы партнерский / внешний товар открывался в новом окне, при клике пользователем по кнопке «Купить товар»?

Мы рассмотрим простой скрипт, который позволяет настроить открытие внешнего партнерского товара WooCommerce на WordPress в новом окне браузера. Данный скрипт, мы можем разместить несколькими способами на свой сайт, в зависимости от поставленной задачи. 

Способ 1.

Предположим, у вас есть свой полноценный Интернет-магазин, на котором у вас есть свои товары. Посетители вашего сайта, могут добавлять товары и оформлять заказы через корзину товаров. При этом, в любом Интернет-магазине, некоторый тип товара, может закончиться или, перестает быть актуальным с точки зрения прибыли. В таком случае, владельцы Интернет-магазинов, помечают такой товар «Нет в наличии», или вообще отключают его из показа. А что, если такие товары, продавать по партнерской ссылке? Уловили суть? В таком случае, вам нужно настроить только некоторые карточки, как внешний товар. И в данном случае, вы можете использовать вышеприведенный скрипт, разместив его конкретно в нужную карточку партнерского товара.

Для этого, копируем код:

<script>
let pBut = document.querySelector(".product-type-external form.cart");
//console.log(pBut);
pBut.setAttribute("target", "_blank");
</script>

И размещаем его (2.) в редакторе карточки товара WooCommerce, обязательно переключившись в перед этим в редакторе на «Текст» (1.):

При просмотре товара в редакторе «Визуально», мы увидим значок (2.):

В опубликованной карточке товаров, он не будет отображаться. При щелчке по кнопке «Купить товар», будет открыто новое окно в браузере с партнерским товаром, ссылку на который мы указали в карточке при выборе «Внешний / Партнерский товар».

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

Способ 2.

Мы можем разместить скрипт при помощи плагина Insert Headers and Footers. После установки плагина, переходим в Настройки (1.) и выбираем плагин Insert Headers and Footers (2.). 

После, вставляем код (3.) в блок «Скрипты в Footer (подвал сайта)» и не забываем сохранить изменения:

<script>
let pBut = document.querySelector(".product-type-external form.cart");
//console.log(pBut);
pBut.setAttribute("target", "_blank");
</script>

Данный скрипт, будет работать на все кнопки в партнерских карточках товаров. Очень удобно, если вы создаете партнерскую витрину под оферы Admitad или подобную партнерку. Все партнерские товары WooCommerce на WordPress, будут открываться в новой вкладке. Нет необходимости добавлять скрипт в каждую карточку товара.

Способ 3.

Третий способ, позволяет добавить скрипт, через редактор шаблона.

Открываем в админке «Редактор тем»:

Выбираем файл темы footer.php (1.). Добавляем код 

<script>
let pBut = document.querySelector(".product-type-external form.cart");
//console.log(pBut);
pBut.setAttribute("target", "_blank");
</script>

перед тегом </body> (2.). Сохраняем изменения (3.).

Заключение.

Данный скрипт, работает во всех браузерах и на всех устройствах. Можете использовать один из способов его размещения, в зависимости от необходимой задачи.

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

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

Добавлено 01.12.2021

Небольшая заметка: Как заменить кнопку «Добавить в корзину» на «Посмотреть товар», связанную со страницами товаров и категорий магазина WooCommerce?

Будет полезна тем, кто создает товарную витрину или партнерский магазин.

Добавлено 12.12.2021

Мне попался плагин, который позволяет все внешние / партнерские товары WooCommerce на WordPress открывать в новом окне браузера: https://ru.wordpress.org/plugins/wc-external-product-new-tab/