Как в карточке товара woocomerce заменить один элемент другим?

Question

[Евгения Сатонина]

Добрый день.
Есть проблема. Пользователь заходя в карточку товара не видит на первом экране кнопку покупки.
Так-же при выборе опций товара, он не видит изменение цены, т.к. оно происходит ниже первого экрана. Нужно нижний блок с кнопкой и ценой поместить наверх, заменив стандартный блок с ценой (которая не меняется при выборе опций). Нагляднее в скринах ниже.
Первый скрин, то как есть сейчас.
Второй скрин, то как нужно сделать.
Подскажите пожалуйста, в каком файле и какие строки нужно поставить на место других ? =)

Answer 1

[Антон Литвиненко]

Нужно не строки менять. Нужно убрать вывод кнопки с того хука на котором она висит и переместить на хук, на котором висит например вывод цены сверху. Остальные манипуляции аналогично
Вот пример
https://www.businessbloomer.com/woocommerce-move-j...

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 15 );

Comments

[Евгения Сатонина]

А в каком файле это делается, и как эти хуки хотя бы примерно выглядят ?

[Антон Литвиненко]

Евгения Сатонина, в functions.php, пример добавил.
В вукоммерс почти все делается через хуки
Посмотрите содержимое файла single-product

[Евгения Сатонина]

В общем покопался, я похоже это не в function.php, а в content-single-product.php
Вот кусок кода, подскажите, как понять какой хук какой блок обозначает, и что значат цифры рядом с каждым хуком 10, 20 и т.д. ?

<div id="product-<?php the_ID(); ?>" <?php wc_product_class( '', $product ); ?>>
	<div class="unero-single-product-detail">
		<div class="container">
			<div class="row">
				<div class="col-md-7 col-sm-12 col-xs-12 product-images-wrapper">
					<?php
					/**
					 * woocommerce_before_single_product_summary hook.
					 *
					 * @hooked woocommerce_show_product_sale_flash - 10
					 * @hooked woocommerce_show_product_images - 20
					 */
					do_action( 'woocommerce_before_single_product_summary' );
					?>
				</div>
				<div class="col-md-4 col-sm-12 col-xs-12 col-md-offset-1 product-summary">
					<div class="summary entry-summary">

						<?php
						/**
						 * woocommerce_single_product_summary hook.
						 *
						 * @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
						 */
						do_action( 'woocommerce_single_product_summary' );
						?>

					</div>
				</div>
			</div>
		</div>
		<!-- .summary -->
	</div>
	<div class="container">
		<?php
		/**
		 * woocommerce_after_single_product_summary hook.
		 *
		 * @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' );
		?>

		<meta itemprop="url" content="<?php the_permalink(); ?>" />
	</div>

</div><!-- #product-<?php the_ID(); ?> -->
<div class="container">
	<?php do_action( 'woocommerce_after_single_product' ); ?>
</div>

[Антон Литвиненко]

Евгения Сатонина, например вот это хук
do_action( 'woocommerce_single_product_summary' );
на нем подвешено 7 функций. цыфры это приоритет исполнения функций - чем выше тем позже.
вообще это в двух словах не обьяснить, возможно это видео поможет
https://www.youtube.com/watch?v=IRxOu5XZh2s&t=8s
В вашем случае код будет похож на этот

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 15 );

тоесть всего лишь перенос кнопки купить над описание
быстрее всего что перенесет вместе с вариациями, так как они часть функционала блока добавить в корзину

[Евгения Сатонина]

Антон Литвиненко, То есть эти две строки нужно дописать в этот файл ? (Я просто совсем в програмировании не бум-бум...) =)

[Антон Литвиненко]

Евгения Сатонина, в functions.php
я никогда не мог понять, каким образом людям, далеким от темы, попадают подобные задачи...

[Евгения Сатонина]

Антон Литвиненко, объясню.
Это мой второй самостоятельный проект. Интернет магазин мебели.
Первый был свадебный портал. Так вот первый делался долго, и чужими силами. Привлекались дизайнеры и программисты. На тот момент у меня уже была хорошая экспертиза в подборе персонала, но даже в моём случае, один дизайнер умудрился кинуть (взял предоплату, сделал главную страницу, и пропал. А должен был сделать 6 страниц.). Программистов на проекте меняли 4 раза. В итоге сайт встал мне в 6000$, и к моменту запуска уже был не актуален. В общем я просрал много (по моим меркам) денег, и много времени. Выхлоп получился нулевой.
В этот раз проект по проще. Интернет магазин мебели. Веду его полностью сам, привлекаю прогеров только на локальные, сложные задаче, в которых сам разобраться не могу. Сайт продуктивно работает, но я периодически что-то в нём допиливаю. Вот типа этой задачи. Я мог бы привлечь прогера, но для него это 5 минут работы, а оплатить я должен буду около $20 ... Проще спросить, возможно кто-то подскажет, и если это не сложно, то возможно получится разобраться и сделать.
как-то так.

[Антон Литвиненко]

Евгения Сатонина, для того, чтобы потом поменять местами кнопку и вариации нужно будет в стили добавить такой код

.woocommerce div.product form.cart {
	display: flex;
	flex-direction: column;
}

.single_variation_wrap {
	order: -1;
}

[Евгения Сатонина]

Антон Литвиненко,

Не сработало... Или нужно было это вписать НЕ в любое место ?

[Антон Литвиненко]

Евгения Сатонина, вообще без разницы, но я бы наверно писал в тот файл, который на скрине ниже (woocommerce.php). а еще желательно исключить из возможных причин существование в корне темы файла woocommerce.php
Попробуй для начала только ремув экшн. если кнопка не пропадет, значит с ней уже поработали и надо найти это место

[Евгения Сатонина]

Антон Литвиненко, В стили тоже закинул, по нулям... =(

[Антон Литвиненко]

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

[Евгения Сатонина]

Антон Литвиненко, Вроде получилось, но корявенько. Верхняя цена осталась. Под ней появилась вариантивная цена +кнопка. =) Как теперь убрать первую цену ?

[Антон Литвиненко]

Евгения Сатонина, можно через ремув экшн