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

Можно реализовать через padding. Например, padding-top: 30% - это верхний внутренний отступ 30% от ширины родителя. Обратное поведение можно задать через calc:

padding-top: calc(100px - 10%);

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

const selects = [...document.querySelectorAll('select')];

selects.forEach(n => n.addEventListener('change', onChange));

function onChange() {
  const values = selects.map(n => n.value);

  selects.forEach((select, i) => {
    [...select.options].forEach(option => {
      option.hidden = values.includes(option.value) && values[i] !== option.value;
    });
  });
}

Первый вариант svg mask.
плюсы: не требует js
минусы: нельзя применить backdrop-filter


Второй вариант svg clip-path.
плюсы: можно применить backdrop-filter
минусы: требует js и желательно ResizeObserver

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');

Берёте и верстаете как обычно.
Любые из озвученных инструментов актуальны. Выбирайте по душе.

Лично я предпочитаю верстку делать, используя mix. Потому что его практически не нужно конфигурировать. Сразу начинаешь работать. Плюс, есть куча готовых расширений https://laravel-mix.com/extensions

После появления Intersection Observer API надобность в плагинах отпала. Всё решается парой десятков строчек кода.

Реализуйте из пункта "Что делать чтобы обезопасить сайт" что получится.

https://ru.wordpress.org/support/article/faq-hacked/

интересный вопрос.....Спасибо!
Пройдя по ссылке Анатолия и поковырявшись вот такой вариант у меня вышел)):
создаем новую роль

add_role('newvabuser',
		__('Новый пользователь','VAB'),
		array(
		'read'=>true,
		'edit_posts'=>false,
		'delete_posts'=>false,
		'publish_posts'=>false,
		'upload_files'=>true,
	 )
	);

насколько я понял данный код можно удалить после того как роль с массивом попадет в базу....
если что не так, используйте
remove_role('newvabuser');
далее создаем новый пост тип

add_action('init','create_custom_post_types');
function create_custom_post_types(){
	register_post_type('vabs',
		array(
			'labels'=>array(
					'name'=>__('Новый тип записи','VAB'),
					'singular_name'=>__('Новый тип записи','VAB'),
					'menu_name'=>__('Новый тип записи','VAB'),
					'add_new'=>__('Добавить новую','VAB'),
					'add_new_item'=>__('Добавить новую','VAB'),
					'edit_item'=>__('Редактировать','VAB'),
					'new_item'=>__('Новая','VAB'),
					'all_items'=>__('Все записи','VAB'),
					'view_item'=>__('Просмотр','VAB'),
					'search_items'=>__('Искать','VAB'),
					'not_found'=>__('Записи не найдены','VAB'),
					'not_found_in_trash'=>__('В корзине записи не найдены','VAB'),
					'parent_item_colon'=>''
			),
			'public'=>true,
			'has_archive'=>true,
			'rewrite'=>array('slug'=>'vab'),
			'capability_type'=>'vab',
			'capabilities'=>array(
				'publish_posts'=>'publish_vabs',
				'edit_posts'=>'edit_vabs',
				'edit_others_posts'=>'edit_others_vabs',
				'delete_posts'=>'delete_vabs',
				'delete_others_posts'=>'delete_others_vabs',
				'read_private_posts'=>'read_private_vabs',
				'edit_post'=>'edit_vabs',
				'delete_post'=>'delete_vabs',
				'read_post'=>'read_vabs',
				'assign_terms' =>'edit_taxo',
				'manage_terms'=>'manage_vab_terms',
				'edit_terms'=>'manage_vab_terms',
				'delete_terms'=>'delete_vab_terms',
				'assign_terms'=>'edit_vab-type'
			),
			'supports'=>array('title','editor','thumbnail')
		)
	);
}

важно обратить внимание на массив с параметрами capabilities. его мы дальше передадим нашей роли:

add_action('admin_init','add_vabs_caps');
function add_vabs_caps(){
	$admins=get_role('newvabuser');
	$admins->add_cap('edit_vabs');
	$admins->add_cap('publish_vabs');
	$admins->add_cap('read_vabs');
	$admins->add_cap('read_private_vabs');
	$admins->add_cap('delete_vabs');
	$admins->add_cap('edit_taxo');
	$admins->remove_cap('edit_others_vabs');
	$admins->remove_cap('delete_others_vabs');
	$admins->add_cap('manage_vab_terms');
	$admins->add_cap('delete_vab_terms');
	$admins->add_cap('edit_vab-type');
	$admins->add_cap('manage_categories');
	$admins->add_cap('edit_categories');
	$admins->add_cap('delete_categories');
	$admins->add_cap('assign_categoriess');
}

В итогах данную запись смогут редактировать только админ и пользователь с данной ролью больше никто:


Вам нужно все это только под себя переделать

переопределяем функцию которую дата указана в "data-action", на любую кастомную.
У меня: data-action="search_posts".
Далее создаем функцию search_posts:

add_action('wp_ajax_search_posts', 'search_posts');
function search_posts()
{
	$s = $_GET['term']; //получает данные введенного текста для поиска
	$args = array(
		'post_type' => 'collection',  //ваш тип поста
		's' => $s, //поисковый запрос
	);
	$data = [];
	$loop = new WP_Query($args);
	if ($loop->have_posts()) {
		while ($loop->have_posts()) {
			$loop->the_post();
			$post_id = get_the_id(); //получаем id записи
			$post_name = get_the_title(); //получаем title записи
			$data[$post_id] = $post_name; // добавляем в массив data
		}
	}
	echo json_encode($data); //кодируем в json и выводим
	wp_die(); //иначе 0 в конце всегда лишний в выводе
}

Далее меняем вывод нужных нам данных уже в самом поле select. Приведу в пример полный код select, чтобы не запутаться:

<select id="product_field_type" name="product_field_type[]" class="wc-product-search" multiple="multiple" style="width: 50%;" data-placeholder="<?php esc_attr_e('Поиск по названию коллекции', 'woocommerce'); ?>" data-action="search_posts">
					<?php
					$product_ids            = [];
					$product_field_type_ids = get_post_meta(get_the_ID(), '_product_field_type_ids', true);  //сменил $post->ID на get_the_ID()
					
					if (!empty($product_field_type_ids)) {
						$product_ids = array_map('absint', $product_field_type_ids);
					}

					if ($product_ids) {
						foreach ($product_ids as $product_id) {
							//$product = new WP_Query($product_id);  больше не нужен
							
							echo sprintf(
								'<option value="%s" %s>%s</option>',
								esc_attr($product_id),
								selected(true, true, false),
								esc_html(get_the_title($product_id)) //получаем нужный нам title по id записи
							);
						}
					}
					?>
				</select>

https://www.advancedcustomfields.com/resources/cre...
https://www.advancedcustomfields.com/resources/usi...

Вы на каждой итерации обновляете id картинки

Надо как-то так

$files = $_FILES[ "photo" ];
	$_ids  = $_errors = [];
	foreach ( $files[ 'name' ] as $key => $value ) {
		if ( $files[ 'name' ][ $key ] ) {
			$file   = array (
				'name'     => $files[ 'name' ][ $key ],
				'type'     => $files[ 'type' ][ $key ],
				'tmp_name' => $files[ 'tmp_name' ][ $key ],
				'error'    => $files[ 'error' ][ $key ],
				'size'     => $files[ 'size' ][ $key ]
			);
			$_FILES = array ( "rev_foto" => $file );

			$attachment_id2 = media_handle_upload( "rev_foto", 0 );


			if ( is_wp_error( $attachment_id2 ) ) {
				$_errors[] = $attachment_id2->get_error_message();
			} else {
				$_ids[] = $attachment_id2;
			}
		}
	}

	if ( ! empty( $_ids ) ) {
		update_field( 'rev_foto', $_ids, $post_id );
	}

	if ( ! empty( $_errors ) ) {
		sprintf( 'А вот, что пошло не так: %s', implode( ' ,', $_errors ) );
	}

И пользуйтесь уже нормальными функциями из движка а не всяким get_field, update_field и иже с ним

Пример функции для выборочного обновления контента:

async function elementUpdate(selector) {
	try {
		var html = await (await fetch(location.href)).text();
		var newdoc = new DOMParser().parseFromString(html, 'text/html');
		document.querySelector(selector).outerHTML = newdoc.querySelector(selector).outerHTML;
		console.log('Элемент '+selector+' был успешно обновлен');
		return true;
	} catch(err) {
		console.log('При обновлении элемента '+selector+' произошла ошибка:');
		console.dir(err);
		return false;
	}
}

Вызывайте функцию elementUpdate() передав внутрь него CSS-селектор того элемента, который вы хотите обновить. Например, если взять блок, который имеет id равный block, то достаточно выполнить:
elementUpdate('div#block');

Если хотите делать это циклически, каждую секунду, то можно использовать while:

// Запуск асинхронного кода:

(async function() {
	
	// Бесконечный цикл:
	
	while (true) {
		
		await elementUpdate('div#block'); // Обновляем блок
		
		// Выжидаем 1000 миллисекунд, а потом код внутри while выполняется вновь:
		await new Promise(function(success) { setTimeout(success, 1000); });
		
	}

})();

P. S. Но так обычно не делают, но если вам прям сильно надо, можно использовать этот лобовой метод.

Там кода на пять строк. Что вам нужно от "готового"?

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

В functions.php нужно добавить подключение скриптов и стилей на хуке wp_enqueue_scripts так:

add_action( 'wp_enqueue_scripts', 'custom_scripts' );
function custom_scripts() {

	// Сюда стили
	wp_enqueue_style( 'newstyle', get_template_directory_uri() . '/assets/css/custom_style.min.css' );

	// Сюда скрипты
	wp_enqueue_script( 'newscript', get_template_directory_uri() . '/assets/js/custom_script.min.js' );

	// сюда инициализацию или отдельным файлом как выше
	$newscript_init = 'jQuery(function($) {

	});';
	wp_add_inline_script( 'newscript', $newscript_init );

}

Вывод формы можно добавить на хук wp_footer так:

add_action( 'wp_footer', 'the_popup_form', 1 );
function the_popup_form() { ?>

	<div id="popup" class="mfp-hide popup">
		<form id="popup-form" class="popup-form">

			<!-- ... -->

		</form>
	</div>

<?php }