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

Начнем с того для чего это вообще надо, ну наверное самое главное чтоб потенциальный покупатель мог прочесть минимальное описание вашего товара не переходя при это на основную страницу.
Вот вам небольшой скрин как это работает:
prosmotr

Итак что нам для этого понадобится, да не многое, всего только скрипт лайтбокса, самый легкий!
Я выбрал для этих целей jquery.fancybox скачать можно его тут.

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

<script type='text/javascript' src='<?php bloginfo('template_directory'); ?>/js/jquery.fancybox.js'></script>
<link href="<?php bloginfo('template_directory'); ?>/jquery.fancybox.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
            jQuery(function($){
			$('.fancybox').fancybox();
}); 
  
        </script>

Этот код надо поместить в фаил шаблонна footer.php после тега /body и проследите чтоб у вас папки со скриптом и стилями соответствовали путям!

Далее нам надо вызвать само модальное окно где и будет выводится минимальная информация о товаре.

<div id="<?php echo $post->ID; ?>" style="width:600px;display: none;padding:7px; display:none;">

<div><a href="<?php the_permalink(); ?>"><img src="<?php echo get_image_path($post->ID); ?>" alt="<?php the_title(); ?>" style="width:40%; float:left; margin:0 20px 0 0;"></a>

<?php
		woocommerce_show_product_loop_sale_flash();
		echo '<h3 class="title">', the_title(), '</h3>';
		echo '<span style="display:none;">',woocommerce_template_loop_rating(), '</span>';
		echo '<div class="saser" >',woocommerce_template_loop_price(), '</div>';
		echo '<div class="sas" >',woocommerce_template_single_add_to_cart(), '</div>';
		woocommerce_template_single_excerpt();
		woocommerce_template_single_meta();
		?>
	

</div>
</div>

Данный код полностью настроен и рабочий, его вам надо вставить в фаил вашего магазина
content-product.php, он должен находится в вашем шаблоне в папке woocommerce:
shablon

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

<div class="nokar">
<a class="fancybox button" href="#<?php echo $post->ID; ?>" data-product_id="<?php echo $post->ID; ?>" style="position:absolute; bottom:5px;left:50%; margin-left:-30%;"> Быстрый просмотр</a>
</div>

Вот теперь все, наш быстрый просмотр готов, без использования разных тяжелых плагинов!!!

  1. Kevil Tuan

    Thank you for sharing download bee talk

1 2

© 2012–2017 / wp-city.ru / Авторские шаблоны WORDPRESS / Создание сайтов