Как сделать single custom product template в Woocommerce

Как сделать single custom product template в Woocommerce

Когда всё уже сделано, понимаешь, как всё просто было. Но тем не менее уникальный шаблон для отдельного продукта в woocommerce когда придётся сделать ещё раз, то снова будешь искать варианты исполнения.

Чтобы такого больше не случилось, я сюда выведу сниппеты и краткую информацию как сделать custom single product.

Делается это основываясь на ID товара. Получить его можно в строке ссылки при наведении на кнопку в верхней панели администратора “Изменить страницу”.

Здесь вам надо в строке 4 поменять ID товара на ваш, а в строке 7 указать название файла с уникальной вёрсткой

Добавляем код в function.php

add_filter( 'wc_get_template_part', 'custom_wc_template_part', 10, 3 );
function custom_wc_template_part( $template, $slug, $name ) {
// The specific product ID
$product_id = 2637;

// The custom template file name
$custom_template_name = 'content-single-product-2637.php';

// For a specific product ID and content-single-product.php template
if( get_the_ID() == $product_id && $slug == 'content' && $name == 'single-product' ){
$template = trailingslashit( get_stylesheet_directory() ) . 'woocommerce/' . $custom_template_name;
}
return $template;
}

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

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

В каталоге темы сайта создаём файл с указанием ID вашего товара: content-single-product-2637.php

Мой файл выглядел так, а ваш, в зависимости от вашей тема сайта, может быть всё совсем иначе. Для вашего примера рекомендую смотреть файл content-single-product.php

<?php
/**
 * The template for displaying product content in the single-product.php template
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/content-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 3.6.0
 */

defined( 'ABSPATH' ) || exit;

global $product;

/**
 * Hook: woocommerce_before_single_product.
 *
 * @hooked wc_print_notices - 10
 */
do_action( 'woocommerce_before_single_product' );

if ( post_password_required() ) {
	echo get_the_password_form(); // WPCS: XSS ok.
	return;
}
?>
<style>
	.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
    float: left;
    width: auto !important;
}
.woocommerce #content div.product div.images img, .woocommerce div.product div.images img, .woocommerce-page #content div.product div.images img, .woocommerce-page div.product div.images img {
    border: 0;
}
.woocommerce .price > .amount:before, .woocommerce-page .price > .amount:before, .price ins > .amount:before {
	content: 'Цена от ';
}
.woocommerce .mynewcss .price > .amount, .woocommerce-page .mynewcss .price > .amount, .mynewcss .price ins > .amount {
    font-size: 40px;
}
</style>
<div id="product-<?php the_ID(); ?>" <?php wc_product_class( '', $product ); ?>>
	<div class="col-md-6 mynewcss">
		<?php
		/**
		 * Hook: woocommerce_before_single_product_summary.
		 *
		 * @hooked woocommerce_show_product_sale_flash - 10
		 * @hooked woocommerce_show_product_images - 20
		 */
		remove_action( 'woocommerce_before_single_product_summary','woocommerce_show_product_images',20 );
		remove_action( 'woocommerce_before_single_product_summary','woocommerce_show_product_sale_flash',10 );
		add_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_price',10 );
		remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_meta',15 );
		add_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_excerpt',20 );
		do_action( 'woocommerce_before_single_product_summary' );
		?>
	</div>

	<div class="col-md-6">
		<?php
		/**
		 * Hook: woocommerce_single_product_summary.
		 *
		 * @hooked woocommerce_template_single_title - 5
		 * @hooked woocommerce_template_single_rating - 10
		 * @hooked woocommerce_template_single_price - 10
		 * @hooked woocommerce_template_single_excerpt - 20
		 * @hooked woocommerce_template_single_add_to_cart - 30
		 * @hooked woocommerce_template_single_meta - 40
		 * @hooked woocommerce_template_single_sharing - 50
		 * @hooked WC_Structured_Data::generate_product_data() - 60
		 */
	remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt',20 );
	remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price',10 );
	remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta',40 );
	add_action( 'woocommerce_single_product_summary','woocommerce_show_product_images',20 );
		do_action( 'woocommerce_single_product_summary' );
		?>
	</div>

	<?php
	/**
	 * Hook: woocommerce_after_single_product_summary.
	 *
	 * @hooked woocommerce_output_product_data_tabs - 10
	 * @hooked woocommerce_upsell_display - 15
	 * @hooked woocommerce_output_related_products - 20
	 */
	do_action( 'woocommerce_after_single_product_summary' );
	?>
</div>

<?php do_action( 'woocommerce_after_single_product' ); ?>

Вот такая вёрстка была изначально:

Такую вёрстку мы показывали клиенту: