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

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

Тема в разделе "Вопросы новичков", создана пользователем MonaLiza, 27 июн 2015.

  1. MonaLiza

    MonaLiza

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

    Вложения:

    • скан1.jpg
      скан1.jpg
      Размер файла:
      63,5 КБ
      Просмотров:
      26
    • скан2.jpg
      скан2.jpg
      Размер файла:
      33,9 КБ
      Просмотров:
      25
  2. D&B

    D&B Администратор Команда форума Местный

    Сообщения:
    3.262
    Симпатии:
    721
    Баллы:
    113
    Вы бы лучше ссылку на сайт дали который в примере.
     
  3. MonaLiza

    MonaLiza

    Сообщения:
    5
    Симпатии:
    0
    Баллы:
    1
    :(
     
    Последнее редактирование: 29 июн 2015
  4. MonaLiza

    MonaLiza

    Сообщения:
    5
    Симпатии:
    0
    Баллы:
    1
    Что то не догадалась вот этот сайт http://bezpremudrostey.ru/
     
  5. D&B

    D&B Администратор Команда форума Местный

    Сообщения:
    3.262
    Симпатии:
    721
    Баллы:
    113
    Ну так в чем проблема? Отзывы стандартные, насколько я вижу. Поделиться кнопки от http://uptolike.ru/
     
  6. searchingman

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    552
    Баллы:
    113
    Вкладки "Описание", "Отзывы", "Состав и применение" (атрибуты товара) стандартные.
    На вкладке "Отзывы" показывать рейтинг ("звездочки") задается в админке (WooCommerce -> Настройки -> Товары -> Рейтинги товаров).
    Вкладку "Доставка и оплата" можно формировать из произвольной статьи.
    Как работать с вкладками (добавлять новые, переименовывать, выстраивать в нужном порядке и т.д.) рассказано в документации.
     
    • Согласен Согласен x 1
  7. MonaLiza

    MonaLiza

    Сообщения:
    5
    Симпатии:
    0
    Баллы:
    1
    Спасибо за подсказку по соц сетям.
     
  8. MonaLiza

    MonaLiza

    Сообщения:
    5
    Симпатии:
    0
    Баллы:
    1
    Спасибо буду теперь там смотреть!
     
  9. novov

    novov

    Сообщения:
    34
    Симпатии:
    1
    Баллы:
    8
    Тыкните пожалуйста пальцем как сделать горизонтальные табы?
     
  10. searchingman

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    552
    Баллы:
    113
    Реализовать можно с помощью стилей.
    На примере темы 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
     
    • Нравится Нравится x 1
  11. novov

    novov

    Сообщения:
    34
    Симпатии:
    1
    Баллы:
    8
    Спасибо, а на примере темы artificer случайно кода нет)?
     
  12. searchingman

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    552
    Баллы:
    113
    На примере вашего сайта.
    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
     
    • Нравится Нравится x 2
  13. novov

    novov

    Сообщения:
    34
    Симпатии:
    1
    Баллы:
    8
    Большое спасибо! Все работает! Выручаете неоднократно (y)
     
    • Согласен Согласен x 1