Когда всё уже сделано, понимаешь, как всё просто было. Но тем не менее уникальный шаблон для отдельного продукта в 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' ); ?>
Вот такая вёрстка была изначально:
Такую вёрстку мы показывали клиенту: