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

Акционный товар на странице категории

forzi

Новичок
Здравствуйте, уважаемые! Чтолкнулся я тут с такой проблемой. Может для многих из вас это не является таковой, но я в Вордпрессе еще новичок и пока только изучаю. Есть некий интернет-магазин (как бы есть - пока в работе) и там каталог товаров. Вот каким образом отобразить на странице категории товаров все товары одинаково а один - акционный. Описывать можно много, но я тут сделал типа макета - для понимания вопроса - блок с Вопрросиком - вот это как бы товар из этой категории, но он не такой как все (по стилю отображения) - вот каким богам молиться и какой плагин юзать, что бы такое сотворить? Буду признателен за помощь знатоков...vopros.jpg
 

forzi

Новичок
И никто не в курсе? Или помочь никто не захотел? Странно(((
 

artemkomarov

Специалист
Местный
перед тем как делать то то подобное вот вам вопросы на засыпку:
- сколько товаров должно быть на странице? скажем по умолчанию 12, значит 4 ряда в три колонки все ровно и красиво. А если растянуть один то получится самый последний будет один в ряду - так не красиво и делать нельзя
- что если два товара подряд аукционные? будет пустота или менять количество столбцов?
- что делать с изображением? будет маленький квадратик в длинном прямоугольнике?
 
  • Like
Реакции: D&B

forzi

Новичок
перед тем как делать то то подобное вот вам вопросы на засыпку:
- сколько товаров должно быть на странице? скажем по умолчанию 12, значит 4 ряда в три колонки все ровно и красиво. А если растянуть один то получится самый последний будет один в ряду - так не красиво и делать нельзя
- что если два товара подряд аукционные? будет пустота или менять количество столбцов?
- что делать с изображением? будет маленький квадратик в длинном прямоугольнике?
Количество товаров в категории минимум 7, так что второй ряд будет полным. Акционных товаров будет в каждой рубрике по одному. Расположение как на схеме в топике. Во втором ряду. В прямоугольники будет собственно сам товар - не карточка а так же, как и в других товарах - краткое описание, кнопку Купить, цена и миниатюра товара. Только занимать это будет два места и будет стоять клякса акции (типа звездочка с надписью АКЦИЯ) и фон будет другого цвета
 

artemkomarov

Специалист
Местный
Количество товаров в категории минимум 7, так что второй ряд будет полным. Акционных товаров будет в каждой рубрике по одному.
это предполагает отсутствие фильтров, отсутствие сортировки, отсутствие пагинации вообщем всего, что динамически изменяет расположение товаров. вообщем пофигу ваш же магазин) вставьте это в CSS в кастомайзере и получите то же что у вас на картинке .

Код:
ul.products {
display: flex !important;
list-style: none;
padding: 0;
flex-wrap: wrap;
margin: 0;
width: 100%;
}

ul.products li.product {
width: calc(100% / 3 - 20px);
margin: 0 10px 20px;
padding: 0;
}

ul.products li.product.sale {
width: calc(100% / 3 * 2 - 20px);
}
 
  • Like
Реакции: D&B

forzi

Новичок
Не сработало(( Как было так и осталось.. Просто товары в рядах и все...
 

artemkomarov

Специалист
Местный
добавьте !important для каждого правила и все заработает
 
  • Like
Реакции: D&B

forzi

Новичок
Стили добавлять в стили темы или в стиле ВК? Просто только три css в редакторе - стили темы, стили ВК и стили редактора - и все
 

artemkomarov

Специалист
Местный
Стили добавлять в стили темы или в стиле ВК? Просто только три css в редакторе - стили темы, стили ВК и стили редактора - и все
извените не понимаю о чем вы. нужно то что вы вставили удалить и добавить вот этот код

Код:
ul.products {
display: flex !important;
list-style: none !important;
padding: 0 !important;
flex-wrap: wrap !important;
margin: 0 !important;
width: 100% !important;
}

ul.products li.product {
width: calc(100% / 3 - 20px) !important;
margin: 0 10px 20px !important;
padding: 0 !important;
}

ul.products li.product.sale {
width: calc(100% / 3 * 2 - 20px) !important;
}
 

forzi

Новичок
Добавил - но результат не такой - в рубрика Детские часы нет ничего а в категории 3д ручки... смотрите сами http://cvetmir.com/
 

artemkomarov

Специалист
Местный
Добавил - но результат не такой - в рубрика Детские часы нет ничего а в категории 3д ручки... смотрите сами http://cvetmir.com/
flex позиция учитывает псевдо элементы :before и тд поэтому их необходимо удалить. так же необходимо вынести за пределы список с подкатегориями что бы он не учитывался при расчетах ширины товара.
 

forzi

Новичок
Что то чувствую не то получается... Получил новую установку - любым образом выделить по одному товару с каждой категории - сделать его привлекающим наибольшее внимание пользователей. С пометкой "Акция"...
ПыСы - говорила мне мама - сынок, не бери кем то сделанные вещи на переделку - чревато головной болью и геморроем...
 
Сверху Снизу