Return to previous page

Search bar problems and a little customization help

This topic has 14 replies, 2 voices, and was last updated 2 years, 9 months ago ago by Olga Barlow

Pablo Emilio Nazario

Participant

January 19, 2022 at 23:08

hello. happy 10th anniversary!

after the last update i started to have several problems with the theme. especially with the wordpress customizer. the screen remains blank and does not finish loading. after two or three attempts, it shows me the left part where the options are, but the right part remains white. so far i managed to solve it by pressing the responsive icon of tablet or mobile and then the customizer starts loading. it also causes a 100% load of the server and the google console shows several errors. we will see that in another thread.

now i would like to solve this error. i send screenshot. i marked it with the number 2. The bar where the main menu is in the header, is above the dropdown that appears when you do a search and blocks part of the result.

continuing with the search bar, how can I change the font style, size etc, when it shows me the search result? . Marked with number 1 in the screenshot.

When I do a search for a product, the bar returns the list found. If the result gives several products, it shows some of them and then you have to scroll down with the mouse wheel until you reach the “see all products” sign.

How can I make this “see all products” message permanently visible to the customer?

You may have noticed that the “down scroll” bar is hardly visible, it is not very intuitive for many people who do not use the mouse wheel.

thank you!

Please, contact administrator
for this information.

#314793 Copied Theme version: 8.0.12 WooCommerce version: 6.0.0

13 Answers
Olga Barlow

Support staff

January 21, 2022 at 11:46
Hello,

1) Provide us with WP Dashboard access to check your customizer appearance.

2) It’s because custom styles of the Yellow pencil plugin. Provide us with WP Dashboard access and we’ll check the styles and remove that.
3) There is no option to change the styles by default but it’s possible with the additional customization. Tell me what styles do you want to apply for the search results product title and we’ll send you custom CSS
3) Add the below code to Theme Options > Custom CSS
to make the View all results link fixed
```
.header-wrapper .et-content-dropdown .ajax-results-more:last-child {
    position: sticky;
    bottom: -30px;
}
```
Regards
#314862 Copied
Pablo Emilio Nazario

Participant

January 21, 2022 at 18:22

1) Provide us with WP Dashboard access to check your customizer appearance. (done)

2) It’s because custom styles of the Yellow pencil plugin. Provide us with WP Dashboard access and we’ll check the styles and remove that.

all the modifications I made to the css code were done with yellow pencil. (in the global section). I deleted part of the demo ccs from the customizer.

3) There is no option to change the styles by default but it’s possible with the additional customization. Tell me what styles do you want to apply for the search results product title and we’ll send you custom CSS

The font I am using is roboto. For the search bar I am using a size of 13 pixels. You can set the selector, the font color black, uppercase, letter spacing 0,03em.

3) Add the below code to Theme Options > Custom CSS
to make the View all results link fixed

Ok. But i will wait for you to check the customizer problem. I warn you that the url where I am doing the tests is a stage of the main site. the main site is with previous version of xstore and I just checked that the console does not give errors but the customizer is loading without finishing. there are some security measures applied on the wordpress installations from the server. Also the “cron.php” file is deactivated by recommendation of my hosting.

anyway, the error appears when I CLEAR THE CACHE OF THE CHROME BROWSER. I would recommend you to do the same before entering the customizer.

Thank you!

Please contact administrator
for this information.

#314927 Copied

Olga Barlow

Support staff

January 21, 2022 at 19:29

Hello,

1) Do you have any errors in the server error logs? Could you, please, provide us with the server error logs and also with the FTP access to your site because you did not provide the URL to your cPanel.
I see a lot of errors in console https://prnt.sc/26h1ny6
So, it looks that something is blocked from the server side.
2) This code was the reason of the issue https://prnt.sc/26h1e34
I removed that.
3) I have added custom code to child theme style.css. Check the titles now.

Regards

#314951 Copied

Pablo Emilio Nazario

Participant

January 21, 2022 at 20:11

thanks olga

sorry for that. I repeat them in the private area.

inside the cpanel, I use “wordpress toolkit” to apply some security measures. you can change whatever you think will affect the theme performance.

thanks

Please contact administrator
for this information.

#314959 Copied

Olga Barlow

Support staff

January 24, 2022 at 10:14

Hello,

We found that issue was caused by Disable WooCommerce Bloat plugin. Actually, because of these options in the plugin settings https://prnt.sc/26ihkqw

I have disabled them and customizer loads ok for me.

Regards

#315053 Copied

Pablo Emilio Nazario

Participant

January 24, 2022 at 17:18

Good morning.

Thank you very much for the code for the search bar and for checking the other problems.
The theme customizer works without errors. Great!

I have already sent a message to the hosting. I have also installed query monitor and wordpress debbug is enabled so it is easier to detect the source of errors. So far, the only ones it shows are related to elementor pro, duplicate queries and a lot of queries. Example: the shop page generates 290 queries. I don’t know if it is a high number, but we will see that later.

question. I can’t quite understand how to control the typography. What should I configure for elementor to take the changes in font styles (size, weight, family, etc.)?
From the xstore customizer and using css I was able to define a style for the store font. But when elementor shows me the homepage, it changes the size, spacing between letters, etc, etc. What am I doing wrong.?

I don’t understand why xstore doesn’t take the changes defined in the typography section of elementor (H1 – H2 – H3, etc etc.}. Elementor pro added a series of “experiments” to its plugin.
I should disable those that are related to the attempt to minimize the load of css and js code in elementor pro.?

I would appreciate if you can explain me how is the workflow to define the fonts to use (there are 2 fonts, one for text and another for headers, widgets, etc).

Thank you.

#315095 Copied

Olga Barlow

Support staff

January 25, 2022 at 11:32

Hello.

Our theme has the next places for the Typography:
1) Theme Options > Typography. It controls the Body font and Headings font-family. All the elements on the site inherit these fonts if other is not changed in the personal element settings.
2) Theme Options > Header builder. And there are a few places to change the font of the header or menu elements if you need that or keep default settings and then body font will be used.

XStore supports Elementor Typography settings for the headings and if you inspect the element you’ll see that it uses the Elementor settings https://prnt.sc/26j1kdd

So, what exactly does not work for you? Provide screenshot of the element that displays the wrong font and we’ll inspect that.

You can use Elementor experiment settings. The only option that could make a problem is CSS optimization. Sometimes it causes style issue for the mobile version of the static blocks. So, you can try to enabled and check. If everything is ok then keep it enabled. In case you have style issues then it would be better to disable that.

Regards

#315145 Copied

Pablo Emilio Nazario

Participant

January 25, 2022 at 21:52

Ok Olga. Clearly I did something wrong so I did the following.

I’m going to take advantage of the fact that I’m learning how xstore works. It is an incredibly customizable theme, but complex to understand for me.

I am working on a stage that I made from the main domain, where the niche market 03 demo is installed without modifying. if I see that it is difficult to understand how to customize Xstore, I will use the demo as it was installed. I will just change the logo, menu, links, colors and that’s it.

Don’t worry, I saved all the css code you sent me.

I deleted all code, all header, all homepage, typography, I put all the elementor kit that controls typography in “default” mode, h1, h2 etc etc.

I removed all custom fonts from breadcrumbs. Everything in zero. In elementor updated css files and data, in the Tools section.
———————————————————————————-

1 – in the customizer—> font. Should I use “pixel or em”?

2 – I can’t change the title size of the store bar widget. the inspector says it inherits the property from “H4”. I set h4 to 1em and it doesn’t take the change. it shows it as 14px. i also deleted chrome history.

3 – I send a screenshot of Typography—->Heading—- Should there be a “font size” field ?

4 – Is it correct that changing the typography of the headings also changes the typography of the products in the store?

5 – I saw that one of the support technician has a spanish name. “leonardo Calderon”. Does he speak spanish? I have a hard time explaining myself in English.

Thank you!

Please contact administrator
for this information.

#315210 Copied
Olga Barlow

Support staff

January 26, 2022 at 12:35
Hello,

1) It depends on your purposes. Read more about the difference between the px and em here https://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-value-units-in-my-css

2) Our theme comes with hardcoded font-size styles for that widget https://prnt.sc/26jkgag + https://prnt.sc/26jkgrj
It does not use Elementor settings for that. Elementor plugin controls elements that you added to page content on the simple pages. If you want to change the font-size of that widget you can use Theme Options > Custom CSS and add the below code for example:
```
.widget-title, .widgettitle {
    font-size: 25px;
}
```
Also, you can install Yellow Pencil plugin (XStore > Plugin installer) that will help you to change some styles if you are not very familiar with the CSS.

3) Nope, there should not be font-size there because it can’t be the same for all the headings (h1-h6).

4) Changing of the Headings settings of the Typography will change the title font-family of the product because it uses the heading tag.

5) We don’t have such a support member with such name. Where did you see that? Provide screenshot, please.

We do understand you very well! You can use simple sentences and screenshots. It will be more than enough for us.

Regards
#315248 Copied
Pablo Emilio Nazario

Participant

January 26, 2022 at 19:30

Hello Olga!.

Ok, thank you. I read it and came to the same conclusion as the participants. There is no general consensus.

So, what is your recommendation as an expert on Xstore? em, px?

My purpose is to make it as responsive as possible so that there are no problems with cell phones.

Of course I’m going to apply the code you sent me, but I still don’t understand where the 14px value comes from. Looking with the inspector, only when I do the calculation taking h6 as a reference I get almost 14px.
I just wanted to understand. it’s not important.

I understand the topic about Elementor. But when I want to define fonts for the pages I make with the builder, it asks me to uncheck the option for elementor to take care of the typography. What should I do? Does it affect in any way the responsive performance of the theme?

Does the font sizes affect the responsive version in Xstore? Or does xstore handle the mobile version independently?

Yes, I use yellow pencil. Excellent plugin.

3) understood.

4) got it.

5) my mistake. It is the name of the person who asked the question!

Thank you!

#315333 Copied

Olga Barlow

Support staff

January 27, 2022 at 11:24

Hello,

Use the px for the parent element and em for the child elements. For example, if you set 14px for the product li element and set 2em for the product title element (child element of the list) https://prnt.sc/26k2sz9 then you’ll get 28px for the title. In this case if you decide to reduce/increase the size of the parent element then child element will be reduced/increased in 2x size.

14 px comes from the html https://prnt.sc/26k2vo3 Then we use rem and proportion variable https://prnt.sc/26k2w29 You need to learn CSS a little bit to find out. There are a lot of courses if you want to study that.

But when I want to define fonts for the pages I make with the builder, it asks me to uncheck the option for elementor to take care of the typography.

Provide screenshot for better understanding, please.

Does the font sizes affect the responsive version in Xstore? Or does xstore handle the mobile version independently?

We use media queries for some cases and also we reduce the html font-size to 13px for mobile devices https://prnt.sc/26k32pe , so all the sizes based on the rem are reduced.

Regards

#315354 Copied

Pablo Emilio Nazario

Participant

January 27, 2022 at 19:53

ahhh…I think I understand now! Xstore uses a size of 14px to make the rest of calculations in the typographies!!!
Used to other themes I thought it is always 16px which is the default average of the browsers.

Maybe that’s why I set in the theme customizer, in the body typography, 16px and it changes the size of almost everything correctly, except for the main menu that remains at 14px. I think it should take the same size as the rest of the header. Anyway it is very easy to change the size. (I send screenshot in case it’s a mistake)

I send screenshot of the elementor option that confuses me.

and another screenshot of the default elementor kit options. it’s quite confusing. I’m used to elementor opening a page with headers and paragraphs and 1 button and letting me see in real time the font and color options before I start adding sections. Can I do something similar with Xstore?

Thanks!.

Please contact administrator
for this information.

#315394 Copied
Olga Barlow

Support staff

January 28, 2022 at 19:59
Hello,

1) You can keep these options disabled (actually we do not enable them on our demos).
2) You can set Default in the Elementor settings https://prnt.sc/26kx6vc and it will inherit theme settings. If you choose anything there then Elementor elements that you will add to page will use settings that you set in the Elementor settings.
3) Add the below code to Theme Options > Custom CSS to change the default site header font-size
```
.site-header {
    font-size: 16px;
}
```
All the other header font-sizes will be calculated depending on this.

Regards
#315448 Copied
Tagged: customization, help, search bar, templates, woocommerce, wordpress
Viewing 14 results - 1 through 14 (of 14 total)