Здравствуйте. Продолжаем разбирать самые интересные и полезные плагины для интернет-магазина woocommerce. Сегодня вы узнаете как изменить внешний вид онлайн магазина woocommerce. Вы сможете изменить внешний вид страницы товара, страницы магазина, страниц оформления заказа и корзины. Вы сможете менять цвет и размер заголовков, цен, описаний, категорий, скрыть не нужные элементы, изменить цвет и размер кнопки в корзине и т.д.
Изменить внешний вид интернет-магазина Woocommerce
Изменить внешний вид интернет магазина woocommerce вы сможете с помощью плагина – Customize Woocommerce Shop.
Установить данный плагин на свой сайт вы сможете прямо из админ-панели wordpress.
Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
После установки и активации плагина, перейдите на страницу: Woocommerce – Customize Shop. Здесь вы сможете менять внешний вид своего интернет-магазина woocommerce.
Product Shop Page, страница товара.
– Selected Products, выберите здесь All, тогда изменения будут касаться всех товаров. Вы можете выбрать только один товар или несколько определённых товаров.
– Product Images, поставьте здесь галочку, чтобы скрыть изображение товара.
– Product Title, поставьте здесь галочку, чтобы скрыть заголовок товара.
– Logged In User Only, если поставите здесь галочку, то кнопку Добавить в корзину будут видеть только зарегистрированные пользователи.
– Products Prices, поставьте галочку, чтобы скрыть цены на товары.
– Add To Cart Button, поставьте здесь галочку, чтобы скрыть кнопку Добавить в корзину.
– Нажмите на кнопку – Save All Settings, чтобы сохранить настройки.
Shop Page Appearance, внешний вид страницы Магазин.
– Remove Unset Product Images, поставьте галочку, чтобы скрыть изображения которые не установлены.
– Set Default Product Image, здесь можно задать изображение, которое будет использоваться по умолчанию для товаров у которых нет изображения.
– Title Font Color, здесь вы можете выбрать цвет шрифта для заголовка товара.
– Title Font Size, выберите размер шрифта заголовка товара.
– Title Font Weight, здесь вы можете выбрать тип шрифта для заголовка товара.
– Price Font Color, выберите цвет цены товара.
– Price Font Size, выберите размер цены товара.
– Price Font Weight, выберите тип шрифта цены товара.
– Нажмите на кнопку – Save All Settings, чтобы сохранить настройки.
Product Details Page, одиночная страница товара.
– Selected Products, выберите для каких товаров будут происходить изменения. Для всех товаров выберите All.
– Product Images, поставьте галочку, чтобы скрыть изображения товара.
– Product Title, поставьте галочку, чтобы скрыть заголовок товара.
– Product Tabs, поставьте галочку, чтобы скрыть вкладку товара.
– Related Products, поставьте галочку, чтобы скрыть похожие товары.
– Logged In User Only, поставьте здесь галочку, чтобы кнопка Добавить в корзину, была видна только зарегистрированным пользователям.
– Products Prices, поставьте галочку, чтобы скрыть цену товара.
– Add To Cart Button, поставьте галочку, чтобы скрыть кнопку Добавить в корзину.
– Products Category, поставьте галочку, чтобы скрыть категории товара.
– Нажмите на кнопку – Save All Settings, чтобы сохранить сделанные изменения.
Detail Page Appearance, внешний вид страницы товара.
– Remove Unset Product Images, удалить неопределённые изображения.
– Set Default Product Image, задать изображение по умолчанию для товаров у которых нет изображений.
– Title Font Color, выбрать цвет заголовка товара.
– Title Font Size, выбрать размер заголовка товара.
– Title Font Weight, выбрать тип шрифта заголовка.
– Price Font Color, цвет цены товара.
– Price Font Size, размер цены товара.
– Price Font Weight, тип шрифта цены товара.
– Description Font Color, цвет описания товара.
– Description Font Size, размер текста описания товара.
– Description Font Weight, тип шрифта текста описания товара.
– Category Font Color, цвет категории товара.
– Category Font Size, размер текста категории товара.
– Category Font Weight, тип шрифта категории.
– Сохраните сделанные изменения.
Cart Page, корзина.
– Cart Empty Button, поставьте галочку, чтобы добавить кнопку Корзина пустая на страницу Корзина.
– Button Font Color, цвет кнопки пустой корзины.
– Button Font Size, размер кнопки.
– Button Font Weight, тип шрифта кнопки.
– Нажмите на кнопку – Save All Settings для сохранения настроек.
Checkout Page, страница Оформить заказ. Здесь вы сможете выбрать между двумя параметрами Disable – отключить, Optional – необязательно.
– Billing Country, биллинг страны.
– Billing First Name, биллинг имя.
– Billing Last Name, биллинг фамилия.
– Billing Company, биллинг компания.
– Billing Address1, биллинг адрес 1.
– Billing Address2, биллинг адрес 2.
– Billing City, фактура города.
– Billing State, биллинг государства.
– Billing Post Code, биллинг код поста.
– Billing Email, биллинг электронная почта.
– Billing Phone, биллинг телефон.
Shipping, доставка.
– Shipping Country, доставка страна.
– Shipping First Name, доставка имя.
– Shipping Last Name, доставка фамилия.
– Shipping Company, доставка компания.
– Shipping Address 1, 2, доставка адрес 1 и 2.
– Shipping City, город доставки.
– Shipping State, государственная доставка.
– Shipping Post Code, доставка код поста.
– Account Password, пароль учётной записи.
– Order Comment, комментарий заказа.
– Сохраните сделанные изменения.
Если у вас остались вопросы, напишите комментарий
День добрый! За советом за помощью. Прячу изображение для заданных товаров , но при этом на страницах товаров не подлежащих изменению, исчезает цена. Что делать
Здравствуйте, ничего конкретного вам сказать не могу, надо разбираться, делать анализ, у всех разные темы.
Здравствуйте, подскажите по пункту “Product Tabs, поставьте галочку, чтобы скрыть вкладку товара.” а добавить еще одну вкладку товара как то можно этим плагином или каким другим? Спасибо
Читайте здесь !
Добрый день! Все получилось отлично на главной странице товаров, но при входе через группы товаров (не по фильтрации) идет отображение как задано темой, меня не устраивает такое оформление. Помогите решить проблему. Спасибо заранее.
Здравствуйте, не понял вас, на какой странице изменения не отображаются, на странице категории товара ?
Добрый день! Нажимая на всплывающие вкладки витрины товаров, нет изменений, пока не могу понять как исправить
Здравствуйте,”Всплывающие вкладки витрины” это как понять ?
Давайте я Вам на почту скрины скину
Добрый вечер! Да, в категориях отображение не изменяется как надо
Попробуй вот этот плагин – WooCommerce Product Archive Customiser
Не помогло
А что конкретно хотите изменить ?
Еще один вопрос: Как изменить порядок отображения товара на странице “Витрина”? Сейчас: Картинка, название, цена, кнопка “В корзину”; Нужно: Картинка, цена, кнопка “В корзину”, название
Вам поможет плагин Woo Tuner, там есть функция сортировки отображения товара. В записи не указано, так как плагин обновился.
Woo Tuner не работает, порядок виджетов не активируется, может есть другой плагин?
Плагин работает, лично тестировал его.
Пишет “Не тестировался с вашей версией WordPress”.
Кнопки во вкладке “Порядок” не активны.
Возможно данная функция ещё дорабатывается. Некоторые плагины могут себя по разному вести на разных темах.
Тема Travelify
Добрый вечер!
Установила плагин, но он требует активации. Вот что пишет:
“Please Note: You need a Free API Key to unlock the functionality of this Plugin. After Activating your API Key click on the Customize Shop menu link.”
Так и должно быть?
Я перешла по ссылке, зарегистрировалась, получила ключ, но он не подходит. Не знаю, что делать…
Здравствуйте, не должно быть такого, если плагин не обновлялся. А на страницу настроек можете попасть ?
у меня аналогичная ситуация
Плагин обновился и изменился. Теперь, чтобы пользоваться плагином, нужно зарегистрироваться по ссылке и получить бесплатный API ключ. После ввода ключа и email адреса – будут доступны все настройки.
Я все сделала, но все равно ничего не получается. Пишет: “Error: Invalid API License Key. Login to your My Account page to find a valid API License Key Code: 101”
Запросила новый код, все получилось!
Везёт, у меня по прежнему пишет: Please Note: You need a Free API Key to unlock the functionality of this Plugin. After Activating your API Key click on the Customize Shop menu link.
Попробуй снова запросить. Пришлют другой код. У меня получилось.
Уже много раз запрашивал, бесполезно
Напишите в службу поддержки плагина, вам должны помочь !
Проблема такая, что на самой странице товаров плагин убрал кнопку добавить в корзину, поменял цвет названия и цвет цены товара
Но, если я открываю категории товара, то там по прежнему все без изменений
Можно ли это как-то исправить?
Да, я замечал такое, а вы плагин подключили, api ключ получили, ввели его…? Когда настройки активируете, вы сможете полностью настроить внешний вид и отображение.
Да, это я сделал
Тут проблема в том, что на странице товаров
Цвет цены товара, цвет названия товара поменялся
А если я сортирую по категориям эти товары
То у них цвет цены и названия прежнего цвета
Я понял, настройки не действуют на странице Категории. Могу порекомендовать Классный плагин для изменения CSS стилей – SiteOrigin CSS.
С помощью него я уже смогу изменять готовые названия и тд?
В любом случае, спасибо огромное за ответы
Вы сможете менять и создавать CSS стили для изменения внешнего вида. Названия можно менять с помощью плагина – Loco Translate.
Здравствуйте!
Не подскажите как изменить слово: Товары — на главной странице каталога. Прописываю свой титл и дескрипт в сео плагине на странице а в итоге ноль.
Здравствуйте, можно изменить слово с помощью плагина – Loco Translate. Откройте для редактирования Русский перевод для Woocommerce, через поиск найдите слово “Товары” и измените его на любое другое слово.
К сожалению, плагин уже не работает :(
Почему не работает ? Почитайте внимательно предыдущие комментарии. Есть ещё пару полезных плагинов:
– Woo Shop Customizer.
– Easy Woocommerce Customizer.
Мне нужно изменить размер и цвет стоимости товара. Раньше плагин работал у меня нормально, скачал API, у меня выскакивает окно о подтверждении активации. Но в плагин зайти не могу. Выбрасывает в окно активации. А при желании скачать повторно API – выводит на страницу где этого сделать нельзя.
Вам может помочь плагин – SiteOrigin CSS.
при клике на значок “смортеть” ничего не происходит. возможно, это связанно с тем что я обновил WordPress?
Скорей всего это связано с темой. На некоторых темах плагин может не работать. Тогда рекомендую плагины:
– Simple Custom CSS.
– Custom CSS Pro.
Здравствуйте! Сайт, где получают API KEY, для активации плагина похоже не проплачен :-( там негде получить его. Что делать? :( очень нужен этот плагин
Здравствуйте, можете попробовать откатить плагин к предыдущим версиям.
Здравствуйте, как поможет откат, если плагин не был установлен. АПИ действительно не получить, и вообще безопасно это?
Здравствуйте. Установите плагин и посмотрите, есть ли возможность откатить его. Ничего страшного не случится, вы всегда можете обновить плагин до последней версии. Попробуйте и узнаете. Если боитесь, сделайте резервную копию сайта.
Установил, откатил, теперь можно пользоваться плагином. Спасибо огромное!
Здравствуйте, помогите пожалуйста!
У меня на странице списка товаров, где 4 столбца и в каждом по 4 товара. криво стоит текст, и я уже второй день борюсь, но не могу ничего сделать.
Выглядит примерно так:
картинка
Теле
визио
ная
приста
вка .
Можно ли сделать это не по 4 буквы на строчку а нормально на всю ширину карточки. пожалуйста спасайте))
Здравствуйте, CSS стили измените, Margin, Padding, Width. Плагин SiteOrigin CSS может вам помочь.
Дай Бог тебе здоровья старик))) 2 дня голову ломал!)))
Как под этот плагин API получить? В самом плагине есть ссылка на получение API, но, она не рабочая. Без API он не работает.
Не знаю. Видимо автор плагина больше не поддерживает его. Вариант один – сделать откат к предыдущей версии, где настройки были доступны без API.
В этом вам поможет плагин – WP Rollback.
plug in не работает. не скачивайте, не сможете включить. читайте отзывы о плане в WP
Читайте комментарии выше. Можно сделать чтобы плагин заработал.
Добрый день, подскажите, почему основное описание товара не растягивается на всю страницу под изобрадением, а продолжает идти столбцом справа, если вставлять таблицу с параметрами товара, то она режется по правой стороне, и информация становится не читаемой? Как растянуть табличку с описанием на всю страницу?
Здравствуйте. Такой у вас шаблон значит. Можно изменить стили в CSS, Padding или Margin. Вам может помочь плагин – SiteOrigin CSS.
Спасибо попробую. А какую тему посоветуете для интернет магазина, помимо storefront?
Рекомендую искать тему в админ-панели WordPress, по запросу Shop.
Здравствуйте. Установил плагин. Но, когда пытаюсь зайти в настройки, меня перекидывает в Customize Shop API (стояло до этого). А там запрашивается лицензионный ключ.
Что делать?
Ага, вот пишет, что надо активировать бесплатный ключ API.
Но она что-то через раз работает.
Что можно ещё по-пробовать?
API ключ не поможет. Плагин уже не поддерживается. Откатите его к предыдущей версии и он заработает. Вам поможет плагин – WP Rollback. Откатывайте до той версии, где он будет работать.
Да, точно. Сработало. Спасибо!!! )
Здравствуйте, помогите решить проблемку. У меня на сайте категории отображаются под заголовком Н3 а мне надо что были под Н1, в настройках нет, в коде не могу найти где исправить, помогите очень надо!!!
Здравствуйте. Вы имеете ввиду заголовки категорий? Категории записей или товаров?
Да именно заголовки категорий и даже ГЛАВНОЙ СТРАНИЦЫ!
Категории товаров или записей? Если товаров, надо в файлы плагина Woocommerce лезть. Если записи, значит в вашей теме теги прописаны по умолчанию, в файлах темы надо искать.
Товара, я поняла что это в Woocommerce? только где они там зарыты? в коде страницы отображается как woo-title entry-title.
Вот такой плагин попробуйте – WP Anchor Header.
Я его установила, но как он отображается на сайте, не могу понять, автоматически ничего не меняет и поля для редактирования или внесения настроек нету…
данный плагин требует активацию
Смотрите комментарии выше. На этот вопрос я уже несколько раз отвечал. Вам нужно откатить плагин, тогда он заработает. Выше в комментарии есть ссылка на плагин, который вам поможет.
Доброго времени суток! Может не по теме пишу, не могу решить проблему на WordPress woocommerce обычный товар, нужно поставить несколько цен на товар( в карточке товара ) и на против каждой цены что бы была кнопка купить или добавить в корзину. Может есть готовые решения ? или плагин ? Буду очень вам благодарен !
Здравствуйте. Несколько цен можно поставить, есть такой плагин. На счёт кнопки надо думать. Здесь посмотрите плагины Woocommerce.
Я уже две недели пытаюсь найти решение не чего не могу найти((( Вроде задача простая.. Встречал множество интернет магазинов с такими решениями но как ?
Обычное поле не подойдет
Пример
в карточке товара
ОПТ 300 рублей —- копка купить
мелкий опт 400 рублей — кнопка купить
Розница 600 рублей —- кнопка купить
Установка фиксированных цен… Без скидочных эффектов.
Так же реализовать минималку покупки на опт 5000 рублей и мелкий опт 3000 рублей – можно разного товара сумарно, а на розничную цену фозможность купить от 1 шт
Мне просто данный функцианал очень нужен…. Готов отблагодарить если поможете. Я уже руки опустил весь интернет перелопатил
Вы похоже не поняли. Я рекомендовал вам плагин, он добавляет новые поля на страницу товара, в том числе и цену. У меня есть ещё идея по этому поводу. Можно добавить кнопку, при нажатии на которую будет открываться окно с ценами и формой заказа. Так можно сделать с помощью Contact Form 7 очень просто, здесь показывал. Вам нужно будет в форму добавить нужные вам поля и текст с ценами. Там вообще можно что угодно добавить с помощью HTML кода.
Если голову включить, можно что-то придумать. Мой сайт вам в помощь. Здесь есть много подходящих плагинов для Woocommerce и WordPress. Кто ищет, тот всегда найдёт!
Добрый День, Илья!
Как скрыть категории товаров на карточках товара? Делаю через css .single-product-content .product_meta {
display:none!important;
}
Но скрывается и артикул, который необходимо оставить. Спасибо!
Илья, Как добавить в отправляемое письмо с заявкой от woocommerce какой купон из множества был применен во время покупки?!
Здравствуйте. Скажите название своей темы. У меня скрываются только категории, вот стили:
.single-product div.product .product_meta .posted_in {
display: none;
}
Второй вопрос не понял. Что за письмо с заявкой? Если покупатель применил купон, зачем ему повторно сообщать о нём?
Илья, добавленный Вами стиль решил вопрос, Жму руку!!! Супер!!!
Второй вопрос: после того, как человек оформил покупку, прилетает письмо от ву, с теми данными, который человек указал (имя, контакты и проч). Во время покупки он вводил определенный код для скидки (купон). Таких кодов много и мне необходимо отслеживать в какой заявке был указан какой код. Чтобы в письме с заявкой прилетал код, которым воспользовался человек при оформлении покупки.
В деталях заказа нет такой информации? В админ-панели Woocommerce – Заказы.
Неа. Ну вы поняли, что я имею ввиду ? :)
Я имею ввиду, когда заказ уже оформлен и подтверждён. В деталях должна отображаться информация об использовании купона.
Да,верно и в письме есть поле: скидка – столько-то рублей. А необходимо, чтобы была информация о примененном купоне. Скажем скидка столько то купон такой-то…
Благодарю, что отвечаете!!!
Нашёл плагин WooCommerce Extended Coupon Features, думаю будет вам полезен.
Вот вам доказательства. Смотрите скриншот ниже. В деталях заказа, отображается код купона и скидка. Всё просто и понятно.
Да. Илюх, видел этот плагин. Он показывает в оформлении заказа примененный купон. Но в квитанции на почту не прилетает.
На скриншоте показана страница “Детали заказа”, в админ-панели WordPress. Плагин я не ставил. Такая функция по умолчанию. Вы можете узнать, какой купон использовал покупатель, в деталях заказа, без плагина.
Подскажите плагин, если таковой существует. Мне нужно чтобы при добавлении товара в корзину пользователь видел помимо столбцов “Товар”, “Цена”, “Количество” и “Итого” вдобавок ещё мои дополнительные 2 столбца с настройками. 2 дня мучаюсь, кто нибудь представляет вообще решение этой проблемы?
Посмотрите плагин Personalized WooCommerce Cart Page, может вам помочь!
Невозможно получить клюя API
Ссылка левая:
Get an API key: Click Here
Внимательно смотрите комментарии выше. Там есть ответ на ваш вопрос!
Здравствуйте!
У меня такой вопрос.
Как сделать , чтобы при выборе категории товара, менялся слайдер вверху страницы.
Например, выбираем категорию товара “Авто”, и при этом вверху страницы слайдер начинает показывать машины, и т.д. Или хотябы не слайдер, а фоновая картинка на странице чтобы менялась на соответствующую категории .
Спасибо!
Добрый вечер. Так можно сделать. Есть плагин Full Background Image Manager. С помощью него можно создать разный фон для страниц или записей. Меню с ссылками можно вывести в виджете.
Илья, а скажите, можно ли с помощью этого плагина менять фоновую картинку страницы при выборе категории товаров ? Т.е. страница остаётся та же, страница магазина, а категория товара меняется. Мы зашли на страницу магазина. Там показаны все товары. Картинка на фоне – общая. Потом мы выбрали категорию товара, например , автомобили. И фоновая картинка этой же страницы стала другая, показывает автомобиль. И т.д.
Данный плагин работает с записями и страницами WP. Возможно и с товарами тоже, нужно смотреть на странице создания товара, есть ли там данная функция. То что вы хотите сделать, прям точь в точь, лучше сразу к разработчику обратиться. Плагина такого точно нет.
Вечер добрый!! у меня проблема , не могу изменить стиль дизайна в подкатегориях. Работаю в вукомерсе с темой из крокоблока. Везьде все меняется,а вот в подкатегориях нет.
Добрый день. Попробуйте плагин SiteOrigin CSS.
Подскажите с помощью какого плагина можно менять сам стиль карточки товара?
а так-же при отображении списка товаров цену например чтобы была фотография, потом справа описание и еще правее цена с кнопкой купить и еще несколько маленьки фотографий
Может помочь плагин SiteOrigin CSS. Вообще вам лучше искать тему для интернет магазина Woocommerce. Потому что тема отвечает за внешний вид товаров.
Не могу найти данный плагин (Customize Woocommerce Shop). Он еще существует? Если нет, какой плагин поставить с похожим функционалом?
Он есть на 4 странице поисковой выдачи плагинов WordPress. Давно не обновлялся, поэтому опустили его вниз. Есть ещё плагин WooCommerce Customizer, посмотрите его тоже. Что конкретно вы хотите изменить?
Нашел, спасибо! Не совсем весь функционал который мне необходим. Есть ли плагины в помощь: изменить внешний вид в карточке товара, шрифты, размеры, цвета и положение (заголовка, цены, кнопки “купить”). И есть ли плагины для редактирования внешнего вида фильтров по атрибутам товаров?
Вам поможет плагин SiteOrigin CSS, думаю он лучший в этом деле. Есть настройки внешнего вида по умолчанию Внешний вид – Настроить – Woocommerce.