Как обернуть картинки карточки товаров в ссылку на этот товар?

Question

[Сергей Шкурихин]

Как сделать картинки карточек товаров в категориях кликабельными. В теме была функция быстрого предпросмотра, которая работала не правельно. После ее отключения ссылка карточек слетела.

Как обернуть нужный модуль в ссылки? Где его найти и что прописать?

Comments

[Антон Литвиненко]

С помощью хуков изменить разметку карточки товара, вечерком смогу скинуть пример

Answer 1

[Антон Литвиненко]

У вас тема и в ней придется скорее всего поковыряться, чтобы найти нужные функции.

На скриншоте явно что-то не то


стандартно в woocommerce открывающий тег ссылки висит на хуке
do_action( 'woocommerce_before_shop_loop_item' );
на 10м приоритете и выводится функцией
woocommerce_template_loop_product_link_open()
код этой функции

if ( ! function_exists( 'woocommerce_template_loop_product_link_open' ) ) {
	/**
	 * Insert the opening anchor tag for products in the loop.
	 */
	function woocommerce_template_loop_product_link_open() {
		global $product;

		$link = apply_filters( 'woocommerce_loop_product_link', get_the_permalink(), $product );

		echo '<a href="' . esc_url( $link ) . '" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">';
	}
}

замена открывающего тега в стандартном woocommerce могла бы выглядеть как-то так:

remove_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );
add_action( 'woocommerce_before_shop_loop_item', 'custom_open_link', 10 );
function custom_open_link() {
	?>
		<a href="<?php the_permalink() ?>">
	<?php
}

Comments

[Сергей Шкурихин]

Нашол файл где нехватает этой ссылки

/**********************************/
//Shop Product Image Markup
/**********************************/
if ( ! function_exists( 'open_shop_product_image_start' ) ){
  /**
   * Thumbnail wrap start.
   */
  function open_shop_product_image_start(){
    echo '<div class="thunk-product-image"><a href="">';
  }
}
if ( ! function_exists( 'open_shop_product_image_end' ) ){

  /**
   * Thumbnail wrap start.
   */
    function open_shop_product_image_end(){
    do_action( 'woocommerce_before_shop_loop_item' );
    echo '</div>';
  }
}

if ( ! function_exists( 'open_shop_product_content_start' ) ){
  /**
   * Thumbnail wrap start.
   */
  function open_shop_product_content_start(){
    echo '<div class="thunk-product-content">';
  }
}
if ( ! function_exists( 'open_shop_product_content_end' ) ){

[Сергей Шкурихин]

echo '<div class="thunk-product-image">';

Я приписал a href="" к этой строке и картинки стали с ссылками но незнаю как теперь сюда влепить чтоб открывался именно нужный товар

[Антон Литвиненко]

Сергей Шкурихин, то есть мой ответ где как минимум две функции, которые выводят ссылку не сильно подошел?
Ну и если вы дописали ссылку открывающую, то не забудьте дописать закрывающую

[Сергей Шкурихин]

Вроде подходит, пока надеюсь но я не селен в коде сейчас постараюсь решить..)

[Антон Литвиненко]

Сергей Шкурихин,

<?php
global $product;
$link = apply_filters( 'woocommerce_loop_product_link', get_the_permalink(), $product );
?>
<a href="<?php esc_url( $link ) ?>">

<a href="<?php the_permalink() ?>">

[Сергей Шкурихин]

Пытаюсь.. может весь код этого файла прислать на почту?

Я наше замены там

add_action( 'woocommerce_before_shop_loop_item', 'open_shop_product_meta_start', 10);
add_action( 'woocommerce_after_shop_loop_item', 'open_shop_product_meta_end', 12 );
add_action( 'woocommerce_before_shop_loop_item_title', 'open_shop_product_content_start',20);
add_action( 'woocommerce_after_shop_loop_item_title', 'open_shop_product_content_end', 20 );
add_action( 'woocommerce_after_shop_loop_item_title', 'open_shop_product_hover_start',50);
add_action( 'woocommerce_after_shop_loop_item', 'open_shop_product_hover_end',20);

add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_link_open',15);
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_product_link_close',1);
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price',0);
add_action( 'woocommerce_before_shop_loop_item_title', 'open_shop_product_image_start', 0);
add_action( 'woocommerce_before_shop_loop_item_title', 'open_shop_product_image_end',10 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_show_product_sale_flash',4);
add_action( 'woocommerce_after_shop_loop_item', 'open_shop_whish_list',11);
add_action( 'woocommerce_after_shop_loop_item', 'open_shop_add_to_compare_fltr',11);

add_action( 'woocommerce_before_shop_loop', 'open_shop_shop_content_start',1);
add_action( 'woocommerce_after_shop_loop', 'open_shop_shop_content_end',1);

remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
remove_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open');

[Сергей Шкурихин]

Антон Литвиненко, У меня вот это: ?php the_permalink() ? просто в конец url добавляется..
Как правильно подставить к echo '<div class="thunk-product-image">

[Антон Литвиненко]

Сергей Шкурихин, я чуть выше написал как, я не вижу что вы делаете
<a href="<?php the_permalink() ?>">

[Сергей Шкурихин]

Я вам начальный файл на почту прислал может взгляните точно ли я туда вставляю?

[Антон Литвиненко]

Сергей Шкурихин, я должен угадать куда вы вставляете в файле на 500 строк?

[Сергей Шкурихин]

112 строчка echo '<div class="thunk-product-image">'; Но я просто не понимаю как это должно работать..

[Антон Литвиненко]

Сергей Шкурихин, да у вас там надо копать намного глубже.
вокруг картинки у вас есть ссылка, в которую почему-то вместо url выводится функция php.

При этом в файле функций, что вы кинули эта функция вызывается в ссылке у которой есть класс cart-contents, а тут этого класса нет. Значит искать надо в другом месте.

[Сергей Шкурихин]

Не все практически получилось! только теперь под картинкой куча кода выводиться почемуто. попробую через css убрать))

[Сергей Шкурихин]

Антон Литвиненко, Если вставить вот это

remove_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );
add_action( 'woocommerce_before_shop_loop_item', 'custom_open_link', 10 );
function custom_open_link() {
  ?>
    <a href="<?php the_permalink() ?>">
  <?php
}

То картинки начинают работать но при этом ниже дублируется контент

[Сергей Шкурихин]

Я на почту скинул

[Антон Литвиненко]

Этот код был как пример. Не нужно мне кидать на почту, одно дело подсказать, другое делать за вас работу

[Сергей Шкурихин]

Да если честно надеюсь эту задачу решить и больше некогда не возвращаться к коду.. Спасибо за помощ..

Answer 2

[Сергей Шкурихин]

https://blagomart.ru/index.php/product-category/decor/

Пример страницы с некликабельным товаром