Перейти к содержимому


Карточки Товара


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 5

#1 Юрий32

Юрий32

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 71 сообщений

Отправлено 19 Февраль 2019 - 18:04

Здравствуйте, возможно ли поменять карточки товара с шаблона шоколад, Заменить только карточки, без прокрутки как в шаблоне
так же
1-показать где поменять цвет колонок
2- сделать зеленую рамку

Прикрепленные изображения

  • Безымяннырпнаеакй.png


#2 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 21 Февраль 2019 - 04:25

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
	{% IF GOODS_VIEW_TYPE=1 %}
<!-- Вывод товаров ТАБЛИЦЕЙ -->
		 <div class="products-grid row">
		 {% FOR goods %}
				 <div class="item">
				 <div class="item-inner" itemscope itemtype="https://schema.org/Product">
						 <div class="product rotation">
						 <div class="default">
								 {% IF goods.IS_NEW %}
								 <span class="new"></span>
								 {% ELSEIF goods.IS_TOP %}
								 <span class="best"></span>
								 {% ENDIF %}
								 {% IF goods.MAX_DISCOUNT %}
								 <span class="sale right"></span>
								 {% ENDIF %}
								 {% IF goods.MIN_PRICE_OLD > goods.MIN_PRICE_NOW %}
								 <span class="sale right">Скидка <span class="saving"></span>%</span>
								 {%ENDIF%}
								 <div class="product-img">
								 <a href="{goods.URL_MIN_PRICE_NOW | url_amp}" class="product-image" title="{goods.NAME}">
										 <img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=jade{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" class="goods-image-small" alt="{goods.NAME}">
								 </a>
								 </div>
								 <div class="product-description">
								 <div class="vertical">
										 <h3 class="product-name">
										 <a title="{goods.NAME}" href="{goods.URL_MIN_PRICE_NOW | url_amp}">{goods.NAME}</a>
										 </h3>
										 <div class="price">
										 <div class="price-box">
												 <span class="product-price">
														 <span class="price">{goods.MIN_PRICE_NOW | money_format}</span>
												 {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
														 <span class="price-old">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span>
												 {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
														 <span class="price-old">{goods.MIN_PRICE_OLD | money_format}</span>
												 {% ENDIF %}
												 </span>
										 </div>
										 </div>
								 </div>
								 </div>
						 </div><!-- описание товара -->
						 <div class="product-hover">
								 <h3 class="product-name">
								 <a title="{goods.NAME}" href="{goods.URL_MIN_PRICE_NOW | url_amp}">{goods.NAME}</a>
								 </h3>
								 <div class="price">
								 <div class="price-box">
										 <span class="product-price">
										 <span class="price">{goods.MIN_PRICE_NOW | money_format}</span>
										 </span>
								 </div>
								 </div>
								 <div class="product-icon">
								 <a href="{goods.URL_MIN_PRICE_NOW | url_amp}">
										 <img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=jade{% ELSE %}{goods.IMAGE_ICON}{% ENDIF %}" class="goods-image-icon" alt="{goods.NAME}">
								 </a>
								 </div>
								 <div class="short-description">
								 <p>{goods.DESCRIPTION_SHORT}</p>
								 </div>
								 <div class="actions">
								 <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListForm product-form-{goods.MIN_PRICE_NOW_ID}">
										 <input type="hidden" name="hash" value="{HASH}" />
										 <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
										 <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
										 <a class="add-cart quick" title="Быстро оформить заказ" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MIN_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}>
												 <i class="fa fa-shopping-cart"></i>
										 </a>
										 <!--a class="add-cart" title="В корзину" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MIN_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}>
												 <span class="icon-basket"></span>
										 </a-->
										 <!-- Если есть возможность добавить товар в избранное -->
										 <!-- Если есть возможность добавить товар в избранное -->
												 {% IF goods.IS_HAS_IN_FAVORITES_LIST %}
														 <a class="add-wishlist added"
														 data-action-is-add="0"
														 data-action-add-url="{FAVORITES_ADD_URL}"
														 data-action-delete-url="{FAVORITES_DELETE_URL}"
														 data-action-add-title="Добавить &laquo;{goods.NAME}&raquo; в избранное"
														 data-action-delete-title="Убрать &laquo;{goods.NAME}&raquo; из избранного"
														 title="Убрать &laquo;{goods.NAME}&raquo; из избранного"
														 href="{FAVORITES_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;return_to={CURRENT_URL | urlencode}"
														 ><i class="fa fa-heart"></i></a>
												 {% ELSE %}
														 <a class="add-wishlist"
														 data-action-is-add="1"
														 data-action-add-url="{FAVORITES_ADD_URL}"
														 data-action-delete-url="{FAVORITES_DELETE_URL}"
														 data-action-add-title="Добавить &laquo;{goods.NAME}&raquo; в избранное"
														 data-action-delete-title="Убрать &laquo;{goods.NAME}&raquo; из избранного"
														 title="Добавить &laquo;{goods.NAME}&raquo; в избранное" href="{FAVORITES_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;return_to={CURRENT_URL | urlencode}"
														 ><i class="fa fa-heart"></i></a>
												 {% ENDIF %}
												 <!-- END Если есть возможность добавить товар в избранное -->
										 <!-- END Если есть возможность добавить товар в избранное -->
								
										 <!-- Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
												 {% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}
														 {% IF goods.IS_HAS_IN_COMPARE_LIST %}
														 <a class="add-compare added"
																 data-action-is-add="0"
																 data-action-add-url="{COMPARE_ADD_URL}"
																 data-action-delete-url="{COMPARE_DELETE_URL}"
																 data-action-add-title="Добавить &laquo;{goods.NAME}&raquo; в список сравнения с другими товарами"
																 data-action-delete-title="Убрать &laquo;{goods.NAME}&raquo; из списка сравнения с другими товарами"
																 data-prodname="{goods.NAME}"
																 data-produrl="{goods.URL}"
																 data-id="{goods.ID}"
																 data-mod-id="{goods.MIN_PRICE_NOW_ID}"
																 title="Убрать &laquo;{goods.NAME}&raquo; из списка сравнения с другими товарами"
																 href="{COMPARE_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;from={goods.GOODS_FROM}&amp;return_to={CURRENT_URL | urlencode}"
														 ><i class="fa fa-retweet"></i></a>
														 {% ELSE %}
														 <a class="add-compare"
																 data-action-is-add="1"
																 data-action-add-url="{COMPARE_ADD_URL}"
																 data-action-delete-url="{COMPARE_DELETE_URL}"
																 data-action-add-title="Добавить &laquo;{goods.NAME}&raquo; в список сравнения с другими товарами"
																 data-action-delete-title="Убрать &laquo;{goods.NAME}&raquo; из списка сравнения с другими товарами"
																 data-prodname="{goods.NAME}"
																 data-produrl="{goods.URL}"
																 data-id="{goods.ID}"
																 data-mod-id="{goods.MIN_PRICE_NOW_ID}"
																 title="Добавить &laquo;{goods.NAME}&raquo; в список сравнения с другими товарами"
																 href="{COMPARE_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;from={goods.GOODS_FROM}&amp;return_to={CURRENT_URL | urlencode}"
														 ><i class="fa fa-retweet"></i></a>
														 {% ENDIF %}
												 {% ENDIF %}
												 <!-- END Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
										 <!-- END Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
								 </form>
								 </div><!-- кнопки Купить/Избранное/Сравнение -->
						 </div><!-- товар при наведении -->
						 </div>
				 </div>
				 </div>
		 {% ENDFOR %}
		 </div>
        
        
замените на:
	{% IF GOODS_VIEW_TYPE=1 %}
<!-- Вывод товаров ТАБЛИЦЕЙ -->
		 <div class="products-grid row">
		 {% FOR goods %}
				 <div class="item">
				 <div class="item-inner" itemscope itemtype="https://schema.org/Product">
						 <div class="product rotation">
						 <div class="default">
										 <h3 class="product-name">
										 <a title="{goods.NAME}" href="{goods.URL_MIN_PRICE_NOW | url_amp}">{goods.NAME}</a>
										 </h3>
								 {% IF goods.IS_NEW %}
								 <span class="new"></span>
								 {% ELSEIF goods.IS_TOP %}
								 <span class="best"></span>
								 {% ENDIF %}
								 {% IF goods.MAX_DISCOUNT %}
								 <span class="sale right"></span>
								 {% ENDIF %}
								 {% IF goods.MIN_PRICE_OLD > goods.MIN_PRICE_NOW %}
								 <span class="sale right">Скидка <span class="saving"></span>%</span>
								 {%ENDIF%}
								 <div class="product-img">
								 <a href="{goods.URL_MIN_PRICE_NOW | url_amp}" class="product-image" title="{goods.NAME}">
										 <img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=jade{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" class="goods-image-small" alt="{goods.NAME}">
								 </a>
								 </div>
								 <div class="product-description">
								 <div class="vertical">
										 <div class="price">
										 <div class="price-box">
												 <span class="product-price">
														 <span class="price">{goods.MIN_PRICE_NOW | money_format}</span>
												 {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
														 <span class="price-old">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span>
												 {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
														 <span class="price-old">{goods.MIN_PRICE_OLD | money_format}</span>
												 {% ENDIF %}
												 </span>
										 </div>
										 </div>
								 </div>
								 </div>
						 </div><!-- описание товара -->
						 <div class="product-hover">
								 <div class="actions">
								 <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListForm product-form-{goods.MIN_PRICE_NOW_ID}">
										 <input type="hidden" name="hash" value="{HASH}" />
										 <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
										 <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
										 <a class="add-cart quick" title="Быстро оформить заказ" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MIN_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}>Купить</a>
								 </form>
								 </div><!-- кнопки Купить/Избранное/Сравнение -->
						 </div><!-- товар при наведении -->
						 </div>
				 </div>
				 </div>
		 {% ENDFOR %}
		 </div>
        
далее зайдите в main.css - найдите:
/* Товары таблицей */
.products-grid {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;text-align: center;}
.products-grid .item {display: inline-block;position: relative;margin: 0 5px 20px;text-align: center;}
.products-grid .item .item-inner {width: 262px;display: inline-block;margin-bottom: 30px;position: relative;border-bottom: 1px solid #dddddd;}
.products-grid .item .product-hover {position: relative;border: 1px solid #dddddd;max-width: 250px;max-height: 257px;}
.products-grid .item .product-hover .product-image {display: block;position: relative;line-height: 260px;}
.products-grid .item .product-hover .product-image:before {border: 6px solid #ffffff;bottom: 0;content: "";left: 0;position: absolute;z-index: 1;right: 0;top: 0;transition: all 300ms ease 0s;}
.products-grid .item:hover .product-hover .product-image:before {border: 1px solid transparent;}
.products-grid .item .add-to-links {position: absolute;top: 35%;transform: translateY(-50%);-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-o-transform: translateY(-50%);left: -17px;opacity: 0;z-index: 10;}
.products-grid .item:hover .add-to-links {opacity: 1;}
.products-grid .item .add-to-links a {position: relative;}
.products-grid .item .add-to-links .compare, .products-grid .item .add-to-links .wishlist {transform: scale(0.7);}
.products-grid .item:hover .add-to-links .compare, .products-grid .item:hover .add-to-links .wishlist {transform: scale(1);}
.products-grid .item .add-to-links .compare a, .products-grid .item .add-to-links .wishlist a {margin-top: 10px;}
.products-grid .item .item-info {z-index: 1;position: relative;padding: 10px 0 20px;clear: both;margin: 0px;text-align: center;}
.products-grid .item .item-info .product-name a {font-size: 16px;font-weight: 400;letter-spacing: 0.3px;line-height: 20px;text-transform: capitalize;display: block;height: 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.products-grid .item .item-info .price-box {padding: 0;line-height: normal;}
.products-grid .item .item-info .price-box span.price {display: inline-block;margin: 0 10px 0 0;}
.products-grid .item .item-info .rating-hover {position: absolute;margin: 0 0 30px 0;bottom: -30px;z-index: 1;opacity: 0;width: 100%;}
.products-grid .item:hover .item-info .rating-hover {opacity: 1;bottom: -6px;background: #ffffff;}
.products-grid .item .item-info .ratings {margin: auto;text-align: center;}
.products-grid .item .item-info .ratings .rating-box {margin: auto;text-align: center;}
.products-grid .item .actions {bottom: -17px;color: #ffffff;left: 0;position: absolute;text-align: center;width: 100%;z-index: 1;padding: 0px 0;}
.products-grid .item .actions .button {text-transform: uppercase;}
.products-grid .item .product-hover {position: absolute;border: 1px solid #dddddd;max-width: 100%;max-height: 100%;}
.product {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;display: inline-block;float: none;margin: 0 0 40px;/*min-width: 240px;*/overflow: hidden;position: relative;text-align: left;vertical-align: top;}
.product .default {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;overflow: hidden;position: relative;}
.product-img {width: 270px;height: 270px;display:table-cell;vertical-align:middle;text-align:center;background-color:#f2f2f2;}
.product-icon img {display:block;margin:0 auto;}
.product .product-image {display: block;line-height: 0;margin: 0;}
.product-image {display: inline-block;line-height: 0;position: relative;}
.product-image > img {-webkit-transition: opacity 0.2s linear;transition: opacity 0.2s linear;}
.product .product-description {background: #f2f2f2;border-top: 1px solid #e1e1e1;color: #505050;display: table;font-size: 13px;height: 100px;line-height: 18px;position: relative;text-align: center;width: 100.2%;z-index: 1;}
.product .product-description .vertical {display: table-cell;height: 100px;padding-left: 5px;padding-right: 5px;vertical-align: middle;}
.product .product-name {color: #1e1e1e;font-size: 15px;font-weight: normal;line-height: 16px;margin: 0 0 4px;text-transform: none;max-height:50px;overflow:hidden;}
.product-name a {color: #1e1e1e;text-decoration: none;-webkit-transition: opacity .2s linear;transition: opacity .2s linear;}
.product-name a:hover {opacity: 0.8;filter: alpha(opacity=80);-webkit-transition: opacity .2s linear;transition: opacity .2s linear;}
.product .price {font-weight: bold;font-size: 20px;}
.price-old {color: #7f7f7f;display: inline-block;margin-right: 6px;position: relative;text-decoration:line-through;}
.product .not-rotation-actions {background: #00c59c;bottom:0;left: 0;right: 0;padding: 9px 10px;position: absolute;text-align: center;-webkit-transition: bottom .2s linear;transition: bottom .2s linear;z-index: 1;height:72px;width:99.9%;}
.product:hover .not-rotation-actions {bottom: 100px;-webkit-transition: bottom .2s linear;transition: bottom .2s linear;}
.col-md-1.product .product-hover, .col-md-2.product .product-hover, .col-md-3.product .product-hover, .col-md-4.product .product-hover, .col-md-5.product .product-hover, .col-md-6.product .product-hover, .col-md-7.product .product-hover, .col-md-8.product .product-hover, .col-md-9.product .product-hover, .col-md-10.product .product-hover, .col-md-11.product .product-hover, .col-md-11.product .product-hover {left: 15px;right: 15px;}
.product .product-hover {height:100%;background-color: #ffb300;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;bottom: 0;color: #7f7f7f;display: none;font-size: 12px;line-height: 20px;left: 0;padding: 16px 20px 90px;position: absolute;right: 0;top: 0;width: auto !important;}
.product:hover .product-hover {display: block;-webkit-animation: fadeIn 0.8s;animation: fadeIn 0.8s;}
.product .product-hover .product-name {font-size: 13px;font-weight: normal;line-height: 18px;margin: 0 0 7px;}
.product .product-hover .product-name a {color: #fff;-webkit-transition: opacity .2s linear;transition: opacity .2s linear;}
.product .product-hover .product-name a:hover {opacity: 0.8;filter: alpha(opacity=80);-webkit-transition: opacity .2s linear;transition: opacity .2s linear;text-decoration: none;}
.product .product-hover .price {font-size: 18px;font-weight: normal;line-height: 1;margin: 0 0 5px;color:#fff;}
.product .product-hover .short-description {color: #ffffff;height: 110px;overflow-y: hidden;width: 100%;padding: 5px;}
.product .product-hover .product-image {-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;display: block;float: right;line-height: 0;margin: 4px 0 0 5px;padding: 0;position: relative;z-index: 1;}
.product .product-hover .product-image img {-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;}
.product .product-hover .actions {bottom: 0px;left: 0;position: absolute;text-align: center;width: 100%;}
.product .actions a {background: #fff;display: inline-block;height: 54px;margin: 0 -2px;padding-top: 19px;text-align: center;text-decoration: none;vertical-align: top;width: 54px;-webkit-transition: all .2s linear;transition: all .2s linear;}
.add-cart {cursor:pointer;}
.product .actions .add-cart {-webkit-border-radius: 3px 0 0 3px;-moz-border-radius: 3px 0 0 3px;border-radius: 3px 0 0 3px;}
.product .actions .add-compare {-webkit-border-radius: 0 3px 3px 0;-moz-border-radius: 0 3px 3px 0;border-radius: 0 3px 3px 0;}
.product .actions a:hover {background: #f2f2f2;-webkit-transition: all .2s linear;transition: all .2s linear;}
.product.rotation, .employee.rotation {overflow: visible;border: 1px solid #3c7b20;background: #f2f2f2;}
.rotation {background: none;-webkit-perspective: 600px;-moz-perspective: 600px;perspective: 600px;}
.rotation .default, .rotation .front-end {overflow: hidden;position: relative;-webkit-transform: rotateX(0deg) rotateY(0deg);-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-moz-transform: rotateX(0deg) rotateY(0deg);-moz-transform-style: preserve-3d;-moz-backface-visibility: hidden;transform: rotateY(0deg);-webkit-transition: all .6s ease-in-out;-moz-transition: all .6s ease-in-out;transition: all .6s ease-in-out;z-index: 24;}
.rotation .default {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.rotation.hover .default, .rotation.hover .front-end {z-index: 35;-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);transform: rotateY(180deg);-webkit-transition-delay: .2s;-moz-transition-delay: .2s;transition-delay: .2s;}
.rotation .product-hover, .rotation .back-end {display: block;height: inherit;-webkit-transform: rotateY(-180deg);-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-moz-transform: rotateY(-180deg);-moz-transform-style: preserve-3d;-moz-backface-visibility: hidden;transform: rotateY(-180deg);-moz-transition: all .6s ease-in-out;-webkit-transition: all .6s ease-in-out;transition: all .6s ease-in-out;width: 100%;z-index: 13;}
.rotation.hover .product-hover, .rotation.hover .back-end {z-index: 46;-webkit-transform: rotateX(0deg) rotateY(0deg);-moz-transform: rotateX(0deg) rotateY(0deg);transform: rotateY(0deg);-webkit-transition-delay: .2s;-moz-transition-delay: .2s;transition-delay: .2s;}
.rotation .product-image:hover > img {opacity: 1;filter: alpha(opacity=100);}
.item .default .sale{display:block;position: absolute;top: 10px;left: 10px;background: red; color: #fff;padding: 10px;z-index:10;}


замените на:
/* Товары таблицей */
.products-grid {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;text-align: center;}
.products-grid .item {display: inline-block;position: relative;margin: 0 5px 20px;text-align: center;width: 280px;}
.products-grid .item .item-inner {display: inline-block;position: relative;}
.products-grid .item .product-hover .product-image {display: block;position: relative;line-height: 260px;}
.products-grid .item .product-hover .product-image:before {border: 6px solid #ffffff;bottom: 0;content: "";left: 0;position: absolute;z-index: 1;right: 0;top: 0;transition: all 300ms ease 0s;}
.products-grid .item:hover .product-hover .product-image:before {border: 1px solid transparent;}
.products-grid .item .add-to-links {position: absolute;top: 35%;transform: translateY(-50%);-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-o-transform: translateY(-50%);left: -17px;opacity: 0;z-index: 10;}
.products-grid .item:hover .add-to-links {opacity: 1;}
.products-grid .item .add-to-links a {position: relative;}
.products-grid .item .add-to-links .compare, .products-grid .item .add-to-links .wishlist {transform: scale(0.7);}
.products-grid .item:hover .add-to-links .compare, .products-grid .item:hover .add-to-links .wishlist {transform: scale(1);}
.products-grid .item .add-to-links .compare a, .products-grid .item .add-to-links .wishlist a {margin-top: 10px;}
.products-grid .item .item-info {z-index: 1;position: relative;padding: 10px 0 20px;clear: both;margin: 0px;text-align: center;}
.products-grid .item .item-info .product-name a {font-size: 16px;font-weight: 400;letter-spacing: 0.3px;line-height: 20px;text-transform: capitalize;display: block;height: 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.products-grid .item .item-info .price-box {padding: 0;line-height: normal;}
.products-grid .item .item-info .price-box span.price {display: inline-block;margin: 0 10px 0 0;}
.products-grid .item .item-info .rating-hover {position: absolute;margin: 0 0 30px 0;bottom: -30px;z-index: 1;opacity: 0;width: 100%;}
.products-grid .item:hover .item-info .rating-hover {opacity: 1;bottom: -6px;background: #ffffff;}
.products-grid .item .item-info .ratings {margin: auto;text-align: center;}
.products-grid .item .item-info .ratings .rating-box {margin: auto;text-align: center;}
.products-grid .item .actions {bottom: -17px;color: #ffffff;left: 0;position: absolute;text-align: center;width: 100%;z-index: 1;padding: 0px 0;}
.products-grid .item .actions .button {text-transform: uppercase;}
.products-grid .item .product-hover {position: absolute;max-height: 54px;}
.product {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;display: inline-block;float: none;margin: 0;position: relative;text-align: left;vertical-align: top;}
.product .default {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;overflow: hidden;position: relative;}
.product-img {width: 270px;height: 270px;display:table-cell;vertical-align:middle;text-align:center;background-color:#f2f2f2;}
.product-icon img {display:block;margin:0 auto;}
.product .product-image {display: block;line-height: 0;margin: 0;}
.product-image {display: inline-block;line-height: 0;position: relative;}
.product-image > img {-webkit-transition: opacity 0.2s linear;transition: opacity 0.2s linear;}
.product .product-description {background: #f2f2f2;border-top: 1px solid #e1e1e1;color: #505050;display: table;font-size: 13px;height: 54px;line-height: 18px;position: relative;text-align: center;width: 100.2%;z-index: 1;}
.product .product-description .vertical {display: table-cell;height: 54px;padding-left: 5px;padding-right: 5px;vertical-align: middle;}
.product .product-name {color: #ffffff;font-size: 15px;font-weight: normal;line-height: 16px;margin: 0 0 4px;text-transform: none;height:50px;overflow:hidden;background: #3e7a25;padding: 10px;}
.product-name a {color: #ffffff;text-decoration: none;-webkit-transition: opacity .2s linear;transition: opacity .2s linear;}
.product-name a:hover {opacity: 0.8;filter: alpha(opacity=80);-webkit-transition: opacity .2s linear;transition: opacity .2s linear;}
.product .price {font-weight: bold;font-size: 20px;}
.price-old {color: #7f7f7f;display: inline-block;margin-right: 6px;position: relative;text-decoration:line-through;}
.product .not-rotation-actions {background: #00c59c;bottom:0;left: 0;right: 0;padding: 9px 10px;position: absolute;text-align: center;-webkit-transition: bottom .2s linear;transition: bottom .2s linear;z-index: 1;height:72px;width:99.9%;}
.product:hover .not-rotation-actions {bottom: 100px;-webkit-transition: bottom .2s linear;transition: bottom .2s linear;}
.col-md-1.product .product-hover, .col-md-2.product .product-hover, .col-md-3.product .product-hover, .col-md-4.product .product-hover, .col-md-5.product .product-hover, .col-md-6.product .product-hover, .col-md-7.product .product-hover, .col-md-8.product .product-hover, .col-md-9.product .product-hover, .col-md-10.product .product-hover, .col-md-11.product .product-hover, .col-md-11.product .product-hover {left: 15px;right: 15px;}
.product .product-hover {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;display: none;left: 0;padding: 0;position: absolute;right: 0;bottom: 0;width: 100%;}
.product:hover .product-hover {display: block;-webkit-animation: fadeIn 0.8s;animation: fadeIn 0.8s;}
.product .product-hover .actions {bottom: 0px;left: 0;position: absolute;text-align: center;width: 100%;}
.product .actions a {background: #3e7a25;display: inline-block;height: 54px;margin: 0 -2px;padding-top: 19px;text-align: center;text-decoration: none;vertical-align: top;width: 100%;-webkit-transition: all .2s linear;transition: all .2s linear;color: #fff;text-transform: uppercase;font-size: 26px;}
.add-cart {cursor:pointer;}
.product .actions .add-cart {-webkit-border-radius: 3px 0 0 3px;-moz-border-radius: 3px 0 0 3px;border-radius: 3px 0 0 3px;}
.product .actions a:hover {background: #f2f2f2;-webkit-transition: all .2s linear;transition: all .2s linear;}
.product.rotation, .employee.rotation {overflow: visible;border: 1px solid #3c7b20;background: #f2f2f2;}
.rotation {background: none;-webkit-perspective: 600px;-moz-perspective: 600px;perspective: 600px;}
.rotation .default, .rotation .front-end {overflow: hidden;position: relative;-webkit-transform: rotateX(0deg) rotateY(0deg);-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-moz-transform: rotateX(0deg) rotateY(0deg);-moz-transform-style: preserve-3d;-moz-backface-visibility: hidden;transform: rotateY(0deg);-webkit-transition: all .6s ease-in-out;-moz-transition: all .6s ease-in-out;transition: all .6s ease-in-out;z-index: 24;}
.rotation .default {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.rotation .product-hover, .rotation .back-end {display: block;height: inherit;-webkit-transform: rotateY(-180deg);-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-moz-transform: rotateY(-180deg);-moz-transform-style: preserve-3d;-moz-backface-visibility: hidden;transform: rotateY(-180deg);-moz-transition: all .6s ease-in-out;-webkit-transition: all .6s ease-in-out;transition: all .6s ease-in-out;}
.rotation.hover .product-hover, .rotation.hover .back-end {z-index: 46;-webkit-transform: rotateX(0deg) rotateY(0deg);-moz-transform: rotateX(0deg) rotateY(0deg);transform: rotateY(0deg);-webkit-transition-delay: .2s;-moz-transition-delay: .2s;transition-delay: .2s;}
.rotation .product-image:hover > img {opacity: 1;filter: alpha(opacity=100);}
.item .default .sale{display:block;position: absolute;top: 10px;left: 10px;background: red; color: #fff;padding: 10px;z-index:10;}

После изменений почистите кэш и проверьте товары в категории.

#3 Юрий32

Юрий32

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 71 сообщений

Отправлено 25 Февраль 2019 - 20:58

Просмотр сообщенияVaccina (21 Февраль 2019 - 04:25) писал:

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
 {% IF GOODS_VIEW_TYPE=1 %}
<!-- Вывод товаров ТАБЛИЦЕЙ -->
		 <div class="products-grid row">
		 {% FOR goods %}
				 <div class="item">
				 <div class="item-inner" itemscope itemtype="https://schema.org/Product">
						 <div class="product rotation">
						 <div class="default">
								 {% IF goods.IS_NEW %}
								 <span class="new"></span>
								 {% ELSEIF goods.IS_TOP %}
								 <span class="best"></span>
								 {% ENDIF %}
								 {% IF goods.MAX_DISCOUNT %}
								 <span class="sale right"></span>
								 {% ENDIF %}
								 {% IF goods.MIN_PRICE_OLD > goods.MIN_PRICE_NOW %}
								 <span class="sale right">Скидка <span class="saving"></span>%</span>
								 {%ENDIF%}
								 <div class="product-img">
								 <a href="{goods.URL_MIN_PRICE_NOW | url_amp}" class="product-image" title="{goods.NAME}">
										 <img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=jade{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" class="goods-image-small" alt="{goods.NAME}">
								 </a>
								 </div>
								 <div class="product-description">
								 <div class="vertical">
										 <h3 class="product-name">
										 <a title="{goods.NAME}" href="{goods.URL_MIN_PRICE_NOW | url_amp}">{goods.NAME}</a>
										 </h3>
										 <div class="price">
										 <div class="price-box">
												 <span class="product-price">
														 <span class="price">{goods.MIN_PRICE_NOW | money_format}</span>
												 {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
														 <span class="price-old">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span>
												 {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
														 <span class="price-old">{goods.MIN_PRICE_OLD | money_format}</span>
												 {% ENDIF %}
												 </span>
										 </div>
										 </div>
								 </div>
								 </div>
						 </div><!-- описание товара -->
						 <div class="product-hover">
								 <h3 class="product-name">
								 <a title="{goods.NAME}" href="{goods.URL_MIN_PRICE_NOW | url_amp}">{goods.NAME}</a>
								 </h3>
								 <div class="price">
								 <div class="price-box">
										 <span class="product-price">
										 <span class="price">{goods.MIN_PRICE_NOW | money_format}</span>
										 </span>
								 </div>
								 </div>
								 <div class="product-icon">
								 <a href="{goods.URL_MIN_PRICE_NOW | url_amp}">
										 <img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=jade{% ELSE %}{goods.IMAGE_ICON}{% ENDIF %}" class="goods-image-icon" alt="{goods.NAME}">
								 </a>
								 </div>
								 <div class="short-description">
								 <p>{goods.DESCRIPTION_SHORT}</p>
								 </div>
								 <div class="actions">
								 <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListForm product-form-{goods.MIN_PRICE_NOW_ID}">
										 <input type="hidden" name="hash" value="{HASH}" />
										 <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
										 <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
										 <a class="add-cart quick" title="Быстро оформить заказ" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MIN_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}>
												 <i class="fa fa-shopping-cart"></i>
										 </a>
										 <!--a class="add-cart" title="В корзину" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MIN_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}>
												 <span class="icon-basket"></span>
										 </a-->
										 <!-- Если есть возможность добавить товар в избранное -->
										 <!-- Если есть возможность добавить товар в избранное -->
												 {% IF goods.IS_HAS_IN_FAVORITES_LIST %}
														 <a class="add-wishlist added"
														 data-action-is-add="0"
														 data-action-add-url="{FAVORITES_ADD_URL}"
														 data-action-delete-url="{FAVORITES_DELETE_URL}"
														 data-action-add-title="Добавить &laquo;{goods.NAME}&raquo; в избранное"
														 data-action-delete-title="Убрать &laquo;{goods.NAME}&raquo; из избранного"
														 title="Убрать &laquo;{goods.NAME}&raquo; из избранного"
														 href="{FAVORITES_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;return_to={CURRENT_URL | urlencode}"
														 ><i class="fa fa-heart"></i></a>
												 {% ELSE %}
														 <a class="add-wishlist"
														 data-action-is-add="1"
														 data-action-add-url="{FAVORITES_ADD_URL}"
														 data-action-delete-url="{FAVORITES_DELETE_URL}"
														 data-action-add-title="Добавить &laquo;{goods.NAME}&raquo; в избранное"
														 data-action-delete-title="Убрать &laquo;{goods.NAME}&raquo; из избранного"
														 title="Добавить &laquo;{goods.NAME}&raquo; в избранное" href="{FAVORITES_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;return_to={CURRENT_URL | urlencode}"
														 ><i class="fa fa-heart"></i></a>
												 {% ENDIF %}
												 <!-- END Если есть возможность добавить товар в избранное -->
										 <!-- END Если есть возможность добавить товар в избранное -->
							
										 <!-- Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
												 {% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}
														 {% IF goods.IS_HAS_IN_COMPARE_LIST %}
														 <a class="add-compare added"
																 data-action-is-add="0"
																 data-action-add-url="{COMPARE_ADD_URL}"
																 data-action-delete-url="{COMPARE_DELETE_URL}"
																 data-action-add-title="Добавить &laquo;{goods.NAME}&raquo; в список сравнения с другими товарами"
																 data-action-delete-title="Убрать &laquo;{goods.NAME}&raquo; из списка сравнения с другими товарами"
																 data-prodname="{goods.NAME}"
																 data-produrl="{goods.URL}"
																 data-id="{goods.ID}"
																 data-mod-id="{goods.MIN_PRICE_NOW_ID}"
																 title="Убрать &laquo;{goods.NAME}&raquo; из списка сравнения с другими товарами"
																 href="{COMPARE_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;from={goods.GOODS_FROM}&amp;return_to={CURRENT_URL | urlencode}"
														 ><i class="fa fa-retweet"></i></a>
														 {% ELSE %}
														 <a class="add-compare"
																 data-action-is-add="1"
																 data-action-add-url="{COMPARE_ADD_URL}"
																 data-action-delete-url="{COMPARE_DELETE_URL}"
																 data-action-add-title="Добавить &laquo;{goods.NAME}&raquo; в список сравнения с другими товарами"
																 data-action-delete-title="Убрать &laquo;{goods.NAME}&raquo; из списка сравнения с другими товарами"
																 data-prodname="{goods.NAME}"
																 data-produrl="{goods.URL}"
																 data-id="{goods.ID}"
																 data-mod-id="{goods.MIN_PRICE_NOW_ID}"
																 title="Добавить &laquo;{goods.NAME}&raquo; в список сравнения с другими товарами"
																 href="{COMPARE_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;from={goods.GOODS_FROM}&amp;return_to={CURRENT_URL | urlencode}"
														 ><i class="fa fa-retweet"></i></a>
														 {% ENDIF %}
												 {% ENDIF %}
												 <!-- END Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
										 <!-- END Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
								 </form>
								 </div><!-- кнопки Купить/Избранное/Сравнение -->
						 </div><!-- товар при наведении -->
						 </div>
				 </div>
				 </div>
		 {% ENDFOR %}
		 </div>


замените на:
 {% IF GOODS_VIEW_TYPE=1 %}
<!-- Вывод товаров ТАБЛИЦЕЙ -->
		 <div class="products-grid row">
		 {% FOR goods %}
				 <div class="item">
				 <div class="item-inner" itemscope itemtype="https://schema.org/Product">
						 <div class="product rotation">
						 <div class="default">
										 <h3 class="product-name">
										 <a title="{goods.NAME}" href="{goods.URL_MIN_PRICE_NOW | url_amp}">{goods.NAME}</a>
										 </h3>
								 {% IF goods.IS_NEW %}
								 <span class="new"></span>
								 {% ELSEIF goods.IS_TOP %}
								 <span class="best"></span>
								 {% ENDIF %}
								 {% IF goods.MAX_DISCOUNT %}
								 <span class="sale right"></span>
								 {% ENDIF %}
								 {% IF goods.MIN_PRICE_OLD > goods.MIN_PRICE_NOW %}
								 <span class="sale right">Скидка <span class="saving"></span>%</span>
								 {%ENDIF%}
								 <div class="product-img">
								 <a href="{goods.URL_MIN_PRICE_NOW | url_amp}" class="product-image" title="{goods.NAME}">
										 <img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=jade{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" class="goods-image-small" alt="{goods.NAME}">
								 </a>
								 </div>
								 <div class="product-description">
								 <div class="vertical">
										 <div class="price">
										 <div class="price-box">
												 <span class="product-price">
														 <span class="price">{goods.MIN_PRICE_NOW | money_format}</span>
												 {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
														 <span class="price-old">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span>
												 {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
														 <span class="price-old">{goods.MIN_PRICE_OLD | money_format}</span>
												 {% ENDIF %}
												 </span>
										 </div>
										 </div>
								 </div>
								 </div>
						 </div><!-- описание товара -->
						 <div class="product-hover">
								 <div class="actions">
								 <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListForm product-form-{goods.MIN_PRICE_NOW_ID}">
										 <input type="hidden" name="hash" value="{HASH}" />
										 <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
										 <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
										 <a class="add-cart quick" title="Быстро оформить заказ" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MIN_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}>Купить</a>
								 </form>
								 </div><!-- кнопки Купить/Избранное/Сравнение -->
						 </div><!-- товар при наведении -->
						 </div>
				 </div>
				 </div>
		 {% ENDFOR %}
		 </div>

далее зайдите в main.css - найдите:
/* Товары таблицей */
.products-grid {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;text-align: center;}
.products-grid .item {display: inline-block;position: relative;margin: 0 5px 20px;text-align: center;}
.products-grid .item .item-inner {width: 262px;display: inline-block;margin-bottom: 30px;position: relative;border-bottom: 1px solid #dddddd;}
.products-grid .item .product-hover {position: relative;border: 1px solid #dddddd;max-width: 250px;max-height: 257px;}
.products-grid .item .product-hover .product-image {display: block;position: relative;line-height: 260px;}
.products-grid .item .product-hover .product-image:before {border: 6px solid #ffffff;bottom: 0;content: "";left: 0;position: absolute;z-index: 1;right: 0;top: 0;transition: all 300ms ease 0s;}
.products-grid .item:hover .product-hover .product-image:before {border: 1px solid transparent;}
.products-grid .item .add-to-links {position: absolute;top: 35%;transform: translateY(-50%);-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-o-transform: translateY(-50%);left: -17px;opacity: 0;z-index: 10;}
.products-grid .item:hover .add-to-links {opacity: 1;}
.products-grid .item .add-to-links a {position: relative;}
.products-grid .item .add-to-links .compare, .products-grid .item .add-to-links .wishlist {transform: scale(0.7);}
.products-grid .item:hover .add-to-links .compare, .products-grid .item:hover .add-to-links .wishlist {transform: scale(1);}
.products-grid .item .add-to-links .compare a, .products-grid .item .add-to-links .wishlist a {margin-top: 10px;}
.products-grid .item .item-info {z-index: 1;position: relative;padding: 10px 0 20px;clear: both;margin: 0px;text-align: center;}
.products-grid .item .item-info .product-name a {font-size: 16px;font-weight: 400;letter-spacing: 0.3px;line-height: 20px;text-transform: capitalize;display: block;height: 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.products-grid .item .item-info .price-box {padding: 0;line-height: normal;}
.products-grid .item .item-info .price-box span.price {display: inline-block;margin: 0 10px 0 0;}
.products-grid .item .item-info .rating-hover {position: absolute;margin: 0 0 30px 0;bottom: -30px;z-index: 1;opacity: 0;width: 100%;}
.products-grid .item:hover .item-info .rating-hover {opacity: 1;bottom: -6px;background: #ffffff;}
.products-grid .item .item-info .ratings {margin: auto;text-align: center;}
.products-grid .item .item-info .ratings .rating-box {margin: auto;text-align: center;}
.products-grid .item .actions {bottom: -17px;color: #ffffff;left: 0;position: absolute;text-align: center;width: 100%;z-index: 1;padding: 0px 0;}
.products-grid .item .actions .button {text-transform: uppercase;}
.products-grid .item .product-hover {position: absolute;border: 1px solid #dddddd;max-width: 100%;max-height: 100%;}
.product {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;display: inline-block;float: none;margin: 0 0 40px;/*min-width: 240px;*/overflow: hidden;position: relative;text-align: left;vertical-align: top;}
.product .default {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;overflow: hidden;position: relative;}
.product-img {width: 270px;height: 270px;display:table-cell;vertical-align:middle;text-align:center;background-color:#f2f2f2;}
.product-icon img {display:block;margin:0 auto;}
.product .product-image {display: block;line-height: 0;margin: 0;}
.product-image {display: inline-block;line-height: 0;position: relative;}
.product-image > img {-webkit-transition: opacity 0.2s linear;transition: opacity 0.2s linear;}
.product .product-description {background: #f2f2f2;border-top: 1px solid #e1e1e1;color: #505050;display: table;font-size: 13px;height: 100px;line-height: 18px;position: relative;text-align: center;width: 100.2%;z-index: 1;}
.product .product-description .vertical {display: table-cell;height: 100px;padding-left: 5px;padding-right: 5px;vertical-align: middle;}
.product .product-name {color: #1e1e1e;font-size: 15px;font-weight: normal;line-height: 16px;margin: 0 0 4px;text-transform: none;max-height:50px;overflow:hidden;}
.product-name a {color: #1e1e1e;text-decoration: none;-webkit-transition: opacity .2s linear;transition: opacity .2s linear;}
.product-name a:hover {opacity: 0.8;filter: alpha(opacity=80);-webkit-transition: opacity .2s linear;transition: opacity .2s linear;}
.product .price {font-weight: bold;font-size: 20px;}
.price-old {color: #7f7f7f;display: inline-block;margin-right: 6px;position: relative;text-decoration:line-through;}
.product .not-rotation-actions {background: #00c59c;bottom:0;left: 0;right: 0;padding: 9px 10px;position: absolute;text-align: center;-webkit-transition: bottom .2s linear;transition: bottom .2s linear;z-index: 1;height:72px;width:99.9%;}
.product:hover .not-rotation-actions {bottom: 100px;-webkit-transition: bottom .2s linear;transition: bottom .2s linear;}
.col-md-1.product .product-hover, .col-md-2.product .product-hover, .col-md-3.product .product-hover, .col-md-4.product .product-hover, .col-md-5.product .product-hover, .col-md-6.product .product-hover, .col-md-7.product .product-hover, .col-md-8.product .product-hover, .col-md-9.product .product-hover, .col-md-10.product .product-hover, .col-md-11.product .product-hover, .col-md-11.product .product-hover {left: 15px;right: 15px;}
.product .product-hover {height:100%;background-color: #ffb300;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;bottom: 0;color: #7f7f7f;display: none;font-size: 12px;line-height: 20px;left: 0;padding: 16px 20px 90px;position: absolute;right: 0;top: 0;width: auto !important;}
.product:hover .product-hover {display: block;-webkit-animation: fadeIn 0.8s;animation: fadeIn 0.8s;}
.product .product-hover .product-name {font-size: 13px;font-weight: normal;line-height: 18px;margin: 0 0 7px;}
.product .product-hover .product-name a {color: #fff;-webkit-transition: opacity .2s linear;transition: opacity .2s linear;}
.product .product-hover .product-name a:hover {opacity: 0.8;filter: alpha(opacity=80);-webkit-transition: opacity .2s linear;transition: opacity .2s linear;text-decoration: none;}
.product .product-hover .price {font-size: 18px;font-weight: normal;line-height: 1;margin: 0 0 5px;color:#fff;}
.product .product-hover .short-description {color: #ffffff;height: 110px;overflow-y: hidden;width: 100%;padding: 5px;}
.product .product-hover .product-image {-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;display: block;float: right;line-height: 0;margin: 4px 0 0 5px;padding: 0;position: relative;z-index: 1;}
.product .product-hover .product-image img {-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;}
.product .product-hover .actions {bottom: 0px;left: 0;position: absolute;text-align: center;width: 100%;}
.product .actions a {background: #fff;display: inline-block;height: 54px;margin: 0 -2px;padding-top: 19px;text-align: center;text-decoration: none;vertical-align: top;width: 54px;-webkit-transition: all .2s linear;transition: all .2s linear;}
.add-cart {cursor:pointer;}
.product .actions .add-cart {-webkit-border-radius: 3px 0 0 3px;-moz-border-radius: 3px 0 0 3px;border-radius: 3px 0 0 3px;}
.product .actions .add-compare {-webkit-border-radius: 0 3px 3px 0;-moz-border-radius: 0 3px 3px 0;border-radius: 0 3px 3px 0;}
.product .actions a:hover {background: #f2f2f2;-webkit-transition: all .2s linear;transition: all .2s linear;}
.product.rotation, .employee.rotation {overflow: visible;border: 1px solid #3c7b20;background: #f2f2f2;}
.rotation {background: none;-webkit-perspective: 600px;-moz-perspective: 600px;perspective: 600px;}
.rotation .default, .rotation .front-end {overflow: hidden;position: relative;-webkit-transform: rotateX(0deg) rotateY(0deg);-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-moz-transform: rotateX(0deg) rotateY(0deg);-moz-transform-style: preserve-3d;-moz-backface-visibility: hidden;transform: rotateY(0deg);-webkit-transition: all .6s ease-in-out;-moz-transition: all .6s ease-in-out;transition: all .6s ease-in-out;z-index: 24;}
.rotation .default {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.rotation.hover .default, .rotation.hover .front-end {z-index: 35;-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);transform: rotateY(180deg);-webkit-transition-delay: .2s;-moz-transition-delay: .2s;transition-delay: .2s;}
.rotation .product-hover, .rotation .back-end {display: block;height: inherit;-webkit-transform: rotateY(-180deg);-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-moz-transform: rotateY(-180deg);-moz-transform-style: preserve-3d;-moz-backface-visibility: hidden;transform: rotateY(-180deg);-moz-transition: all .6s ease-in-out;-webkit-transition: all .6s ease-in-out;transition: all .6s ease-in-out;width: 100%;z-index: 13;}
.rotation.hover .product-hover, .rotation.hover .back-end {z-index: 46;-webkit-transform: rotateX(0deg) rotateY(0deg);-moz-transform: rotateX(0deg) rotateY(0deg);transform: rotateY(0deg);-webkit-transition-delay: .2s;-moz-transition-delay: .2s;transition-delay: .2s;}
.rotation .product-image:hover > img {opacity: 1;filter: alpha(opacity=100);}
.item .default .sale{display:block;position: absolute;top: 10px;left: 10px;background: red; color: #fff;padding: 10px;z-index:10;}


замените на:
/* Товары таблицей */
.products-grid {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;text-align: center;}
.products-grid .item {display: inline-block;position: relative;margin: 0 5px 20px;text-align: center;width: 280px;}
.products-grid .item .item-inner {display: inline-block;position: relative;}
.products-grid .item .product-hover .product-image {display: block;position: relative;line-height: 260px;}
.products-grid .item .product-hover .product-image:before {border: 6px solid #ffffff;bottom: 0;content: "";left: 0;position: absolute;z-index: 1;right: 0;top: 0;transition: all 300ms ease 0s;}
.products-grid .item:hover .product-hover .product-image:before {border: 1px solid transparent;}
.products-grid .item .add-to-links {position: absolute;top: 35%;transform: translateY(-50%);-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-o-transform: translateY(-50%);left: -17px;opacity: 0;z-index: 10;}
.products-grid .item:hover .add-to-links {opacity: 1;}
.products-grid .item .add-to-links a {position: relative;}
.products-grid .item .add-to-links .compare, .products-grid .item .add-to-links .wishlist {transform: scale(0.7);}
.products-grid .item:hover .add-to-links .compare, .products-grid .item:hover .add-to-links .wishlist {transform: scale(1);}
.products-grid .item .add-to-links .compare a, .products-grid .item .add-to-links .wishlist a {margin-top: 10px;}
.products-grid .item .item-info {z-index: 1;position: relative;padding: 10px 0 20px;clear: both;margin: 0px;text-align: center;}
.products-grid .item .item-info .product-name a {font-size: 16px;font-weight: 400;letter-spacing: 0.3px;line-height: 20px;text-transform: capitalize;display: block;height: 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.products-grid .item .item-info .price-box {padding: 0;line-height: normal;}
.products-grid .item .item-info .price-box span.price {display: inline-block;margin: 0 10px 0 0;}
.products-grid .item .item-info .rating-hover {position: absolute;margin: 0 0 30px 0;bottom: -30px;z-index: 1;opacity: 0;width: 100%;}
.products-grid .item:hover .item-info .rating-hover {opacity: 1;bottom: -6px;background: #ffffff;}
.products-grid .item .item-info .ratings {margin: auto;text-align: center;}
.products-grid .item .item-info .ratings .rating-box {margin: auto;text-align: center;}
.products-grid .item .actions {bottom: -17px;color: #ffffff;left: 0;position: absolute;text-align: center;width: 100%;z-index: 1;padding: 0px 0;}
.products-grid .item .actions .button {text-transform: uppercase;}
.products-grid .item .product-hover {position: absolute;max-height: 54px;}
.product {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;display: inline-block;float: none;margin: 0;position: relative;text-align: left;vertical-align: top;}
.product .default {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;overflow: hidden;position: relative;}
.product-img {width: 270px;height: 270px;display:table-cell;vertical-align:middle;text-align:center;background-color:#f2f2f2;}
.product-icon img {display:block;margin:0 auto;}
.product .product-image {display: block;line-height: 0;margin: 0;}
.product-image {display: inline-block;line-height: 0;position: relative;}
.product-image > img {-webkit-transition: opacity 0.2s linear;transition: opacity 0.2s linear;}
.product .product-description {background: #f2f2f2;border-top: 1px solid #e1e1e1;color: #505050;display: table;font-size: 13px;height: 54px;line-height: 18px;position: relative;text-align: center;width: 100.2%;z-index: 1;}
.product .product-description .vertical {display: table-cell;height: 54px;padding-left: 5px;padding-right: 5px;vertical-align: middle;}
.product .product-name {color: #ffffff;font-size: 15px;font-weight: normal;line-height: 16px;margin: 0 0 4px;text-transform: none;height:50px;overflow:hidden;background: #3e7a25;padding: 10px;}
.product-name a {color: #ffffff;text-decoration: none;-webkit-transition: opacity .2s linear;transition: opacity .2s linear;}
.product-name a:hover {opacity: 0.8;filter: alpha(opacity=80);-webkit-transition: opacity .2s linear;transition: opacity .2s linear;}
.product .price {font-weight: bold;font-size: 20px;}
.price-old {color: #7f7f7f;display: inline-block;margin-right: 6px;position: relative;text-decoration:line-through;}
.product .not-rotation-actions {background: #00c59c;bottom:0;left: 0;right: 0;padding: 9px 10px;position: absolute;text-align: center;-webkit-transition: bottom .2s linear;transition: bottom .2s linear;z-index: 1;height:72px;width:99.9%;}
.product:hover .not-rotation-actions {bottom: 100px;-webkit-transition: bottom .2s linear;transition: bottom .2s linear;}
.col-md-1.product .product-hover, .col-md-2.product .product-hover, .col-md-3.product .product-hover, .col-md-4.product .product-hover, .col-md-5.product .product-hover, .col-md-6.product .product-hover, .col-md-7.product .product-hover, .col-md-8.product .product-hover, .col-md-9.product .product-hover, .col-md-10.product .product-hover, .col-md-11.product .product-hover, .col-md-11.product .product-hover {left: 15px;right: 15px;}
.product .product-hover {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;display: none;left: 0;padding: 0;position: absolute;right: 0;bottom: 0;width: 100%;}
.product:hover .product-hover {display: block;-webkit-animation: fadeIn 0.8s;animation: fadeIn 0.8s;}
.product .product-hover .actions {bottom: 0px;left: 0;position: absolute;text-align: center;width: 100%;}
.product .actions a {background: #3e7a25;display: inline-block;height: 54px;margin: 0 -2px;padding-top: 19px;text-align: center;text-decoration: none;vertical-align: top;width: 100%;-webkit-transition: all .2s linear;transition: all .2s linear;color: #fff;text-transform: uppercase;font-size: 26px;}
.add-cart {cursor:pointer;}
.product .actions .add-cart {-webkit-border-radius: 3px 0 0 3px;-moz-border-radius: 3px 0 0 3px;border-radius: 3px 0 0 3px;}
.product .actions a:hover {background: #f2f2f2;-webkit-transition: all .2s linear;transition: all .2s linear;}
.product.rotation, .employee.rotation {overflow: visible;border: 1px solid #3c7b20;background: #f2f2f2;}
.rotation {background: none;-webkit-perspective: 600px;-moz-perspective: 600px;perspective: 600px;}
.rotation .default, .rotation .front-end {overflow: hidden;position: relative;-webkit-transform: rotateX(0deg) rotateY(0deg);-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-moz-transform: rotateX(0deg) rotateY(0deg);-moz-transform-style: preserve-3d;-moz-backface-visibility: hidden;transform: rotateY(0deg);-webkit-transition: all .6s ease-in-out;-moz-transition: all .6s ease-in-out;transition: all .6s ease-in-out;z-index: 24;}
.rotation .default {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.rotation .product-hover, .rotation .back-end {display: block;height: inherit;-webkit-transform: rotateY(-180deg);-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-moz-transform: rotateY(-180deg);-moz-transform-style: preserve-3d;-moz-backface-visibility: hidden;transform: rotateY(-180deg);-moz-transition: all .6s ease-in-out;-webkit-transition: all .6s ease-in-out;transition: all .6s ease-in-out;}
.rotation.hover .product-hover, .rotation.hover .back-end {z-index: 46;-webkit-transform: rotateX(0deg) rotateY(0deg);-moz-transform: rotateX(0deg) rotateY(0deg);transform: rotateY(0deg);-webkit-transition-delay: .2s;-moz-transition-delay: .2s;transition-delay: .2s;}
.rotation .product-image:hover > img {opacity: 1;filter: alpha(opacity=100);}
.item .default .sale{display:block;position: absolute;top: 10px;left: 10px;background: red; color: #fff;padding: 10px;z-index:10;}

После изменений почистите кэш и проверьте товары в категории.
Здравствуйте, код не подходит

#4 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 27 Февраль 2019 - 06:38

Здравствуйте.

Уточните пожалуйста, по какой причине он вам не подходит? Инструкция написана на основе скриншота из первого сообщения, результат следующий:
Полезные товары.png

#5 Юрий32

Юрий32

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 71 сообщений

Отправлено 01 Март 2019 - 18:12

Просмотр сообщенияVaccina (27 Февраль 2019 - 06:38) писал:

Здравствуйте.

Уточните пожалуйста, по какой причине он вам не подходит? Инструкция написана на основе скриншота из первого сообщения, результат следующий:
Прикрепленный файл Полезные товары.png
Здравствуйте,  делаю по инструкции, но ничего не выходит, все карточки перекошены

#6 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 05 Март 2019 - 06:51

Здравствуйте.

Уточните пожалуйста, после изменений вы проверяете вывод товаров только в категориях? Так как инструкция выше только для данного раздела, код еще не адаптирован для товаров на главной странице, если проверяете в категории и некорректно отображается список товаров, то пришлите пожалуйста скриншот.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных