Return to previous page

Customize the fonts for a product widgets only

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

Rodrigo Carlos

Participant

July 12, 2020 at 17:16

Hello people,

I am using Elementor to create the home page. I’m inserting the XStore products widget (https://prnt.sc/tgdovn) and configuring the appearance to be in slider.

And what I would like to know is how do I change the fonts (product title, price and ect) only for that widget?

I am using CSS (https://prnt.sc/tgdnwe), but for that I need to use the default attributes of the XStore product widget (https://prnt.sc/tgdthw / https://prnt.sc/tgdtt4) and with that, any change in the font will also change for all fonts on the page that uses this widget (https://prnt.sc/tgdv2g).

Another problem … I deactivated the product excerpt, the brand and left it to the product widget to show only the title and price. But as you can see, in the slider widget, the excerpt is being shown (https://prnt.sc/tgdxwe). See the page: https://cerejasbolsas.com.br/elementor-6423

Another problem … on the Bullets page, it is very close to the product image, practically on top of the image (https://prnt.sc/tgdyh5). How do I distance myself from the product image?

Thank you!

#244219 Copied Theme version: 6.3.5 WooCommerce version: 4.2.0

5 Answers

Olga Barlow

Support staff

July 13, 2020 at 18:27

Hello,

1) We don’t have options to edit the product title, price, categories styles for that element only. Use selector to apply changes for the current element only http://prntscr.com/th1rnz

2) Unfortunately, this element does not have option to disable excerpt for the list design. YOu can do this by custom CSS only.

3) Check now.

Regards

#244288 Copied

Rodrigo Carlos

Participant

July 15, 2020 at 02:40

OK it worked. Thank you.

Could you help me get that space out? https://prnt.sc/thx9bm
I’m trying on CSS but I’m not getting it.

And could you help me insert the pagination list below the price? https://prnt.sc/thxa02

#244427 Copied
Rose Tyler

Support staff

July 15, 2020 at 08:02
Hi,

1) Add this custom CSS code
```
.elementor-6423 .elementor-element.elementor-element-45c0e14 .swiper-lazy {
    max-width: 230px !important;
    max-height: 230px !important;
}
```
http://prntscr.com/ti1lb6
2) There is no such possibility.

Regards
#244444 Copied
Rodrigo Carlos

Participant

July 16, 2020 at 03:03

Hi Rose,

1) I entered the code (https://prnt.sc/timqbb), but it continues with the space (https://prnt.sc/timqyd).

2) In the case of pagination, if I enter “position: absolute” (https://prnt.sc/tims8v), the page is at the height I would like, however, it is not centered where I want it (https://prnt.sc/timtnh).

#244536 Copied
Rose Tyler

Support staff

July 16, 2020 at 09:22
Hi,

1) You can change 230px to 250px, but there is no possibility to remove the space completely.
2) Change this code https://prnt.sc/tisg3o to
```
.elementor-6423 .swiper-pagination {
    text-align: right;
    left: unset !important;
    right: 13% !important;
}
```
Regards
#244549 Copied
Viewing 6 results - 1 through 6 (of 6 total)