Пример шаблона карточки товара на WooCommerce

За отображение карточки товара в WooCommerce отвечает файл "single-product.php" расположенный в корне вашей темы в папке "woocommerce".

single-product.php

<?php
/**
 * The Template for displaying all single products
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see         https://docs.woocommerce.com/document/template-structure/
 * @package     WooCommerce\Templates
 * @version     1.6.4
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

get_header(); ?>





	<div class="uk-page-001">
		<div class="uk-page-001-content uk-margin-auto">
			<div class="uk-page-001-bannerblock uk-flex uk-flex-column uk-flex-between" style="background-image: url(/wp-content/themes/dostavkaelki/assets/images/mainfon_page.jpg);">
			<div class="uk-page-001-title">
			<?$title_text = get_field('title_text');?>
			<h1 class="uk-page-001-title-maintext"><?=$title_text;?></h1>
			</div>
            <img class="uk-page-001-title-img uk-single-page-title-img" src="<?the_post_thumbnail_url();?>" alt="<?php single_post_title(); ?>" uk-img>
			</div>
		</div>
	</div>





    <div class="uk-page-004">
		<div class="uk-page-004-content uk-margin-auto uk-flex uk-flex-column">
				<?$title_text = get_field('title_text');?>
                <p class="uk-page-004-maintext"><?=$title_text;?></p>
				<? $price = get_post_meta( get_the_ID(), '_regular_price', true); ?>
                <p class="uk-page-004-price"><? echo $price; ?>.00р.</p>
                <div class="uk-page-004-linkcart uk-flex uk-flex-center">
				<p class="hidden_id"><?php echo wc_get_product()->get_id(); ?></p>	
                <a class="uk-page-004-linkcart-lnk cart_add">
                    В КОРЗИНУ
                </a>
                </div>
			
				<div class="uk-page-004-gallery uk-grid-small" uk-grid>
				<?php 
				$attachment_ids = wc_get_product()->get_gallery_image_ids();
				foreach ( $attachment_ids as $attachment_id ) {
				?>
				<div class="uk-width-1-3@s uk-width-1-1">
					<img class="uk-page-004-img" src="<?php echo wp_get_attachment_url( $attachment_id ); ?>" alt="" uk-img>
				</div>	
				<?php 
				}
				?>
				</div>
        </div>
    </div>





    <div class="uk-page-003">
		<div class="uk-page-003-content uk-margin-auto uk-flex">
            <div class="uk-page-003-accordion">
                <ul uk-accordion>
                    <li class="uk-open">
                        <a class="uk-accordion-title" href="#">Описание товара</a>
                        <div class="uk-accordion-content">
                        <?php the_post(); the_content(); ?>
                        </div>
                    </li>
                    <li>
                        <a class="uk-accordion-title" href="#">Информация о доставке</a>
                        <div class="uk-accordion-content">
                        <?php
						$post = get_post(108);
						setup_postdata($post);
						the_content();
						wp_reset_postdata();
						?>
                        </div>
                    </li>
                    <li>
                        <a class="uk-accordion-title" href="#">Пора покупать ёлку</a>
                        <div class="uk-accordion-content">
                        <?php
						$post = get_post(114);
						setup_postdata($post);
						the_content();
						wp_reset_postdata();
						?>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>





    <div class="uk-002">
		<div class="uk-002-content uk-margin-auto">
            <p class="uk-002-maintext">К ЭТОЙ ЁЛОЧКЕ ПОКУПАЮТ</p>
			<div class="uk-002-items uk-grid-medium uk-flex-center" uk-grid>

			    <div class="uk-002-items-itm uk-width-1-2@s uk-width-1-1">
			    	<a class="uk-002-items-itm-link" href="">
			    	<img class="uk-002-items-itm-link-img" src="/wp-content/themes/dostavkaelki/assets/images/product006.jpg" alt="" uk-img>
			    	</a>
			    </div>

			    <div class="uk-002-items-itm uk-width-1-2@s uk-width-1-1">
			    	<a class="uk-002-items-itm-link" href="">
			    	<img class="uk-002-items-itm-link-img" src="/wp-content/themes/dostavkaelki/assets/images/product007.jpg" alt="" uk-img>
			    	</a>
			    </div>

			</div>
		</div>
	</div>





    <div class="uk-separator"></div>





<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>    
  	$('.cart_add').click(function() {
	console.log ('Кликнули по кнопке купить');
	let $idtovar =$(this).parent().find('.hidden_id').text();
	console.log ($idtovar);
		
	var data = {
	action: 'call',
	idtovar: $idtovar
	};
	jQuery.post('/wp-admin/admin-ajax.php', data);
		
	$("#cartblock").load("'' #cartblock");
	$("#cartblock").load("'' #cartblock");
	//alert("Товар добавлен в корзину");
	$('p.uk-header2-navbar-link-cartinfotxt').addClass('uk-info_opacity');
	setTimeout(function(){
	$('p.uk-header2-navbar-link-cartinfotxt').removeClass('uk-info_opacity');
	}, 3000);
	});
</script>	





<?php
get_footer();

/* Omit closing PHP tag at the end of PHP files to avoid "headers already sent" issues. */