Genri_Rus

Можно вот так: ссылка

Как вариант на ютубе есть уроки: ссылка

Как по мне CSS фреймворк лучше всего использовать для админок

Насколько я понял, то можно вот так:

"SELECT * FROM `table_name` WHERE JSON_CONTAINS(tags, '{\"target\", \"first\"}')"

Версия MariaDB, которая поддерживает данные функции должна быть не ниже 10.2.3

Вот пример: https://rudrastyh.com/wordpress/ajax-post-filters.html
Для начала вам нужно связать товары с брендами
В админке, во вкладке товары есть подраздел атрибуты
Создаете в атрибутах Бренды и уже в брендах создаете названия ваших брендов
После этого вам нужно динамически вывести созданные на странице бренды в виде чекбоксов, указать им id в виде slug ваших брендов (для будущего ajax'а)
Т.е. например если у вас 5 брендов, то выводится только 5 чекбоксов, если 3 - то только три
Далее такой запрос (где вы хотите вывести эти данные)

$args = array(
	'posts_per_page' => -1
        'tax_query' => array(  
           'taxonomy' => тут название вашего созданного атрибута (можно посмотреть в url строке, там будет что-то типа taxonomy='brends'),
           'field' => 'slug',
           'terms' => $_POST['тут что хранится в id или name ваших чекбоксов']
       )
);
$brends = new WP_Query( $args );

А дальше уже цикл

Вопрос решен !!!

Как оказалось скрипту add-to-cart-variation.js в обязательном порядке нужен некий wp-util.js

function load_scripts() {
			if (!(wc_get_product() && wc_get_product()->is_type('bundle'))) {
				wp_deregister_script( 'wc-add-to-cart-variation' );
				wp_register_script( 'wc-add-to-cart-variation', get_template_directory_uri() . '/assets/js/add-to-cart-variation.js', array( 'jquery', 'wp-util' ) );
			}
		}

'wc-add-to-cart-variation'   => array(
				'src'     => self::get_asset_url( 'assets/js/frontend/add-to-cart-variation' . $suffix . '.js' ),
				'deps'    => array( 'jquery', 'wp-util', 'jquery-blockui' ),
				'version' => WC_VERSION,
			),

Кому интересно, то все должно было работать, просто я забыл указать вот такую проверку:

$regular_price 	= $product->is_type('variable') ? $product->get_variation_regular_price( 'min', true ) : ( method_exists( $product, 'get_regular_price' ) ? $product->get_regular_price() : $product->regular_price );

И вместо этого:

if ( !$product->get_sale_price() ) {
    if (!$regular_price) {
      $regular_price = $regular_variation_price;
      
      $product->get_price() ? $price .= '<span class="price-original">' . number_format($regular_price, 0, '', ' ') . sprintf( get_woocommerce_currency_symbol() ) . '</span>' : $price .= '<span class="product-original">Цена не указана</span>';
    }

Нужно сделать так:

if ( !$product->get_sale_price() ) {
      $product->get_price() ? $price .= '<span class="price-original">' . number_format($regular_price, 0, '', ' ') . sprintf( get_woocommerce_currency_symbol() ) . '</span>' : $price .= '<span class="product-original">Цена не указана</span>';
} else {
    $price .= '<span class="price-sale">' . number_format($sale_price, 0, '', ' ') . sprintf( get_woocommerce_currency_symbol() ) . '</span><span class="product-sale">' . number_format($regular_price, 0, '', ' ') . sprintf( get_woocommerce_currency_symbol() ) . '</span>';  
  }

Скопируйте к себе скрипт add-to-cart.js

Далее в functions.php его нужно переопределить:

add_action('wp_enqueue_scripts', 'my_function', 10);

function my_function() {
	wp_enqueue_script('wc-add-to-cart', get_template_directory_uri() .'/тут указать путь куда вы скопировали скрипт add-to-cart.js', WC_VERSION, true);
}

И закомментируйте там следующую строчку:

if ( response.error && response.product_url ) {
	window.location = response.product_url;
	return;
}

Если кому-то интересно, то вот решение:

https://codepen.io/Genri_Rus/pen/VwwoLrd

Как вариант Пример
Правда стилизация не совсем идеальная

Если кому-то интересно, то вот решение:

$(function() {
  let click = 0;
	$(document).on('click', 'class/id', function(e) {
		e.preventDefault();
		click++;
		
		if (click > 1) {
			/.../
		}
		return click;
	});
});

Кому интересно, тут и AJAX сделал

<div class="modal-items">
				<?php
					$cart_items = WC()->cart->get_cart();
					foreach( $cart_items as $cart_item_key => $item ) { ?>
					
					<div class="left col-md-3">
					<div class="product-image"><!-- Make sure ot check if it's a gallery, if so, get its first image -->
					<?php echo $item['data']->get_image(); ?>
					</div>
					</div>
					<div class="right col-md-8">
					<h4 class="product-name"><?php echo $item['data']->get_name(); ?></h4>
					<div class="product-information">
					<span class="product-quantity"><?php echo $item['quantity'] . 'x' ?></span>
					<span class="product-price"><?php echo $item['data']->get_price_html(); ?></span>
					</div>
					<?php
					echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf(
					'<a href="%s" aria-label="%s" data-product_id="%s" data-product_sku="%s">X</a>',
					esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
					__( 'Remove this item', 'woocommerce' ),
					esc_attr( $item['product_id'] ),
					esc_attr( $item['data']->get_sku() )
					), $cart_item_key );
					?>
					</div>
					<?php } ?>
				</div>

Далее создаем точно такой же фрагмент в functions.php:

function modal_add_to_cart_fragments( $fragments ) {

    ob_start();

    ?>
	<div class="modal-items">
	<?php
					$cart_items = WC()->cart->get_cart();
					foreach( $cart_items as $cart_item_key => $item ) { ?>
					
					<div class="left col-md-3">
					<div class="product-image"><!-- Make sure ot check if it's a gallery, if so, get its first image -->
					<?php echo $item['data']->get_image(); ?>
					</div>
					</div>
					<div class="right col-md-8">
					<h4 class="product-name"><?php echo $item['data']->get_name(); ?></h4>
					<div class="product-information">
					<span class="product-quantity"><?php echo $item['quantity'] . 'x' ?></span>
					<span class="product-price"><?php echo $item['data']->get_price_html(); ?></span>
					</div>
					<?php
					echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf(
					'<a href="%s" aria-label="%s" data-product_id="%s" data-product_sku="%s">X</a>',
					esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
					__( 'Remove this item', 'woocommerce' ),
					esc_attr( $item['product_id'] ),
					esc_attr( $item['data']->get_sku() )
					), $cart_item_key );
					?>
					</div>
					<?php } ?>
	</div>
    <?php
    $fragments['.modal-items'] = ob_get_clean();
    return $fragments;
}

add_filter( 'woocommerce_add_to_cart_fragments', 'modal_add_to_cart_fragments', 10, 1 );

Если знаете как можно сделать проще, то буду очень Благодарен !