Александр

можно так

для превью задаете

jQuery('.preview-class').slick({
			dots: false,
			centerMode: false,
			focusOnSelect: true,
			vertical:true,
			infinite:true,
			slidesToShow: 4,
			slidesToScroll: 1,
			asNavFor: '.slider-class'
		});

для слайдера

jQuery('.slider-class').slick({
			fade: false,
			dots : false,
			lazyLoad: 'progressive',
			arrows: true,
			slidesToScroll:1,
			slidesToShow:1,
			infinite:true,
			swipe:true,
			asNavFor: '.preview-class'
		});

css

.slider-class{
   float: right;
   width: 75%;
}

::-webkit-input-placeholder {
  color: #fff;
}
:-ms-input-placeholder {
  color: #fff;
}
::-moz-placeholder {
  color: #fff;
}
:-moz-placeholder {
  color: #fff;
}

Вам обязательно jquery использовать?
Можно через css сделать .

Только ограничьте кнопку по высоте, чтобы высота была всегда одинаковая, и в нормальном состоянии, и при наведении.

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

<?php
	$args = array(
		'taxonomy' => 'product_cat',
		'orderby' => 'tax_position',
		'meta_key' => 'tax_position',
		'order'      => 'ASC',
		'hide_empty' => true
	);

	$product_categories = get_terms( $args );

	$count = count($product_categories);

	if ( $count > 0 ){
		foreach ( $product_categories as $product_category ) {
			$link = get_field( 'url_cat', $product_category );
			$thumbnail_id = get_woocommerce_term_meta( $product_category->term_id, 'thumbnail_id', true );


			$item = '<div class="catalogue-item">';
			$item .= '<a href="'.$link.'"class="catalogue-item-link"'>;

			$item .= '<div class="catalogue-item-img tilt">';
			$item .= '<img src="'.  wp_get_attachment_url( $thumbnail_id ) .'" alt="" >';
			$item .= '</div>';
			$item .= '<p class="catalog-item-title">' . $product_category->name . '</p>';
			$item .= '</div></a>';

			echo $item;  

		}
	}
	?>

1. Добавьте кнопку и в атрибуте (можно data-id) передайте id товара

global $product;
$id = $product->id;

2. Повесьте обработчик на клик кнопки

jQuery('.one-click-button').click(function(e) {
 	e.preventDefault();
 	jQuery(this).addClass('adding-cart');
 	var product_id = jQuery(this).data('id');

 	var ajax_url = "/wp-admin/admin-ajax.php"

 	jQuery.ajax ({
 		url: ajax_url,  
 		type:'POST',
 		data:'action=oneclick&product_id=' + product_id + '&quantity=1',

 		success:function(results) {
		// Показываем окно успешного добавления
		$('.form_popup').hide();
		$('#modal').css('display','inline-block');
		$('.good_cart').css('display','inline-block');
		document.location.href = 'http://domain.ru/oformlenie-zakaza/'; //Переход на оформление заказа
	}
});
 });

3. Обработчик в functions.php

function oneclick() {
			$product_id = $_POST['product_id'];
			$variation_id = $_POST['variation_id'];
			$quantity = $_POST['quantity'];

			if ($variation_id) {
				WC()->cart->add_to_cart( $product_id, $quantity, $variation_id );
			} else {
				WC()->cart->add_to_cart( $product_id, $quantity);
			}

			$items = WC()->cart->get_cart();
			global $woocommerce;
			$item_count = $woocommerce->cart->cart_contents_count; ?>

			<?php die();
		}

add_action('wp_ajax_oneclick', 'oneclick');
add_action('wp_ajax_nopriv_oneclick', 'oneclick');

Как вариант

https://jsfiddle.net/888txs0q/

$('.macroText').html('No more expensive lenses and heavy<br>editing in Photoshop.');

jsfiddle

Можно попробовать связку плагинов ACF + ACF Front End Editor. Вот гифка, как редактируются тексты в реальном времени.

В правой нижней части чехла просто два магнита. Они и блокируют.