Return to previous page

Change size, color on product thumbnail caption (shop page)

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

misha

Participant

May 21, 2022 at 08:10

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

Подскажите, пожалуйста, как можно изменить цвет (шрифт), размер (шрифт, цена, звезда) и расстояние между объектами? На подписи к миниатюре на странице магазина https://prnt.sc/qkIxrNMVUDt-

С уважением,

#324327 Copied Theme version: 8.1.6

7 Answers
Rose Tyler

Support staff

May 21, 2022 at 08:29
Hello,
```
.content-product .product-title a {
    color: red;font-size: 20px;
}
.content-product .price {
    color: red !important;
    font-size: 16px;
    margin-top: 10px;
}
.content-product .price ins span {
    font-size: 16px;
    color: #00ff21;
}
```
Regards
#324329 Copied
misha

Participant

May 21, 2022 at 10:24

Спасибо!

Подскажите, пожалуйста, как еще уменьшить расстояние здесь: https://prnt.sc/2Xfnz-3Ijxc-

С уважением,

#324337 Copied
Rose Tyler

Support staff

May 21, 2022 at 10:31
Please try the next code:
```
.content-product .product-title {
    height: auto;
}
```
Regards
#324341 Copied
misha

Participant

May 21, 2022 at 10:53

Спасибо!

Подскажите, пожалуйста, как еще выравнять расстояние здесь: https://prnt.sc/B9j7e8ZK9mD0

И как Вы находите код, где ровнять? 😉

С уважением,

#324344 Copied
Rose Tyler

Support staff

May 21, 2022 at 12:59
https://prnt.sc/TRzhkbbEufN3
```
.st-item-meta .st-swatch-preview.type-image~.et_show-more-attr, ul.st-swatch-preview li.type-image~.et_show-more-attr {
    vertical-align: 6px;
}
```
```
.content-product .price {
    margin-top: -5px;
}
```
https://prnt.sc/lGuROleEkvOF

To access the DevTools, open a web page or web app in Google Chrome. Either:
-Select the Chrome menu Chrome Menu at the top-right of your browser window, then select Tools > Developer Tools.
-Right-click on any page element and select Inspect Element.
The DevTools window will open at the bottom of your Chrome browser.

Regards
#324348 Copied
misha

Participant

May 21, 2022 at 13:22

Спасибо! Я тоже так ищу, ну у меня не всегда почему-то получается.

Вот к примеру я хочу убрать слово “Цена”, вот тут: https://prnt.sc/QsMHcl-b0y0g
Ну не могу найти его как убрать. 🙁

С уважением,

#324353 Copied

Rose Tyler

Support staff

May 22, 2022 at 07:27

Hello,

It can’t be removed using custom CSS.
Edit translation of XStore Core plugin via Loco translate and change “Price:” to empty space (gap).

Regards

#324374 Copied
Tagged: best selling, change, color, size, themes, thumbnail caption, woocommerce
Viewing 8 results - 1 through 8 (of 8 total)