Текст описания в разработке.
1. Добавить код в Function.php
Замените ChatID и Toket на свои.
// Доп опции и кнопка "Оформить заказ"
add_action('woocommerce_simple_add_to_cart', 'add_custom_options_dropdown');
function add_custom_options_dropdown() {
global $product;
// Проверяем, что товар в категории "detskie-domiki"
if (has_term('detskie-domiki', 'product_cat', $product->get_id())) {
echo '
<div class="pricetotal" style="display: flex; flex-direction: row; align-content: center; flex-wrap: nowrap;">
<span style="margin-right: 5px;">Цена с доп.опциями:</span>
<span class="price2">без доп. опций</span>
</div>
<div class="custom_optional" style="display: flex; flex-direction: column; align-items: stretch;">
<select id="custom-matras" name="custom_matras">
<option value="0">Добавить матрас</option>
<option value="3500">Матрас на спальное место (180х80х5см) (+3500 руб)</option>
<option value="2500">Матрас на сундук (100х40х5см) (+2500 руб)</option>
</select>
<select id="custom-pol" name="custom_pol">
<option value="0">Добавить половую доску</option>
<option value="7000">Половая доска шпунтованная (+7000 руб)</option>
</select>
<select id="custom-potolok" name="custom_potolok">
<option value="0">Добавить потолок</option>
<option value="6000">Потолок из вагонки (+6000 руб)</option>
</select>
<select id="custom-sunduk" name="custom_sunduk">
<option value="0">Добавить сундук</option>
<option value="7000">Сундук деревянный (100х40х35см) (+7000 руб)</option>
</select>
</div>
<button id="open-order-form" style="margin-top: 15px; padding: 10px 15px; background: #72a414; color: white; border: solid 2px #6f9d18; border-radius: 5px; cursor: pointer;">Оформить заказ</button>
';
}
}
// Добавляем модальное окно с формой заказа и скрипт расчета стоимости
add_action('wp_footer', 'add_custom_script');
function add_custom_script() {
if (is_product()) {
global $product;
$product_name = $product->get_name();
$product_price = $product->get_price();
?>
<div id="order-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); justify-content: center; align-items: center;">
<div style="background: white; padding: 20px; width: 300px; border-radius: 5px;">
<h3>Оформление заказа</h3>
<input type="text" id="customer-name" placeholder="Ваше имя" style="width: 100%; margin-bottom: 10px; padding: 5px;">
<input type="tel" id="customer-phone" placeholder="Ваш телефон" style="width: 100%; margin-bottom: 10px; padding: 5px;">
<input type="checkbox" id="privacy-policy" checked> <label for="privacy-policy">Принимаю <a href="/privacy-policy" target="_blank">политику конфиденциальности</a></label>
<button id="send-order" style="width: 100%; padding: 10px; background: #72a414; color: white; border: none; cursor: pointer;">Отправить</button>
<button id="close-modal" style="width: 100%; padding: 10px; margin-top: 5px; background: #ccc; border: none; cursor: pointer;">Закрыть</button>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
function updateTotalPrice() {
var matrasPrice = parseInt($('#custom-matras').val()) || 0;
var polPrice = parseInt($('#custom-pol').val()) || 0;
var potolokPrice = parseInt($('#custom-potolok').val()) || 0;
var sundukPrice = parseInt($('#custom-sunduk').val()) || 0;
var productPrice = <?= $product_price; ?>;
var totalPrice = productPrice + matrasPrice + polPrice + potolokPrice + sundukPrice;
$('.price2').text(totalPrice.toFixed(0) + ' руб');
}
$('#custom-matras, #custom-pol, #custom-potolok, #custom-sunduk').change(updateTotalPrice);
updateTotalPrice();
$('#open-order-form').click(function() {
$('#order-modal').fadeIn();
});
$('#close-modal').click(function() {
$('#order-modal').fadeOut();
});
$('#send-order').click(function() {
var name = $('#customer-name').val().trim();
var phone = $('#customer-phone').val().trim();
var privacyChecked = $('#privacy-policy').prop('checked');
if (name == "" || phone == "") {
alert("Введите имя и телефон!");
return;
}
if (!privacyChecked) {
alert("Необходимо принять политику конфиденциальности!");
return;
}
if (!/^+7d{10}$/.test(phone)) {
alert("Введите телефон в формате +7XXXXXXXXXX");
return;
}
var options = [];
$('#custom-matras option:selected, #custom-pol option:selected, #custom-potolok option:selected, #custom-sunduk option:selected').each(function() {
if ($(this).val() != "0") {
options.push($(this).text());
}
});
var productPrice = <?= $product_price; ?>;
var totalPrice = $('.price2').text();
var productName = "<?= $product_name; ?>";
var productLink = window.location.href;
var message = " *Новый заказ!* nn";
message += " *Имя:* " + name + "n";
message += " *Телефон:* " + phone + "nn";
message += " *Товар:* " + productName + "n";
message += " *Цена:* " + productPrice + ' руб' + "nn";
if (options.length > 0) {
message += "➕ *Доп. опции:* n" + options.join("n") + "nn";
message += " *Цена с допами:* " + totalPrice + "nn";
}
message += " *Ссылка:* " + productLink;
$.ajax({
url: "https://api.telegram.org/bot6083362674:AAFod4g-fnXb5pTQYD8Bk3kN5T3Elqq7d3I/sendMessage",
method: "POST",
data: {
chat_id: "5443828488",
text: message,
parse_mode: "Markdown"
},
success: function(response) {
alert("Заказ успешно отправлен!");
$('#order-modal').fadeOut();
},
error: function() {
alert("Ошибка при отправке заказа!");
}
});
});
});
</script>
<?php
}
}
</code>
2. Добавляем в таблицу стилей.
<code>
#order-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
#order-modal > div {
background: white;
padding: 20px;
width: 300px;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.custom_optional select {
-webkit-appearance: none; /* Убираем стандартный стиль iOS */
-moz-appearance: none; /* Убираем стандартный стиль Firefox */
appearance: none; /* Убираем стандартный стиль */
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: white;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg viewBox='0 0 4 5'%3E%3Cpath fill='%23000' d='M2 0L0 2h4zM2 5l2-2H0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
cursor: pointer;
}
/* Для Safari (iOS) */
.custom_optional select::-ms-expand {
display: none;
}
/* Добавляем отступы между списками */
.custom_optional select:not(:last-child) {
margin-bottom: 10px;
}
.custom_optional select {
-webkit-appearance: none; /* Убираем стандартный стиль iOS */
-moz-appearance: none; /* Убираем стандартный стиль Firefox */
appearance: none; /* Убираем стандартный стиль */
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: white;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg viewBox='0 0 4 5'%3E%3Cpath fill='%23000' d='M2 0L0 2h4zM2 5l2-2H0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
cursor: pointer;
}
/* Для Safari (iOS) */
.custom_optional select::-ms-expand {
display: none;
}
@media (max-width: 480px) {
#open-order-form {
width: 100%;
}
© SALAKHIEV.RU, 2026
Вся информация, размещённая на сайте salakhiev.ru, предназначена исключительно для ознакомления и не может рассматриваться как руководство к действию, гарантия результата или техническая рекомендация. Администрация сайта не несёт ответственности за возможные убытки или иные последствия, вызванные использованием представленных материалов. Пользователь принимает на себя все риски, связанные с применением информации, размещённой на данном ресурсе. Политика конфиденциальности здесь.