Return to previous page

Align the product card description to the left

This topic has 8 replies, 2 voices, and was last updated 3 years, 2 months ago ago by Rose Tyler

misha

Participant

August 29, 2021 at 16:03

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

Подскажите, пожалуйста, как выровнять описание карточки товара (название, цена, рейтинг, вариации и т.п.) по левому краю.
https://prnt.sc/1qqv7wb

Можно ли сделать всегда видимым значок добавить в избранное и добавить в корзину (сейчас только при наведении)?
https://prnt.sc/1qqvs0h

И подскажите, пользуясь YellowPencil, я никак не нарушаю сайт?

Спасибо, Вышитое ответы очень помогают!

Please, contact administrator
for this information.

#300398 Copied Theme version: 8.0.5

7 Answers
Rose Tyler

Support staff

August 30, 2021 at 09:32
Hello,

1/ Add the next code in Theme Options > Theme Custom CSS:
```
.products-loop .content-product .product-details, .swiper-container .content-product .product-details {
    text-align: start;
}
```
and delete the next code – https://gyazo.com/8b9e7674667f78e0dd67d09873aaa4d9
2/
```
.product-view-default .footer-product {
    opacity: 1;
}
```
3/ Our theme is fully compatible with YellowPencil, but sometimes classes that are taken by the plugin can be not fully correct, so feel free to content us if you have questions/doubts.

Regards
#300459 Copied
misha

Participant

August 30, 2021 at 17:46

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

Спасибо за Ваш ответ!

1) Все получилось, кроме звезд (рейтинга) он остался по центру.

2) сначала получилось. Ну как я поменял в настойках стиль продукции – Эффект Содержания Продукта на “кнопки по наведению” все перестало работать. И отображается надпись вместо иконок. Подскажете, пожалуйста, не могу разобраться.
И если возможно, скажите, как можно сделать кнопки выравнивание по левому нижнему краю.

Спасибо!

#300563 Copied
Rose Tyler

Support staff

August 31, 2021 at 09:41
Hello,

1/
```
.content-product .star-rating { 
    margin-left: 0;
}
```
2/ Texts are visible because of this code that comes from YellowPencil plugin, please delete the code – https://gyazo.com/a76465085fb65c754e0e3c123997dff7
Change this – https://prnt.sc/1qv8qds to
```
.content-product .footer-product {
    opacity: 1;
}
```
Then

И если возможно, скажите, как можно сделать кнопки выравнивание по левому нижнему краю.
```
.product-view-mask3 .content-product .footer-product {
    top: 89%;
    justify-content: end;
}
```
Regards
#300609 Copied
misha

Participant

September 1, 2021 at 08:16

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

Вы великолепны, Rose Tyler! Спасибо, все стало хорошо.

Только, почему-то не отображается в мобильной версии.
И подскажите, пожалуйста, иконки подпрыгивают при наведении (как можно убрать)? И при наведении на атрибуты (цвет и размер, внизу страницы) иконки пропадают.

Спасибо!

#300816 Copied
Rose Tyler

Support staff

September 1, 2021 at 11:03
Hello,

– You’re welcome!
– Theme Options > WooCommerce > Shop > Products style > Элементы Содержимого Продукта > enable “Кнопки наведения курсора на мобильный телефон”
– Change https://prnt.sc/1qxxglf to 85%, and add the next code also –
```
.product-view-mask3 .content-product:hover .footer-product,
.product-view-mask3 .content-product .footer-product {
    transform: none;
    -webkit-transform: none;
}
```
–
```
.content-product .is_arrows-hovered .footer-product {
    opacity: 1;
    transform: none;
}
```
Regards
#300856 Copied
misha

Participant

September 4, 2021 at 08:46

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

Спасибо все стало отлично!

Rose Tyler, подскажите, пожалуйста, почему-то в мобильной версии панель слезает в низ. https://prnt.sc/1r6xjpm

И подскажите, я все делаю верно (правильный код?), хотел выравнять по правому боку и одинаковый отступ сделать:
.main-products-loop .product footer{
justify-content: flex-end;
margin-right:15px;
}

И подскажите, как сделать рамку при наведении (если не сложно), а то уже несколько дней разбираюсь не могу найти в YellowPencil (как редактировать наведение).

Большое спасибо!

#301279 Copied

Rose Tyler

Support staff

September 4, 2021 at 09:27

Hello,

1/ Try to play with this value – https://prnt.sc/1r70wtq
2/ Change this code http://prntscr.com/1r713de to https://prnt.sc/1r715fn
3/ Please try – Theme options > WooCommerce > Shop > Products style > Box Shadow On Hover

Regards

#301283 Copied
Viewing 8 results - 1 through 8 (of 8 total)