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

[forzi]

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

 

[forzi]

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

 

[artemkomarov]

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

 

[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);
}

 

[forzi]

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

 

[artemkomarov]

ссылку на ваш сайт пожалуйста

 

[forzi]

http://cvetmir.com/

 

[artemkomarov]

добавьте !important для каждого правила и все заработает

 

[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]

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