Специфический раздел товаров

Создадим специфический раздел товаров, который отличается от основного и версткой и частично функционал. Предположим что компания занимается продажей товаров, но при это проводит платные семинары по работе с товарами компании. Так вот создадим раздел по продаже семинаров.

Отдельный (особый) шаблон категории

В файле .woocommerce внутри темы, в условиях:

<?php if ( is_product() ) : ?>
<?php elseif ( is_shop() ) : ?>
<?php else: ?>

	<?php if ( is_product_category( 'education' ) ) : ?>
		<?php get_template_part( 'woocommerce/content-product-cat-edu' ); ?>
	<?php else: ?>		   

	<?php endif; ?> 
<?php endif; ?>

в категории education выводим шаблон content-product-cat-edu.php

Содержимое шаблона:

<h2>Офлайн курсы</h2>
<div class="edu-products">

<?php $args['post_type'] = 'product';
$args['posts_per_page'] = -1;
$args['orderby'] = 'menu_order';
$args['product_cat'] = 'offline';
query_posts( $args );
if(have_posts()) :
while(have_posts()) : the_post();
	global $product;
	echo '<div class="edu-product">';
	
		echo '<div class="edu-product-date">';
		echo '<div class="edu-date">'.get_post_meta( $product->get_id(), 'event_date_field', 1 ).'</div>';
		echo '<div class="edu-time">'.get_post_meta( $product->get_id(), 'event_time_field', 1 ).'</div>';
		echo '<div class="edu-place">'.$product->get_attribute( 'place' ).'</div>';
		echo '</div>';
		
		echo '<div class="edu-product-info">';
		echo '<h3>'.get_the_title().'</h3>';
		echo wpautop( $product->get_short_description() );
		echo '</div>';

		echo '<div class="edu-product-buy">';
		echo '<div class="edu-price">'.$product->get_price_html().'</div>';
		
		if( WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( get_the_ID() ) ) ) {
			echo '<a class="button" href="/checkout/">Оформить заказ</a>';
		} else {
			echo '<a href="'.$product->add_to_cart_url().'" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="'.$product->get_id().'" rel="nofollow">Записаться</a>';				
		}
		
		echo '</div>';
		
	echo '</div>';
endwhile; endif; wp_reset_query(); ?>

</div>

Следом можно вывести еще одну подкатегорию (например $args[‘product_cat’] = ‘online’; )

Стили шаблона:

.edu-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}

.edu-product:last-child {
	border-bottom: 0;
}

.edu-product > * {
    padding: 0 30px;
}

.edu-product-date {
    min-width: 255px;
}
	
.edu-product-date .edu-date, .edu-product-date .edu-time {
    white-space: nowrap;
}	

.edu-date {
    color: #ec1002;
}

.edu-place {
    margin-top: 15px;
}

.edu-product-info p:not(:last-child) {
    margin-bottom: 15px;
}

.edu-product-buy {
    margin-left: auto;
    text-align: right;
}

.edu-price {
    margin-bottom: 15px;
    font-size: 1.4rem;
}

.edu-product-buy a {
    display: inline-block;
    white-space: nowrap;
    background: #ec1002;
}

.edu-product-buy a.added_to_cart.wc-forward {display: none;}

@media screen and (max-device-width: 800px) { 	
    .edu-product {flex-wrap: wrap;}
}

Дополнительные скрипты шаблона

Изменение кнопки Купить при клике на кнопку Оформить заказ:

jQuery(document).ready(function($){
	$('.edu-product .product_type_simple').on('click', function(){
		$(this).hide();
		$(this).after('<a class="button" href="/checkout/">Оформить заказ</a>');
	});
});

А у семинаров которые уже в корзине, при обновлении страницы, кнопка «Оформить заказ» будет выводится автоматически.

Поделиться в соц. сетях: