• Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!

Решено Развернуть/свернуть контент по клику

Image CMS

ОАА

Опытный
Местный
#1
Здравствуйте!

Магазин здесь.

Необходимо изменить страницу о формировании заказа. Уже полотно получается - много информации и я еще добавить должна.
Хочу что бы контент разворачивался по клику. Вот нашла информацию. Но как ее использовать?

Заранее спасибо за разъяснение:)
 

ОАА

Опытный
Местный
#2
Здравствуйте!

Магазин здесь.

Необходимо изменить страницу о формировании заказа. Уже полотно получается - много информации и я еще добавить должна.
Хочу что бы контент разворачивался по клику. Вот нашла информацию. Но как ее использовать?

Заранее спасибо за разъяснение:)
Я попробовала вписать в страницу следующее:

Код:
<script src="jquery-1.7.2.js"></script>
<style>
.extremum-slide {
    border:1px solid;
    padding:50px;
}
</style>
</head>
<body>
<div class="block">
    <h3 class="extremum-click">Особенности доставки товаров</h3>
    <div class="extremum-slide">
    <span style="color: #000000;">В интернет-магазине "Душа Дома" представлены два типа товаров:</span>
        <ul style="text-align: justify;">
     <li><span style="color: #000000;">товары ТК - доставка возможна только</span> <a href="http://dusha-domy.ru/oplata-i-dostavka/transportnaya-kompaniya/">транспортной компанией</a>. <span style="color: #000000;">Доставка осуществляется напрямую со склада поставщика;</span></li>
     <li style="text-align: justify;"><span style="color: #000000;">прочие товары - доставка</span> <a href="http://dusha-domy.ru/oplata-i-dostavka/">любым удобным способом</a>.</li>
        </ul>
        <p style="text-align: justify;"><span style="color: #000000;">Доставка товаров может занимать некоторое время, например, при заказе мебели по индивидуальным размерам. Поэтому при просмотре каталога товаров предлагаем Вам использовать <a href="http://dusha-domy.ru/wishlist/">Список желаний</a>. Таким образом Вы подберете все, что хотите и далее из списка отобранных товаров сможете оформить разные заказы с выбором способа доставки для каждого типа товаров отдельно.</span></p>
    </div>
</div>
<div class="block">
    <h3 class="extremum-click">Дополнительные опции и варианты дизайна</h3>
    <div class="extremum-slide">
    <span style="color: #000000;">У многих товаров доступны дополнительные опции и варианты дизайна. Используйте соответствующие кнопки на странице просмотра товара, если они доступны.</span>

<img class="alignnone wp-image-4410 size-full" src="https://dusha-domy.ru/wp-content/uploads/2016/05/knopka-dop.optsii.jpg" alt="кнопка доп.опции" width="386" height="62" />        <img class="alignnone wp-image-4411 size-full" src="https://dusha-domy.ru/wp-content/uploads/2016/05/knopka-drugoj-dizajn.jpg" alt="кнопка другой дизайн" width="385" height="62" />
<h6></h6>
    </div>
</div>
<div class="block">
    <h3 class="extremum-click">Дизайн под заказ</h3>
    <div class="extremum-slide">
    В нашем интернет-магазине кроме дополнительных опций и вариантов дизайна есть возможность заказать свой дизайн. На странице просмотра таких товаров товаров используйте соответствующую кнопку.

<img class="alignnone wp-image-4412 size-full" src="https://dusha-domy.ru/wp-content/uploads/2016/05/Knopka-zakazat-svoj-dizajn.jpg" alt="Кнопка заказать свой дизайн" width="394" height="70" />

Кнопка доступна, если выбран вариант исполнения "Свой дизайн"  <img class="alignnone size-full wp-image-4413" src="https://dusha-domy.ru/wp-content/uploads/2016/05/Variant-ispolneniya-svoj-dizajn.jpg" alt="Вариант исполнения свой дизайн" width="81" height="84" />

В меню индивидуального дизайна необходимо выбрать опции и добавить товар в корзину обычным способом. При оформлении заказа среди платежей необходимо выбрать "Запрос стоимости индивидуального дизайна".

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

Просмотреть текущее состояние заказа Вы можете в Личном кабинете в разделе Заказы.

После окончания расчета стоимости Вам необходимо выбрать удобный способ оплаты в личном кабинете в разделе Заказы.
<h6><strong>Внимание: </strong></h6>
Покупатель несет ответственность за выбор характеристик при изготовлении Товара под заказ. Выбор характеристик считается окончательным после оформления заказа на сайте.

Изменение характеристик возможно только в том случае, если заказ еще не отправлен на изготовление.

Изменение характеристик Товара находящегося в процессе изготовления влечет к увеличению стоимости Заказа. Покупатель обязан возместить сумму, на которую увеличена стоимость Заказа в результате изменения характеристик Товара.

При возникновении вопросов Вы можете связаться с нами <a href="http://dusha-domy.ru/kontakty/">любым удобным способом</a>.
    </div>
</div>
<script>
    $(".extremum-click").click(function () {
      $(this).siblings(".extremum-slide").slideToggle("slow");
    });
</script>
Появились рамочки. "Клики" не работают:(



Чего-то я упускаю....
 

ОАА

Опытный
Местный
#3
Я хочу в идеале повторить как сделаны доп. варианты дизайна на карточке товара, например здесь.
Через гугл вырезала код:
Код:
<div data-epo-id="1" data-cart-id="main" data-product-id="4363" class="tc-extra-product-options tm-extra-product-options tm-custom-prices tc-clearfix tm-product-id-4363 tm-cart-main tc-show" id="tm-extra-product-options" style="opacity: 1;">
    <div class="tm-extra-product-options-inner">
        <ul id="tm-extra-product-options-fields" class="tm-extra-product-options-fields">                            <li id="tm-epo-field-0" class="tm-extra-product-options-field nopadding"><div data-uniqid="5763e92f4cc555.27268943" data-logic="" data-haslogic="" class="cpf-section tm-row tm-cell col-12 ">
<div class="tm-collapse"><h5 class="tm-epo-field-label tm-section-label tm-toggle">Другой дизайн<span class="tcfa tm-arrow tcfa-angle-down"></span></h5><div class="tm-collapse-wrap closed" style="display: none;"><div data-uniqid="5763e9384cc564.19915700" data-logic="" data-haslogic="" data-fblabelshow="" data-fbvalueshow="" class="cpf_hide_element tm-cell col-12 cpf-type-radio">
<label style="color:#080808" class="tm-epo-field-label">Вы можете выбрать иное цветовое решение:</label>    <div class="tm-extra-product-options-container">
        <ul data-rules="{&quot;\u0414\u0443\u0431 \u041c\u043b\u0435\u0447\u043d\u044b\u0439_0&quot;:[&quot;&quot;],&quot;\u0412\u0435\u043d\u0433\u0435_1&quot;:[&quot;&quot;],&quot;\u041e\u043b\u044c\u0445\u0430_2&quot;:[&quot;&quot;],&quot;\u041b\u0430\u0439\u043c_3&quot;:[&quot;&quot;],&quot;\u041e\u0440\u0430\u043d\u0436\u0435\u0432\u044b\u0439_4&quot;:[&quot;&quot;]}" data-original-rules="{&quot;\u0414\u0443\u0431 \u041c\u043b\u0435\u0447\u043d\u044b\u0439_0&quot;:[&quot;&quot;],&quot;\u0412\u0435\u043d\u0433\u0435_1&quot;:[&quot;&quot;],&quot;\u041e\u043b\u044c\u0445\u0430_2&quot;:[&quot;&quot;],&quot;\u041b\u0430\u0439\u043c_3&quot;:[&quot;&quot;],&quot;\u041e\u0440\u0430\u043d\u0436\u0435\u0432\u044b\u0439_4&quot;:[&quot;&quot;]}" data-rulestype="{&quot;\u0414\u0443\u0431 \u041c\u043b\u0435\u0447\u043d\u044b\u0439_0&quot;:[&quot;&quot;],&quot;\u0412\u0435\u043d\u0433\u0435_1&quot;:[&quot;&quot;],&quot;\u041e\u043b\u044c\u0445\u0430_2&quot;:[&quot;&quot;],&quot;\u041b\u0430\u0439\u043c_3&quot;:[&quot;&quot;],&quot;\u041e\u0440\u0430\u043d\u0436\u0435\u0432\u044b\u0439_4&quot;:[&quot;&quot;]}" data-tm-validation="[]" class="tmcp-ul-wrap tmcp-elements tm-extra-product-options-radio tm-element-ul-radio element_0 use_images_containter">
<li class="tmcp-field-wrap tm-per-row">
            <input class="tmcp-field tm-epo-field tmcp-radio use_images" name="tmcp_radio_0" data-price="" data-rules="[&quot;&quot;]" data-original-rules="[&quot;&quot;]" data-rulestype="[&quot;&quot;]" data-image="https://dusha-domy.ru/wp-content/uploads/2016/06/Dub-Mlechnyj.jpg" data-imagep="" data-imagel="" value="Дуб Млечный_0" id="tmcp_choice_0_0_1" tabindex="1" type="radio">
    <label for="tmcp_choice_0_0_1"><img class="tmlazy  radio_image tm-tooltip" alt="Дуб Млечный" src="https://dusha-domy.ru/wp-content/uploads/2016/06/Dub-Mlechnyj.jpg" data-tm-tooltip-swatch="on"><span class="tc-label radio_image_label" style="display: none;">Дуб Млечный</span></label>    <span class="price tc-price  "></span>        </li><li class="tmcp-field-wrap tm-per-row">
            <input class="tmcp-field tm-epo-field tmcp-radio use_images" name="tmcp_radio_0" data-price="" data-rules="[&quot;&quot;]" data-original-rules="[&quot;&quot;]" data-rulestype="[&quot;&quot;]" data-image="https://dusha-domy.ru/wp-content/uploads/2016/06/Venge.jpg" data-imagep="" data-imagel="" value="Венге_1" id="tmcp_choice_0_1_2" tabindex="2" type="radio">
    <label for="tmcp_choice_0_1_2"><img class="tmlazy  radio_image tm-tooltip" alt="Венге" src="https://dusha-domy.ru/wp-content/uploads/2016/06/Venge.jpg" data-tm-tooltip-swatch="on"><span class="tc-label radio_image_label" style="display: none;">Венге</span></label>    <span class="price tc-price  "></span>        </li><li class="tmcp-field-wrap tm-per-row">
            <input class="tmcp-field tm-epo-field tmcp-radio use_images" name="tmcp_radio_0" data-price="" data-rules="[&quot;&quot;]" data-original-rules="[&quot;&quot;]" data-rulestype="[&quot;&quot;]" data-image="https://dusha-domy.ru/wp-content/uploads/2016/06/Olha.jpg" data-imagep="" data-imagel="" value="Ольха_2" id="tmcp_choice_0_2_3" tabindex="3" type="radio">
    <label for="tmcp_choice_0_2_3"><img class="tmlazy  radio_image tm-tooltip" alt="Ольха" src="https://dusha-domy.ru/wp-content/uploads/2016/06/Olha.jpg" data-tm-tooltip-swatch="on"><span class="tc-label radio_image_label" style="display: none;">Ольха</span></label>    <span class="price tc-price  "></span>        </li><li class="tmcp-field-wrap tm-per-row">
            <input class="tmcp-field tm-epo-field tmcp-radio use_images" name="tmcp_radio_0" data-price="" data-rules="[&quot;&quot;]" data-original-rules="[&quot;&quot;]" data-rulestype="[&quot;&quot;]" data-image="https://dusha-domy.ru/wp-content/uploads/2016/06/Lajm.jpg" data-imagep="" data-imagel="" value="Лайм_3" id="tmcp_choice_0_3_4" tabindex="4" type="radio">
    <label for="tmcp_choice_0_3_4"><img class="tmlazy  radio_image tm-tooltip" alt="Лайм" src="https://dusha-domy.ru/wp-content/uploads/2016/06/Lajm.jpg" data-tm-tooltip-swatch="on"><span class="tc-label radio_image_label" style="display: none;">Лайм</span></label>    <span class="price tc-price  "></span>        </li><li class="tmcp-field-wrap tm-per-row">
            <input class="tmcp-field tm-epo-field tmcp-radio use_images" name="tmcp_radio_0" data-price="" data-rules="[&quot;&quot;]" data-original-rules="[&quot;&quot;]" data-rulestype="[&quot;&quot;]" data-image="https://dusha-domy.ru/wp-content/uploads/2016/06/Oranzhevyj.jpg" data-imagep="" data-imagel="" value="Оранжевый_4" id="tmcp_choice_0_4_5" tabindex="5" type="radio">
    <label for="tmcp_choice_0_4_5"><img class="tmlazy  radio_image tm-tooltip" alt="Оранжевый" src="https://dusha-domy.ru/wp-content/uploads/2016/06/Oranzhevyj.jpg" data-tm-tooltip-swatch="on"><span class="tc-label radio_image_label" style="display: none;">Оранжевый</span></label>    <span class="price tc-price  "></span>        </li>
</ul></div>
</div></div></div></div></li></ul>
</div>
</div>
Если его вставить в страницу (разумеется текстовое наполнение изменить еще надо), то внешне все красиво, но НЕ РАБОТАЕТ!

Знатоки! Пните меня, пожалуйста, в верном направлении - что прописать и где? :cry:Проблема у меня схожа с этой моей темой. Я упускаю важный момент.
Могу предположить, что в functions.php или доп.файле необходимо создать функцию, к которой желаемый код будет отсылаться и работать...
 

ОАА

Опытный
Местный
#4
Нашла еще такой Вариант:
Код:
<script>
var show;
function hidetxt(type){
param=document.getElementById(type);
if(param.style.display == "none") {
if(show) show.style.display = "none";
param.style.display = "block";
show = param;
}else param.style.display = "none"
}
</script>
<a onclick="hidetxt('div1'); return false;" href="#" rel="nofollow">Особенности доставки товаров</a>
<div style="display:none;" id="div1">
<span style="color: #000000;">В интернет-магазине "Душа Дома" представлены два типа товаров:</span>
<ul style="text-align: justify;">
     <li><span style="color: #000000;">товары ТК - доставка возможна только</span> <a href="http://dusha-domy.ru/oplata-i-dostavka/transportnaya-kompaniya/">транспортной компанией</a>. <span style="color: #000000;">Доставка осуществляется напрямую со склада поставщика;</span></li>
     <li style="text-align: justify;"><span style="color: #000000;">прочие товары - доставка</span> <a href="http://dusha-domy.ru/oplata-i-dostavka/">любым удобным способом</a>.</li>
</ul>
<p style="text-align: justify;"><span style="color: #000000;">Доставка товаров может занимать некоторое время, например, при заказе мебели по индивидуальным размерам. Поэтому при просмотре каталога товаров предлагаем Вам использовать <a href="http://dusha-domy.ru/wishlist/">Список желаний</a>. Таким образом Вы подберете все, что хотите и далее из списка отобранных товаров сможете оформить разные заказы с выбором способа доставки для каждого типа товаров отдельно.</span></p>
</div>
</div>
<div>
<a onclick="hidetxt('div2'); return false;" href="#" rel="nofollow">Дополнительные опции и варианты дизайна</a>
<div style="display:none;" id="div2">
<span style="color: #000000;">У многих товаров доступны дополнительные опции и варианты дизайна. Используйте соответствующие кнопки на странице просмотра товара, если они доступны.</span>

<img class="alignnone wp-image-4410 size-full" src="https://dusha-domy.ru/wp-content/uploads/2016/05/knopka-dop.optsii.jpg" alt="кнопка доп.опции" width="386" height="62" />        <img class="alignnone wp-image-4411 size-full" src="https://dusha-domy.ru/wp-content/uploads/2016/05/knopka-drugoj-dizajn.jpg" alt="кнопка другой дизайн" width="385" height="62" />
<h6></h6>
</div>
</div>
<div>
<a onclick="hidetxt('div3'); return false;" href="#" rel="nofollow">Дизайн под заказ</a>
<div style="display:none;" id="div3">
В нашем интернет-магазине кроме дополнительных опций и вариантов дизайна есть возможность заказать свой дизайн. На странице просмотра таких товаров товаров используйте соответствующую кнопку.

<img class="alignnone wp-image-4412 size-full" src="https://dusha-domy.ru/wp-content/uploads/2016/05/Knopka-zakazat-svoj-dizajn.jpg" alt="Кнопка заказать свой дизайн" width="394" height="70" />

Кнопка доступна, если выбран вариант исполнения "Свой дизайн"  <img class="alignnone size-full wp-image-4413" src="https://dusha-domy.ru/wp-content/uploads/2016/05/Variant-ispolneniya-svoj-dizajn.jpg" alt="Вариант исполнения свой дизайн" width="81" height="84" />

В меню индивидуального дизайна необходимо выбрать опции и добавить товар в корзину обычным способом. При оформлении заказа среди платежей необходимо выбрать "Запрос стоимости индивидуального дизайна".

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

Просмотреть текущее состояние заказа Вы можете в Личном кабинете в разделе Заказы.

После окончания расчета стоимости Вам необходимо выбрать удобный способ оплаты в личном кабинете в разделе Заказы.
<h6><strong>Внимание: </strong></h6>
Покупатель несет ответственность за выбор характеристик при изготовлении Товара под заказ. Выбор характеристик считается окончательным после оформления заказа на сайте.

Изменение характеристик возможно только в том случае, если заказ еще не отправлен на изготовление.

Изменение характеристик Товара находящегося в процессе изготовления влечет к увеличению стоимости Заказа. Покупатель обязан возместить сумму, на которую увеличена стоимость Заказа в результате изменения характеристик Товара.

При возникновении вопросов Вы можете связаться с нами <a href="http://dusha-domy.ru/kontakty/">любым удобным способом</a>.
</div>
</div>
Тоже не верно работает. :confused:Просмотреть здесь Полностью изменяет отображение сайдбара.....должно быть как здесь например.
 

searchingman

Гуру
Местный
#5
Вам на определенной странице нужно вывести контент в виде блока "Вопросы-ответы" (FAQ) в виде "аккордеона".
Только зачем придумывать самому решение, если есть плагины ?

Если бы было так просто любой пример (код) вставлять в любой движок через "копипаст", то не было бы разработчиков, которые занимаются адаптацией скриптов(кода) под разные CMS.
 
Последнее редактирование:

ОАА

Опытный
Местный
#6
Вам на определенной странице нужно вывести контент в виде блока "Вопросы-ответы" (FAQ) в виде "аккордеона".
Только зачем придумывать самому решение, если есть плагины ?

Если бы было так просто любой пример (код) вставлять в любой движок через "копипаст", то не было бы разработчиков, которые занимаются адаптацией скриптов(кода) под разные CMS.
Очередной плагин - очередной груз...:oops:
Если не найду выход использую плагин...
 

ОАА

Опытный
Местный
#7
Вам на определенной странице нужно вывести контент в виде блока "Вопросы-ответы" (FAQ) в виде "аккордеона".
Только зачем придумывать самому решение, если есть плагины ?

Если бы было так просто любой пример (код) вставлять в любой движок через "копипаст", то не было бы разработчиков, которые занимаются адаптацией скриптов(кода) под разные CMS.
:D:D:D:D:D:D Я сделала-а-а-а!:LOL::LOL::LOL::LOL::LOL::LOL::LOL: Тут можно посмотреть.
Код:
<script>
var show;
function hidetxt(type){
param=document.getElementById(type);
if(param.style.display == "none") {
if(show) show.style.display = "none";
param.style.display = "block";
show = param;
}else param.style.display = "none"
}
</script>
<a onclick="hidetxt('div1'); return false;" href="#" rel="nofollow" style="
    border: 1px solid rgba(0, 0, 0, 0.035);
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.01) 100%);
    margin: 0 0 1em;
    float: left;
    width: 95%;
    padding: 1em;
    color: #23282d;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
">Особенности доставки товаров</a>
<div style="display:none;" id="div1">
<span style="color: #000000;">ВВ интернет-магазине "Душа Дома" представлены два типа товаров:
<ul>
     <li>товары ТК - доставка возможна только <a href="http://dusha-domy.ru/oplata-i-dostavka/transportnaya-kompaniya/">транспортной компанией</a>. Доставка осуществляется напрямую со склада поставщика;</li>
     <li>прочие товары - доставка <a href="http://dusha-domy.ru/oplata-i-dostavka/">любым удобным способом</a>.</li>
</ul>
Доставка товаров может занимать некоторое время, например, при заказе мебели по индивидуальным размерам. Поэтому при просмотре каталога товаров предлагаем Вам использовать <a href="http://dusha-domy.ru/wishlist/">Список желаний</a>.

На странице просмотра товаров используйте кнопку <img class="alignnone wp-image-4511 size-full" src="https://dusha-domy.ru/wp-content/uploads/2016/05/V-zhelaniya.jpg" sizes="(max-width: 190px) 100vw, 190px" srcset="https://dusha-domy.ru/wp-content/uploads/2016/05/V-zhelaniya.jpg 190w, https://dusha-domy.ru/wp-content/uploads/2016/05/V-zhelaniya-133x30.jpg 133w, https://dusha-domy.ru/wp-content/uploads/2016/05/V-zhelaniya-24x5.jpg 24w, https://dusha-domy.ru/wp-content/uploads/2016/05/V-zhelaniya-36x8.jpg 36w, https://dusha-domy.ru/wp-content/uploads/2016/05/V-zhelaniya-48x11.jpg 48w" alt="кнопка в список желаний" width="190" height="43" data-pin-nopin="true" />
Таким образом Вы подберете все, что хотите и далее из списка отобранных товаров сможете оформить разные заказы с выбором способа доставки для каждого типа товаров отдельно.<img class="size-full wp-image-4525 aligncenter" src="https://dusha-domy.ru/wp-content/uploads/2016/04/Spisok-zhelanij.jpg" alt="Список желаний" width="276" height="67" /></span>
</div>

<div>
<a onclick="hidetxt('div2'); return false;" href="#" rel="nofollow" style="
    border: 1px solid rgba(0, 0, 0, 0.035);
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.01) 100%);
    margin: 0 0 1em;
    float: left;
    width: 95%;
    padding: 1em;
    color: #23282d;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
">Дополнительные опции и варианты дизайна</a>
<div style="display:none;" id="div2">
<span style="color: #000000;">У многих товаров доступны дополнительные опции и варианты дизайна. Используйте соответствующие кнопки на странице просмотра товара, если они доступны.</span>

<img class="alignnone wp-image-4410 size-full" src="https://dusha-domy.ru/wp-content/uploads/2016/05/knopka-dop.optsii.jpg" alt="кнопка доп.опции" width="386" height="62" />        <img class="alignnone wp-image-4411 size-full" src="https://dusha-domy.ru/wp-content/uploads/2016/05/knopka-drugoj-dizajn.jpg" alt="кнопка другой дизайн" width="385" height="62" />
<h6></h6>
<h6><strong>Внимание: </strong></h6>
Покупатель несет ответственность за выбор характеристик при изготовлении Товара под заказ. Выбор характеристик считается окончательным после оформления заказа на сайте.

Изменение характеристик возможно только в том случае, если заказ еще не отправлен на изготовление.

Изменение характеристик Товара находящегося в процессе изготовления влечет к увеличению стоимости Заказа. Покупатель обязан возместить сумму, на которую увеличена стоимость Заказа в результате изменения характеристик Товара.

При возникновении вопросов Вы можете связаться с нами <a href="http://dusha-domy.ru/kontakty/">любым удобным способом
</a></div>
</div>
<div>
<a onclick="hidetxt('div3'); return false;" href="#" rel="nofollow" style="
    border: 1px solid rgba(0, 0, 0, 0.035);
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.01) 100%);
    margin: 0 0 1em;
    float: left;
    width: 95%;
    padding: 1em;
    color: #23282d;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
">Дизайн под заказ</a>
<div style="display:none;" id="div3">
В нашем интернет-магазине кроме дополнительных опций и вариантов дизайна есть возможность заказать свой дизайн. На странице просмотра таких товаров товаров используйте соответствующую кнопку.

<img class="alignnone wp-image-4412 size-full" src="https://dusha-domy.ru/wp-content/uploads/2016/05/Knopka-zakazat-svoj-dizajn.jpg" alt="Кнопка заказать свой дизайн" width="394" height="70" />

Кнопка доступна, если выбран вариант исполнения "Свой дизайн"  <img class="alignnone size-full wp-image-4413" src="https://dusha-domy.ru/wp-content/uploads/2016/05/Variant-ispolneniya-svoj-dizajn.jpg" alt="Вариант исполнения свой дизайн" width="81" height="84" />

В меню индивидуального дизайна необходимо выбрать опции и добавить товар в корзину обычным способом. При оформлении заказа среди платежей необходимо выбрать "Запрос стоимости индивидуального дизайна".

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

Просмотреть текущее состояние заказа Вы можете в Личном кабинете в разделе Заказы.

После окончания расчета стоимости Вам необходимо выбрать удобный способ оплаты в личном кабинете в разделе Заказы.
<h6><strong>Внимание: </strong></h6>
Покупатель несет ответственность за выбор характеристик при изготовлении Товара под заказ. Выбор характеристик считается окончательным после оформления заказа на сайте.

Изменение характеристик возможно только в том случае, если заказ еще не отправлен на изготовление.

Изменение характеристик Товара находящегося в процессе изготовления влечет к увеличению стоимости Заказа. Покупатель обязан возместить сумму, на которую увеличена стоимость Заказа в результате изменения характеристик Товара.

При возникновении вопросов Вы можете связаться с нами <a href="http://dusha-domy.ru/kontakty/">любым удобным способом</a>.
</div>
</div>
Еще надо поработать над внешним восприятием текста, что бы глазу приятно было.
 
Последнее редактирование:

ОАА

Опытный
Местный
#8
Один нюанс - я вставила код с помощью Page Builder by SiteOrigin через виджет SiteOrigin Editor в режиме текста.
Мало ли кому пригодиться. Вот полный код страницы (включая кнопку Перейти в каталог):
Код:
<p><script>
var show;
function hidetxt(type){
param=document.getElementById(type);
if(param.style.display == "none") {
if(show) show.style.display = "none";
param.style.display = "block";
show = param;
}else param.style.display = "none"
}
</script><br>
<a onclick="hidetxt('div1'); return false;" href="#" rel="nofollow" style="
border: 1px solid rgba(0, 0, 0, 0.035);
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.01) 100%);
margin: 0 0 1em;
float: left;
width: 95%;
padding: 1em;
color: #23282d;
font-size: 18px;
line-height: 1.3;
font-weight: 700;
">Особенности доставки товаров</a></p>
<span style="color: #000000;">В интернет-магазине "Душа Дома" представлены два типа товаров:<p></p>
<ul>
<li>товары ТК - доставка возможна только <a href="http://dusha-domy.ru/oplata-i-dostavka/transportnaya-kompaniya/">транспортной компанией</a>. Доставка осуществляется напрямую со склада поставщика;</li>
<li>прочие товары - доставка <a href="http://dusha-domy.ru/oplata-i-dostavka/">любым удобным способом</a>.</li>
</ul>
<p>Доставка товаров может занимать некоторое время, например, при заказе мебели по индивидуальным размерам. Поэтому при просмотре каталога товаров предлагаем Вам использовать <a href="http://dusha-domy.ru/wishlist/">Список желаний</a>.</p>
<p>На странице просмотра товаров используйте кнопку&nbsp;<img class="alignnone wp-image-4511 size-full" src="https://dusha-domy.ru/wp-content/uploads/2016/05/V-zhelaniya.jpg" sizes="(max-width: 190px) 100vw, 190px" srcset="https://dusha-domy.ru/wp-content/uploads/2016/05/V-zhelaniya.jpg 190w, https://dusha-domy.ru/wp-content/uploads/2016/05/V-zhelaniya-133x30.jpg 133w, https://dusha-domy.ru/wp-content/uploads/2016/05/V-zhelaniya-24x5.jpg 24w, https://dusha-domy.ru/wp-content/uploads/2016/05/V-zhelaniya-36x8.jpg 36w, https://dusha-domy.ru/wp-content/uploads/2016/05/V-zhelaniya-48x11.jpg 48w" alt="кнопка в список желаний" width="190" height="43" data-pin-nopin="true"><br>
Таким образом Вы подберете все, что хотите и далее из списка&nbsp;отобранных товаров сможете оформить разные заказы с выбором способа доставки для каждого типа товаров отдельно.<img class="size-full wp-image-4525 aligncenter" src="https://dusha-domy.ru/wp-content/uploads/2016/04/Spisok-zhelanij.jpg" alt="Список желаний" width="276" height="67" srcset="https://dusha-domy.ru/wp-content/uploads/2016/04/Spisok-zhelanij.jpg 276w, https://dusha-domy.ru/wp-content/uploads/2016/04/Spisok-zhelanij-124x30.jpg 124w, https://dusha-domy.ru/wp-content/uploads/2016/04/Spisok-zhelanij-24x6.jpg 24w, https://dusha-domy.ru/wp-content/uploads/2016/04/Spisok-zhelanij-36x9.jpg 36w, https://dusha-domy.ru/wp-content/uploads/2016/04/Spisok-zhelanij-48x12.jpg 48w, https://dusha-domy.ru/wp-content/uploads/2016/04/Spisok-zhelanij-272x67.jpg 272w" sizes="(max-width: 276px) 100vw, 276px">
</p></span>
<a onclick="hidetxt('div2'); return false;" href="#" rel="nofollow" style="
border: 1px solid rgba(0, 0, 0, 0.035);
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.01) 100%);
margin: 0 0 1em;
float: left;
width: 95%;
padding: 1em;
color: #23282d;
font-size: 18px;
line-height: 1.3;
font-weight: 700;
">Дополнительные опции и варианты дизайна</a><p></p>
<span style="color: #000000;">У многих товаров доступны дополнительные опции и варианты дизайна. Используйте соответствующие кнопки на странице просмотра товара, если они доступны.</span><p></p>
<p><img class="alignnone wp-image-4410 size-full" src="https://dusha-domy.ru/wp-content/uploads/2016/05/knopka-dop.optsii.jpg" alt="кнопка доп.опции" width="386" height="62" srcset="https://dusha-domy.ru/wp-content/uploads/2016/05/knopka-dop.optsii.jpg 386w, https://dusha-domy.ru/wp-content/uploads/2016/05/knopka-dop.optsii-300x48.jpg 300w, https://dusha-domy.ru/wp-content/uploads/2016/05/knopka-dop.optsii-187x30.jpg 187w, https://dusha-domy.ru/wp-content/uploads/2016/05/knopka-dop.optsii-24x4.jpg 24w, https://dusha-domy.ru/wp-content/uploads/2016/05/knopka-dop.optsii-36x6.jpg 36w, https://dusha-domy.ru/wp-content/uploads/2016/05/knopka-dop.optsii-48x8.jpg 48w" sizes="(max-width: 386px) 100vw, 386px">        <img class="alignnone wp-image-4411 size-full" src="https://dusha-domy.ru/wp-content/uploads/2016/05/knopka-drugoj-dizajn.jpg" alt="кнопка другой дизайн" width="385" height="62" srcset="https://dusha-domy.ru/wp-content/uploads/2016/05/knopka-drugoj-dizajn.jpg 385w, https://dusha-domy.ru/wp-content/uploads/2016/05/knopka-drugoj-dizajn-300x48.jpg 300w, https://dusha-domy.ru/wp-content/uploads/2016/05/knopka-drugoj-dizajn-186x30.jpg 186w, https://dusha-domy.ru/wp-content/uploads/2016/05/knopka-drugoj-dizajn-24x4.jpg 24w, https://dusha-domy.ru/wp-content/uploads/2016/05/knopka-drugoj-dizajn-36x6.jpg 36w, https://dusha-domy.ru/wp-content/uploads/2016/05/knopka-drugoj-dizajn-48x8.jpg 48w" sizes="(max-width: 385px) 100vw, 385px"></p>
<h6></h6>
<h6><strong>Внимание: </strong></h6>
<p>Покупатель несет ответственность за выбор характеристик при изготовлении Товара под заказ. Выбор характеристик считается окончательным после оформления заказа на сайте.</p>
<p>Изменение характеристик возможно только в том случае, если заказ еще не отправлен на изготовление.</p>
<p>Изменение характеристик Товара находящегося в процессе изготовления влечет к увеличению стоимости Заказа. Покупатель обязан возместить сумму, на которую увеличена стоимость Заказа в результате изменения характеристик Товара.</p>
<p>При возникновении вопросов Вы можете связаться с нами <a href="http://dusha-domy.ru/kontakty/">любым удобным способом<br>
</a></p>
<a onclick="hidetxt('div3'); return false;" href="#" rel="nofollow" style="
border: 1px solid rgba(0, 0, 0, 0.035);
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.01) 100%);
margin: 0 0 1em;
float: left;
width: 95%;
padding: 1em;
color: #23282d;
font-size: 18px;
line-height: 1.3;
font-weight: 700;
">Дизайн под заказ</a><p></p>
В нашем интернет-магазине кроме дополнительных опций и вариантов дизайна есть возможность заказать свой дизайн. На странице просмотра таких товаров товаров используйте соответствующую кнопку.<p></p>
<p><img class="alignnone wp-image-4412 size-full" src="https://dusha-domy.ru/wp-content/uploads/2016/05/Knopka-zakazat-svoj-dizajn.jpg" alt="Кнопка заказать свой дизайн" width="394" height="70" srcset="https://dusha-domy.ru/wp-content/uploads/2016/05/Knopka-zakazat-svoj-dizajn.jpg 394w, https://dusha-domy.ru/wp-content/uploads/2016/05/Knopka-zakazat-svoj-dizajn-300x53.jpg 300w, https://dusha-domy.ru/wp-content/uploads/2016/05/Knopka-zakazat-svoj-dizajn-169x30.jpg 169w, https://dusha-domy.ru/wp-content/uploads/2016/05/Knopka-zakazat-svoj-dizajn-24x4.jpg 24w, https://dusha-domy.ru/wp-content/uploads/2016/05/Knopka-zakazat-svoj-dizajn-36x6.jpg 36w, https://dusha-domy.ru/wp-content/uploads/2016/05/Knopka-zakazat-svoj-dizajn-48x9.jpg 48w" sizes="(max-width: 394px) 100vw, 394px"></p>
<p>Кнопка доступна, если выбран вариант исполнения "Свой дизайн"  <img class="alignnone size-full wp-image-4413" src="https://dusha-domy.ru/wp-content/uploads/2016/05/Variant-ispolneniya-svoj-dizajn.jpg" alt="Вариант исполнения свой дизайн" width="81" height="84" srcset="https://dusha-domy.ru/wp-content/uploads/2016/05/Variant-ispolneniya-svoj-dizajn.jpg 81w, https://dusha-domy.ru/wp-content/uploads/2016/05/Variant-ispolneniya-svoj-dizajn-29x30.jpg 29w, https://dusha-domy.ru/wp-content/uploads/2016/05/Variant-ispolneniya-svoj-dizajn-24x24.jpg 24w, https://dusha-domy.ru/wp-content/uploads/2016/05/Variant-ispolneniya-svoj-dizajn-36x36.jpg 36w, https://dusha-domy.ru/wp-content/uploads/2016/05/Variant-ispolneniya-svoj-dizajn-46x48.jpg 46w" sizes="(max-width: 81px) 100vw, 81px"></p>
<p>В меню индивидуального дизайна необходимо выбрать опции и добавить товар в корзину обычным способом. При оформлении заказа среди платежей необходимо выбрать "Запрос стоимости индивидуального дизайна".</p>
<p>После оформления Ваш заказ попадает в обработку. Оператор корректирует заказ, указывая стоимость выбранных Вами опций индивидуального дизайна. Все внесенные изменения согласуются с Вами по телефону и дублируется сообщениями в личном кабинете.</p>
<p>Просмотреть текущее состояние заказа Вы можете в Личном кабинете в разделе Заказы.</p>
<p>После окончания расчета стоимости Вам необходимо выбрать удобный способ оплаты в личном кабинете в разделе Заказы.</p>
<h6><strong>Внимание: </strong></h6>
<p>Покупатель несет ответственность за выбор характеристик при изготовлении Товара под заказ. Выбор характеристик считается окончательным после оформления заказа на сайте.</p>
<p>Изменение характеристик возможно только в том случае, если заказ еще не отправлен на изготовление.</p>
<p>Изменение характеристик Товара находящегося в процессе изготовления влечет к увеличению стоимости Заказа. Покупатель обязан возместить сумму, на которую увеличена стоимость Заказа в результате изменения характеристик Товара.</p>
<p>При возникновении вопросов Вы можете связаться с нами <a href="http://dusha-domy.ru/kontakty/">любым удобным способом</a>.
</p>
<a class="ow-button-hover" href="https://dusha-domy.ru/katalog/">
<span>
<span class="sow-icon-elegantline" data-sow-icon=""></span>
Перейти в каталог        </span>
</a>