Как карточку товара Woocommerce поделить на три колонки?

Доброго времени суток всем! Вопрос в этот раз чертовски специфический и никак не дает мне покоя, каким образом лучше всего поделить расстояние между колонками в карточке товаров, чтобы появилась еще одна третья колонка? 5cc49ca7b9887225123234.png

Посмотреть можно здесь
Сайт
Суть в том, чтобы создать еще одну колонку, с которой можно было бы потом работать
  • Вопрос задан
  • 616 просмотров
Решения вопроса 1
devellopah
@devellopah
тебе нужно переопределить 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;
}
?>
<div id="product-<?php the_ID(); ?>" <?php wc_product_class( '', $product ); ?>>

	<div class="container">
		<div class="row">

			<!-- это галерея что слева -->
			<div class="col-lg-6">
				<?php
				/**
				 * Hook: woocommerce_before_single_product_summary.
				 *
				 * @hooked woocommerce_show_product_sale_flash - 10
				 * @hooked woocommerce_show_product_images - 20
				 */
				do_action( 'woocommerce_before_single_product_summary' );
				?>		
			
			</div>

			<!-- это summary товара -->
			<div class="col-lg-3">
				<div class="summary entry-summary">
					<?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
					 */
					do_action( 'woocommerce_single_product_summary' );
					?>
				</div>
			</div>

			<!-- здесь будет содержимое третьей колонки -->
			<div class="col-lg-3">
			
			</div>

		</div>
	</div>

	<!-- это уже табы, кросселы и апселы -->
	<div class="container">
	
		<?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>
</div>

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

p.s. в примере использована сетка из bs4
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Загляните в шаблон "wp-content/plugins/woocommerce/templates/content-single-product.php" или если он у Вас переопределен в Вашей теме, тогда "wp-content/themes/Ваша-тема/woocommerce/content-single-product.php"
Там прописаны основные теги разметки карточки товара
Если он переопределен, то там и можно править, иначе можете подключиться к какому-то из хуков и добавить свой с содержимым.
Правда придется переписать все основные стили.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы