Как добавить быстрый просмотр в WooCommerce
Опубликовано: 2020-11-24Вы хотите включить функцию быстрого просмотра на своем сайте? Узнайте , как добавить и настроить кнопку быстрого просмотра в магазине WooCommerce .
В каждом магазине WooCommerce клиенты могут видеть подробную информацию о продуктах на страницах продуктов. Однако они не могут видеть описание, варианты и другую информацию, связанную с продуктом, на странице магазина по умолчанию. Когда покупатели находятся на странице магазина, они должны щелкнуть изображение продукта или ссылку, чтобы перейти на страницу продукта, чтобы увидеть больше информации об этом продукте. Это не идеально, потому что это добавляет шаг к процессу покупки, и если клиенты хотят продолжать просматривать ваши продукты, они должны вернуться на страницу магазина.
Однако вы можете добавить кнопку быстрого просмотра на страницу магазина WooCommerce и улучшить работу пользователей . Таким образом, покупатели смогут увидеть всю информацию о товаре, не покидая страницу магазина. Давайте подробнее рассмотрим , что делает быстрое представление кнопки и как добавить его в ваш магазин .
Что такое кнопка быстрого просмотра?
Кнопка быстрого просмотра позволяет покупателям увидеть подробную информацию о продукте прямо на странице магазина, и им не нужно открывать страницу продукта каждого интересующего их товара. Таким образом, покупатели могут перемещаться по продуктам со страницы магазина, улучшая опыт покупки. Когда пользователь нажимает кнопку быстрого просмотра, открывается всплывающее окно, отображающее всю необходимую информацию о продукте на той же странице. Нет необходимости перезагружать страницу магазина или перенаправлять пользователей на другую страницу.
Как добавить кнопку быстрого просмотра на страницу магазина WooCommerce
Самый простой способ добавить кнопку быстрого просмотра в свой магазин — использовать плагин. Для этой демонстрации мы будем использовать Direct Checkout, один из лучших плагинов для оформления заказов для WooCommerce. Несмотря на то, что у Direct Checkout есть бесплатная версия, вам понадобится премиум-версия, чтобы добавить кнопки быстрого просмотра. Вы можете выбрать любой из 3 премиальных планов, стоимость которых начинается всего от 19 долларов США (единовременный платеж).
Установка и активация Direct Checkout
Сначала установите Direct Checkout. Вам нужно получить бесплатную версию отсюда и одну из премиальных версий по этой ссылке. Имейте в виду, что вам необходимо установить и активировать как бесплатную, так и премиум-версию плагина, чтобы разблокировать функцию быстрого просмотра. После установки обоих перейдите в WooCommerce > Direct Checkout > Archives и активируйте опцию Добавить кнопку быстрого просмотра . 
В этом разделе вы также можете заменить стандартный текст кнопки «Добавить в корзину». Обратите внимание, что это никак не повлияет на работу кнопки быстрого просмотра. Вот и все! Вы только что добавили кнопку быстрого просмотра на страницу своего магазина WooCommerce ! Вот как выглядит кнопка, если вы используете тему StoreFront: 
И когда вы нажмете на кнопку быстрого просмотра, появится модальное всплывающее окно, похожее на это: 
Обратите внимание, что вся информация о продукте отображается во всплывающем окне быстрого просмотра. Есть даже кнопка «Добавить в корзину», которая позволяет покупателям добавлять товары в свои корзины прямо из всплывающего окна. Теперь давайте сделаем еще один шаг и посмотрим, как настроить кнопку быстрого просмотра с помощью CSS.
Как настроить быстрый просмотр WooCommerce
В этом разделе вы узнаете , как настроить кнопку быстрого просмотра и модальное всплывающее окно быстрого просмотра, используя немного CSS . Сценарии CSS очень полезны для многих задач, поэтому даже если вы новичок, стоит изучить несколько основных концепций CSS. Теперь давайте посмотрим, как настроить различные элементы как кнопки быстрого просмотра, так и модального всплывающего окна быстрого просмотра.
Обратите внимание, что вы должны вставить следующие коды в файл style.css дочерней темы или в поле «Дополнительные CSS» настройщика темы. Если у вас нет дочерней темы, вы можете просмотреть этот пост, чтобы создать ее или использовать один из этих плагинов.
3.1 Изменить кнопку быстрого просмотра
Изменить ширину кнопки быстрого просмотра
li.product .qlwcdc_quick_view.button{
width: 40%;
}
Изменить цвет фона
li.product .qlwcdc_quick_view.button{
background: #79b0f7;
}
Изменить цвет значка
li.product .qlwcdc_quick_view.button{
color:red;
}
Добавьте закругленные границы
li.product .qlwcdc_quick_view.button{
border-radius: 5px;
}
Используйте изображение в качестве кнопки
li.product .qlwcdc_quick_view.button{
width:75px;
content:url('https://pbs.twimg.com/profile_images/476389199621275648/G6c2Zoe__400x400.jpeg');
}
Заменить значок текстом
li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
content: "quick view text";
color:white;
background:black;
padding:10px;
}
Добавить эффект наведения
li.product .qlwcdc_quick_view.button:hover{
color:black;
background:yellow;
}
3.2) Отредактируйте модальное всплывающее окно быстрого просмотра
Теперь давайте посмотрим на код для настройки модального всплывающего окна быстрого просмотра.
Изменить цвет фона
#qlwcdc_quick_view_modal>div>div>div.modal-body{
background:greenyellow;
}
Скрыть метаданные о продукте
#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div .summary .product_meta{
display:none;
}
Скрыть количество и добавить в корзину
#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{
display:none;
}#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{ Мы только что рассмотрели различные сценарии для настройки различных аспектов кнопки быстрого просмотра в WooCommerce. Если вы хотите узнать больше о том, что вы можете делать с помощью CSS, ознакомьтесь с этим руководством.
display:none;
}
Примеры CSS-скриптов
Теперь, когда вы узнали, как добавлять и настраивать основные настройки быстрого просмотра в WooCommerce, давайте сделаем еще один шаг. Ниже вы найдете три примера редактирования кнопки быстрого просмотра и добавления изюминки на страницу вашего магазина.
Круглая кнопка с пользовательским значком
li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
font-style:normal;
font-family: "Font Awesome 5 Free";
content: "\f002";
color:white;
background:black;
padding: 15px;
border-radius:50%;
}
Текстовая кнопка со стилем
li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
font-style:normal;
content: "view";
color:black;
background:#eeeeee;
padding:8px 18px;
border:3px solid brown;
border-radius:15px 3px;
}
Использование изображения в качестве кнопки
li.product > a.button.add_to_cart_button{
bottom:30px;
position:relative;
}
li.product .qlwcdc_quick_view.button{
background:transparent;
width:85px;
content:url('https://icons.iconarchive.com/icons/iynque/flurry-extras-9/512/Quick-Look-Droplet-icon.png');
}
Вывод
В целом, добавив кнопку быстрого просмотра, вы улучшите покупательский опыт ваших клиентов. Они смогут увидеть основные детали продукта прямо на странице магазина, не открывая страницу продукта для каждого товара, который они хотят увидеть. Самый простой и удобный способ добавить кнопку быстрого просмотра в WooCommerce — использовать плагин Direct Checkout. Этот инструмент позволяет добавить кнопку быстрого просмотра на страницу магазина в несколько кликов. Затем, если вы хотите сделать еще один шаг и настроить как кнопку, так и всплывающее окно, вы можете использовать немного CSS.
Знаете ли вы какие-либо другие способы включить кнопку быстрого просмотра в вашем магазине? Были ли у вас какие-либо проблемы после нашего руководства? Дайте нам знать в разделе комментариев ниже, и мы сделаем все возможное, чтобы помочь вам.
Для получения дополнительной информации о том, как настроить свой магазин, мы рекомендуем вам ознакомиться со следующими руководствами:
- Как настроить страницу магазина WooCommerce
- Как настроить кнопку «Добавить в корзину» в WooCommerce
- Отредактируйте страницу оформления заказа WooCommerce.