Align the product card description to the left

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

  • Avatar: misha
    misha
    Participant
    August 29, 2021 at 16:03

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

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

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

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

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

    Please, contact administrator
    for this information.
    7 Answers
    Avatar: Rose Tyler
    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

    Avatar: misha
    misha
    Participant
    August 30, 2021 at 17:46

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

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

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

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

    Спасибо!

    Avatar: Rose Tyler
    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

    Avatar: misha
    misha
    Participant
    September 1, 2021 at 08:16

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

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

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

    Спасибо!

    Avatar: Rose Tyler
    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

    Avatar: misha
    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 (как редактировать наведение).

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

    Avatar: Rose Tyler
    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

  • Viewing 8 results - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.