В нужном месте нам нужно вставить код.
Первый пример более сложный, в нем уже сделано все для отображения и добавления в корзину.
Второй пример базовый, самое начало.
Третий пример обработанный второй пример.
Пример 1 - RussianWool
<div class="container-002">
<div class="container-002-content">
<p class="container-002__maintext">ХИТЫ ПРОДАЖ</p>
<div id="carousel-one" class="container-002__items owl-carousel owl-theme">
<?php
$args = array(
'post_type' => 'product',
'showposts' => '7',
'orderby' => 'rand',
'post__in' => wc_get_featured_product_ids(),
);
$query = new WP_Query( $args );
while ( $query -> have_posts() ) {
$query -> the_post();
?>
<!--НАЧАЛО ОДНОГО ЭЛЕМЕНТА ДЛЯ КАРУСЕЛИ В ТОВАРАХ-->
<div class="container-002__items-itm">
<a class="container-002__items-itm-linkimg" href="<?php echo esc_url(get_the_permalink());?>">
<img class="container-002__items-itm-linkimg-img" src="<?the_post_thumbnail_url();?>" alt="<?the_title();?>">
</a>
<a class="container-002__items-itm-linktext" href="<?php echo esc_url(get_the_permalink());?>"><?the_title();?></a>
<p class="container-002__items-itm-description">
<?php
$maxchar = 100;
$text = strip_tags( get_the_content() );
echo mb_substr( $text, 0, $maxchar ) . "...";
?>
</p>
<?$rating = get_field('rating');?>
<p class="container-002__items-itm-stars"><?=$rating;?></p>
<?php
if (get_post_meta(get_the_ID(), '_stock_status', true) == 'outofstock') {
echo '<p class="container-002__items-itm-onsklad">Доступность: <span>Нет в наличии</span></p>';
} else {
echo '<p class="container-002__items-itm-onsklad">Доступность: <span>В наличии</span></p>';
}
?>
<p class="container-002__items-itm-text">размер*</p>
<?php
global $product;
if ($product->is_type( 'variable' ))
{
$args = array(
'post_type' => 'product_variation',
'post_status' => array( 'private', 'publish' ),
'numberposts' => -1,
'orderby' => 'menu_order',
'order' => 'ASC',
'post_parent' => get_the_ID() // get parent post-ID
);
$variations = get_posts( $args );
$select_ID = $product->get_id();
?>
<select id="sizeoncard" class="size_select<? echo $select_ID; ?>" name="size_select">
<?php
foreach ( $variations as $variation ) {
// get variation ID
$variation_ID = $variation->ID;
// get variations meta
$product_variation = new WC_Product_Variation( $variation_ID );
// get variation price
$variation_price = $product_variation->get_price_html();
//get variation name
$variation_name = $product_variation->get_variation_attributes();
if ( $variation_name [ 'attribute_pa_razmer' ] ) {
?>
<option value="<? echo $variation_ID; ?>"><? echo $variation_name [ 'attribute_pa_razmer' ]; ?></option>
<?php
}}}
?>
</select>
<p class="hidden_id"><?php echo $product->get_id(); ?></p>
<p class="container-002__items-itm-price"><? echo $product->get_variation_price();?> р.</p>
<div class="container-002__items-itm-button">
<input type="number" name="count" id="product_count" class="form-control" value="1">
<a class="container-002__items-itm-linkcart cart_add<? echo $variation_ID; ?>">
<i class="fa-solid fa-cart-shopping"></i> В КОРЗИНУ
</a>
<p id="rec_cart_info<? echo $variation_ID; ?>" class="container-002__items-itm-button-cartinfotxt">
Товар добавлен в корзину
</p>
</div>
<script>
$('.cart_add<? echo $variation_ID; ?>').click(function() {
var $idtovar = $(this).parent().parent().find('#sizeoncard').val();
var $counttovar = $(this).parent().find('#product_count').val();
console.log ($idtovar);
console.log ($counttovar);
var data = {
action: 'call',
idtovar: $idtovar,
counttovar: $counttovar
};
jQuery.post('/wp-admin/admin-ajax.php', data);
$("#cartblock").load("'' #cartblock");
$("#cartblock").load("'' #cartblock");
//alert("Товар добавлен в корзину");
$('#rec_cart_info<? echo $variation_ID; ?>').addClass('cartinfo_opacity');
setTimeout(function(){
$('#rec_cart_info<? echo $variation_ID; ?>').removeClass('cartinfo_opacity');
}, 3000);
});
</script>
</div>
<!--КОНЕЦ ОДНОГО ЭЛЕМЕНТА ДЛЯ КАРУСЕЛИ В ТОВАРАХ-->
<?php
};
wp_reset_postdata();
?>
</div>
</div>
</div>
Пример 2 - MieleMos базовый
<div class="container-003">
<div class="container-003-content">
<p class="container-003__title">Новинки техники <span>Miele</span></p>
<div class="container-003__items">
<?php
$args = array(
'post_type' => 'product',
'showposts' => '7',
'orderby' => 'rand',
'post__in' => wc_get_featured_product_ids(),
);
$query = new WP_Query( $args );
while ( $query -> have_posts() ) {
$query -> the_post();
?>
<div class="container-003__items-itm">
<div class="container-003__items-itm-image">
<img class="container-003__items-itm-image-img" src="/wp-content/themes/mielemos/assets/images/new_product_001.jpg" alt="">
</div>
<div class="container-003__items-itm-title">
<p class="container-003__items-itm-title-txt">Сушильная машина<br>MIELE TCA220WP<br>Crome Edition</p>
</div>
<div class="container-003__items-itm-price">
<p class="container-003__items-itm-price-txt">234 000</p>
</div>
<div class="container-003__items-itm-options">
<p class="container-003__items-itm-options-txt">Кол-во программ сушки: 12</p>
<p class="container-003__items-itm-options-txt">Загрузка при сушке: 7 кг</p>
<p class="container-003__items-itm-options-txt">FragranceDos: Да</p>
<p class="container-003__items-itm-options-txt">SteamFinish: Нет</p>
<p class="container-003__items-itm-options-txt">Тип управления: Механическое</p>
<p class="container-003__items-itm-options-txt">Русский язык: Да</p>
<p class="container-003__items-itm-options-txt">Гарантия: 2 года</p>
<p class="container-003__items-itm-options-txt">Производство: Чехия</p>
<img class="container-003__items-itm-options-img" src="/wp-content/themes/mielemos/assets/images/flag.png" alt="">
</div>
<div class="container-003__items-itm-links">
<a class="container-003__items-itm-links-lnkbuy" href="">Купить</a>
<a class="container-003__items-itm-links-lnkmore" href="<?php echo esc_url(get_the_permalink());?>">Подробнее</a>
</div>
<img class="container-003__items-itm-newlogo" src="/wp-content/themes/mielemos/assets/images/logo_new.png" alt="">
</div>
<?php
};
wp_reset_postdata();
?>
</div>
</div>
</div>
Пример 2 - MieleMos обработанный
В РАЗРАБОТКЕ