Отображать содержимое перед атрибутом <a> href при использовании хука действия «woocommerce_before_shop_loop_item»

На своем веб-сайте я добавил эффект наведения для отображения значка списка пожеланий, но когда вы нажимаете на значок, вы переходите на страницу продукта вместо запуска сценария ajax для добавления текущего продукта в список пожеланий.

Я знаю, что могу легко сделать это с помощью insertAfter jQuery, но прежде чем я это сделаю, я хотел бы знать, есть ли «более чистое» решение в WooCommerce?

Я также пытался использовать CSS pointer-events:none, но это не дало желаемого результата.

На данный момент это разметка:

<a>
    <div class"wishlist">My icon</div>
    <img>
    <h2 class="woocommerce-loop-product__title">
</a>

Как я могу отредактировать WooComerce с помощью хуков и фильтров, чтобы я мог перемещать <div class"wishlist">My icon</div> за пределы <a>?

Нравиться:

<div class"wishlist">My icon</div>
<a>
    <img>
    <h2 class="woocommerce-loop-product__title">
</a>

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

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
1
0
19
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

При использовании хуков без номера приоритета, например:

function action_woocommerce_before_shop_loop_item() {
    echo '<div class"wishlist">My icon</div>';
}
add_action( 'woocommerce_before_shop_loop_item', 'action_woocommerce_before_shop_loop_item' );

По умолчанию в WooCommerce будет использоваться приоритет 10.


Однако в /templates/content-product.php мы видим, что функция обратного вызова woocommerce_template_loop_product_link_open уже содержит приоритет 10:

 * Hook: woocommerce_before_shop_loop_item.
 *
 * @hooked woocommerce_template_loop_product_link_open - 10
 */
do_action( 'woocommerce_before_shop_loop_item' );

В /includes/wc-template-hooks.php есть:

add_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );

Итак, у вас есть убедитесь, что ваш пользовательский код выполняется до действий по умолчанию, это можно сделать, настроив номер приоритета, например, на 1:

function action_woocommerce_before_shop_loop_item() {
    echo '<div class"wishlist">My icon</div>';
}
add_action( 'woocommerce_before_shop_loop_item', 'action_woocommerce_before_shop_loop_item', 1 );

Другие вопросы по теме