WP-CITY.RU

Авторские шаблоны WordPress

Недорогой, функциональный сайт или Интернет-магазин
это реально!


Заказать интернет-магазин сейчас

Делаем быстрый просмотр товара для для магазина WooCommerce

Доброго всем времени суток, сегодня я расскажу и покажу как быстро сделать быстрый просмотр товара для магазинов на основе плагина 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. Дмитрий

    Здравствуйте. В вашей статье «Делаем быстрый просмотр товара для для магазина WooCommerce» не совсем понятно, куда именно ставить код в файле content-product.php, чтобы он корректно работал. Во всяком случае, у меня не получилось.
    И это работает, если просто разместить кнопку, когда все товары выводятся шаблоном «grid». А если у меня товары выводятся в виде таблицы или списка? И мне например, не нужна кнопка, а ссылка на открытие всплывающего окна, нужна при нажатии на название и фото товара.

    Как с этим быть? Заранее спасибо за ответ!

  2. DavidInarm

    2, ‘Moonlight’ is one of the most popular piano pieces ever written. The sonata got its name when poet Ludwig Rellstab described the music as being ‘like …

    Piano music — http://best-short.xyz

1 2

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

evgeniy38868     krizisvt@i.ua