Правки шаблона Landing Page Proland для WordPress

Как исправить отображение хэдера с логотипом и меню, чтобы при скролле бэкграунд становился белым?

Находим файл main.js

/wp-content/themes/proland/js/main.js

Добавляем в него кусок кода, отвечающий за анимацию полоски меню

/* ---------- Nav BG ON Scroll---------- */

$(window).scroll(function() {
	var scroll = $(window).scrollTop();

	if (scroll >= 99) {
		$(".navbar-default").addClass("is-scrolling");
	} else {
		$(".navbar-default").removeClass("is-scrolling");
	}
});

После этого всё должно работать.

Скачать main.js

Как включить анимацию блоков лэндинга

После первой установки темы Proland и загрузки демо-данных у меня абсолютно не работала анимация блоков. Они то вообще не появлялись, то появлялись по клику.

Оказывается, в настройках темы (в самом последнем пункте «Icon Libraries») есть опция включения-выключения эффектов анимации. Она так и называется — «Animation». Проблема в том, что у меня анимация не работала при любом положении этого переключателя.

Недостаток исправил путем внесения небольшого изменения в файл functions.php

/wp-content/themes/proland/functions.php

Просто меняем условие подключения нужных css файлов

if ( ot_get_option( 'proland_animate' ) =='on' ){
// Animate library
wp_enqueue_style( 'animate', get_template_directory_uri() . '/css/plugins/animate.css', false, '1.0');
//wp_deregister_style( 'animate' );  // VC plugin hack
wp_deregister_style( 'animate-css' ); // VC plugin hack
wp_deregister_style( 'animate-css-css' ); // VC plugin hack 
}

Как изменить положение валюты в товарах плагина Theme Products

Шаблон вывода находится вот в этом файле:

/wp-content/plugins/proland-shortcodes/proland-shortcodes.php

Меняем последовательность вывода цены и валюты:

//if ( $proland_product_price){ $out .= '<h4 class="price">'. $proland_product_currency . ''. $proland_product_price . '</h4>'; }
//меняем на
if ( $proland_product_price){ $out .= '<h4 class="price">'. $proland_product_price . ' '. $proland_product_currency . '</h4>'; }

//if( $proland_product_sale !='' ){$out .= '<del>'. $proland_product_currency . ''. $proland_product_sale . '</del>'; }
//if( $proland_product_price !='' ){$out .= ''. $proland_product_currency . ''. $proland_product_price . ''; }
//меняем на
if( $proland_product_sale	!='' ){	$out .= '<del>'. $proland_product_sale . ' '. $proland_product_currency . '</del>'; }
if( $proland_product_price	!='' ){$out .= ''. $proland_product_price . ' '. $proland_product_currency . ''; }

//$out .= '<div class="price"><span>'.esc_html( $currency ).'</span>'.esc_html( $priceamount ).'</div>';
//меняем на
$out .= '<div class="price"><span>'.esc_html( $priceamount ).'</span> '.esc_html( $currency ).'</div>';

Убираем uppercase с валюты. Идем в «Внешний вид» -> «Theme Options» -> «Custom CSS» и в поле «additional css» вставляем

.product-desc .price {
    text-transform: none;
}

Добавление эффекта 3D Flip изображения товара на главной лэндинга

Подробности подключения самой библиотеки описаны тут: 3D переворот картинки

Добавлю, что код инциализации разместил внутри основной функции в файле

/wp-content/themes/proland/js/main.js

Естественно без тегов <script></script>.

Для появления эффекта переворота изображения необходимо внести изменения в файл

/wp-content/plugins/proland-shortcodes/proland-shortcodes.php

Коряво, но работает

// получаем все изображения товара и их урлы
$i=0;
foreach ($proland_product_items as $image2)
{
	$img_url_flip[$i] = $image2['full_url'];
	$i++;
}

$out .= '<div class="col-sm-6 col-md-'. $column_number .' item wow fadeIn '. $offset .'" '. $delay .'>';
	$out .= '<div class="row m0 featured-img">';
	
		$thumb 		= get_post_thumbnail_id();
		$img_url 	= wp_get_attachment_url( $thumb,'full' );
		$image   	= aq_resize( $img_url, 213, 213, true, true, true );
		
		if( $image !='' && $resize =='0'  || $resize =='' ){  
		$out .= '<a href="'. $proland_product_small_btn_link .'"><img class="product-gallery-image-single"  src="'. esc_url($image) . '" alt="'. get_the_title() .'" /></a>';
		}
		if( $img_url !='' && $resize =='1'){
		// формируем эффект переворота из первого и второго изображения
		$out .= '<div class="flip"><div class="front"><img class="product-gallery-image-single"  src="'. esc_url($img_url) . '" alt="'. get_the_title() .'" /></div><div class="back"><img class="product-gallery-image-single"  src="'. esc_url($img_url_flip[1]) . '" alt="'. get_the_title() .'" /></div></div>';
		//$out .= '<img class="product-gallery-image-single"  src="'. esc_url($img_url) . '" alt="'. get_the_title() .'" />';
		}

В настройках темы Proland в разделе additional css добавил

.flip .back img {
    max-height: 330px;
}

Это ограничивает высоту картинки до 330px.