• Никакой политики на форуме. Иначе - бан!
  • Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы или капсом удаляются без предупреждения!

Как добавить кнопки в товаре (такие как описание, отзывы)?

MonaLiza

Новичок
Увидела на одном сайте не знаю как это у себя сделать. Поскольку я новичок может можно в базовом вуукомерце сделать а может нужен плагин?
Вот первый скрин на нем 1 это то что хочу добавить но не знаю как , а под номером 2 стоят кнопки соц сетей подскажите как это можно реализовать?
Второй скрин стоят звездочки по оценке товара. Так тоже хотелось бы сделать. Или может это в самой теме так сделано. Спасибо за помощь.
 

Вложения

  • скан1.jpg
    скан1.jpg
    63.5 KB · Просмотры: 31
  • скан2.jpg
    скан2.jpg
    33.9 KB · Просмотры: 30

D&B

Администратор
Команда форума
Местный
Вы бы лучше ссылку на сайт дали который в примере.
 

D&B

Администратор
Команда форума
Местный
Ну так в чем проблема? Отзывы стандартные, насколько я вижу. Поделиться кнопки от http://uptolike.ru/
 

searchingman

Гуру
Местный
Что то не догадалась вот этот сайт http://bezpremudrostey.ru/
Вкладки "Описание", "Отзывы", "Состав и применение" (атрибуты товара) стандартные.
На вкладке "Отзывы" показывать рейтинг ("звездочки") задается в админке (WooCommerce -> Настройки -> Товары -> Рейтинги товаров).
Вкладку "Доставка и оплата" можно формировать из произвольной статьи.
Как работать с вкладками (добавлять новые, переименовывать, выстраивать в нужном порядке и т.д.) рассказано в документации.
 

MonaLiza

Новичок
Вкладки "Описание", "Отзывы", "Состав и применение" (атрибуты товара) стандартные.
На вкладке "Отзывы" показывать рейтинг ("звездочки") задается в админке (WooCommerce -> Настройки -> Товары -> Рейтинги товаров).
Вкладку "Доставка и оплата" можно формировать из произвольной статьи.
Как работать с вкладками (добавлять новые, переименовывать, выстраивать в нужном порядке и т.д.) рассказано в документации.
Спасибо буду теперь там смотреть!
 

searchingman

Гуру
Местный
Тыкните пожалуйста пальцем как сделать горизонтальные табы?
Реализовать можно с помощью стилей.
На примере темы storefront.
1. Изначально вкладки вертикальные http://take.ms/0W2E5
2. Изменяем стили
HTML:
@media screen and (min-width: 768px)
.woocommerce-tabs ul.tabs {
  /* width: 29.4117647059%; */
  float: left;
  margin-right: 5.8823529412%;
  text-align: left;
}

@media screen and (min-width: 768px)
.woocommerce-tabs ul.tabs li {
  /* display: block; */
  margin: 0 30px 0 0;
  border-bottom: 1px dotted rgba(0,0,0,.1);
}

@media screen and (min-width: 768px)
.woocommerce-tabs .panel {
  width: 64.7058823529%;
  /* float: right; */
  margin-right: 0;
  margin-top: 0;
}
Вкладки становятся горизонтальными http://take.ms/ZxJKL
 

searchingman

Гуру
Местный
Спасибо, а на примере темы artificer случайно кода нет)?
На примере вашего сайта.
1. Было так http://take.ms/2QhTv
2. Правим стили
HTML:
@media only screen and (min-width: 768px)
.single-product .woocommerce_tabs ul.tabs, .single-product .woocommerce-tabs ul.tabs {
  width: 100%;
  float: left;
  border-top: 1px solid #cfcdd0;
}

@media only screen and (min-width: 768px)
.single-product .woocommerce_tabs ul.tabs li, .single-product .woocommerce-tabs ul.tabs li {
  /* display: block; */
  margin: 0 30px 0 0;
  float: left;
}

@media only screen and (min-width: 768px)
.single-product .woocommerce_tabs .panel, .single-product .woocommerce-tabs .panel {
  width: 100%;
  padding-left: 3.8%;
  border-left: 1px solid #cfcdd0;
  float: right;
  margin-bottom: 1.618em;
  border-top: 1px solid #cfcdd0;
  padding-top: 1.618em;
}
Становиться так http://take.ms/ik40d
 
Сверху Снизу