HTML block in Empty Cart not working. Margin below Short Desc, on Product page

[harshwe]

Hello Luke Neilson,

I wanted to know-

There is some extra bottom margin of 20px below Short Description area on the Single Product page.
1.a. We want it to lower the number to 5px only, so that content below it can be raised upwards. (Currently, there is too much gap in between).
How to reduce the bottom margin Globally, so as to affect it for All of the Single product pages, at once.
Please refer here – https://i2.paste.pics/FA1OK.png

1.b. Similarly, how to reduce bottom margin of Product Title, to 10 px
1.c. And to reduce Bottom margin of Price, to 10px. (All are currently having 20 px, on Single product page))
https://i2.paste.pics/FA1RT.png

2. How to use custom HTML in Empty Cart text area (that is under Theme settings -> Shop -> Shopping Cart)-
https://i2.paste.pics/FA1YB.png

Say, I want to show few products or some other custom html content, while the cart is empty.
Hence, I tried to use the Element (like Product Grid or Carousel), and first Create HTML block URL and ID below).
But, after copy and pasting the ID in Empty Cart Text area, it did not worked.
I am afraid, as I think it should work. The same way, HTML block content and Html code are working everywhere else.

2.a. Can you please suggest how to make it work.
I want to use the HTML Block with ID [html_block id="7374"]

URL of HTML block- https://www.vasangini.com/wp-admin/post.php?post=7374&action=edit
Please let it be in Draft itself (and don’t publish)

2.b. if at all, currently it is not made to work like that, then, Can you please ask the Dev team to make this area (Empty Cart Text) also compatible with and working with HTML block and other custom content,

Regards

• This topic was modified 2 years, 11 months ago by harshwe.

Hello,

1a. Here is custom CSS code for changing indent from below to 5px:

.single-product .woocommerce-product-details__short-description {
    margin-bottom: 5px;
}

1b. To be able to change the indent from below after the title and price, try to use this custom CSS.

.single-product .product_title,
.single-product .price {
    margin-bottom: 10px;
}

2, 2a. Sorry, but the “Empty cart text” area doesn’t support adding the HTML Blocks.

2b. Okay, I will send your suggestion to the developer team.

Kind Regards

[harshwe]

Hello Luke,

1.a,b. Yes these worked.
Thank you so much 🙂

2.a. HTML blocks works almost everywhere, and that is why the use of Shortcode is there for, too. Not sure, why not working for Empty Cart page.

2.b. Thank you.
Wish the team will think on this, and allow to use an HTML block in the Empty Cart page too. That way, we can try to retain customers, engage them and bring their attention towards.

Regarding Size Guide features and limitations–

3. Although I find the Size guide (tabular) option very easy and convenient to use. However, there seems many limitations with very little control on the size guide table format, currently available in the Dashboard, that comes with Woodmart.

Say, moving or dragging of the columns (left – right). Similarly for rows (up – down), is not available. Besides, Merge and Split of cells is missing. Set Color of each Cell.
Can the features of Size guide Table be enhanced and expanded

Due to it (size table) being, can’t be prepared using the Builder, it is very hard to change the color values of Cell (as well as whole Row or Column) background, BG color On Mouse-Hover, and Active Cell’s color. And may only be accomplished using custom CSS only.

Similarly for text color, Active Text Color, and text color on hover state (that is, text inside Cell)

For reference, please check below, the options mentioned here on this page, are what I meant.
(Please check below link page, till end)
https://bit.ly/3lZZT8q

If the options can be considered for future updates, that would really be appreciated. Although the link is for Table elements, but the same can be implemented and provided for the Size Guide table also, so as to work in a similar way.

3.b. Similarly, Basic Table element is also missing in the theme. If the WPBakery or Woodmart’s own Table element (with Enhanced features) could be Added and provided. Just like above, would be highly appreciable. Atleast, somewhat similar would also do the work.

3.c. Until then, can you please suggest, is there any way to create Tables using WPBakery Builder (or using any pre-bundled existing element), as of now. We want to use our own custom Table (not pricing table), to use it on couple few of pages.

Please suggest

3.d. Can you please have the Table Element (preferably of Woodmart’s own) in WPBakery, to be added in upcoming update.

Regards

• This reply was modified 2 years, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.

Hello,

3. So far we don’t have such plans for the size table. But we will consider your suggestions as a feature request.

3b, 3d, 3c. At the moment, we don’t have plans for creating our table element. But as the alternative, you can create the HTML table by means of the online HTML spreadsheet editors (e.g https://www.tablesgenerator.com/html_tables or that https://www.quackit.com/html/html_table_generator.cfm) and insert the code of the generated table into the “Raw HTML” element (https://prnt.sc/22yijy0).

Kind Regards

[harshwe]

Hello Luke,

3. OK. I understand.

3.b.c.d. The tables from the links seems really very simple, and not as per our needs. Though thanks a lot for sharing the links. Will look into these, more.

So, do we need to use the HTML as well as CSS code (from above links), both of these in the same RAW HTML element from WPBakery, at once.

SVG Uploads–
4. There is an option of SVG upload in Theme settings -> Other
I want to know, if we keep enable the option from Theme settings (and don’t use recommended SVG plugin), then will the uploaded content be also safe, as well.

https://i2.paste.pics/FC0HR.png

4.a. What is meant by Safe, here. Does that mean, nobody will be able to download the SVG file as an image (like other Jpegs) or some other thing. Can you please elaborate on this.

4.b. Should we enable only one of these. Means, if we enable SVG option from the Theme settings, then is there No need to use the Plugin. And we can avoid installing that SVG Plugin.
Do both works the same way.

Google font CSS Library–
5. What are the possible ways or options to bypass this message or lower the Time it is taking to load the Google fonts CSS library (by still using 1-2 Google fonts or by keeping the existing one, on site)-

Please suggest, How can we resolve or improve on this – ttps://i2.paste.pics/FC0QJ.png

b. If results cannot be improved that much (for above), then how to completely make it Off, so as not to load the Google fonts CSS from library, and to get rid of this Opportunity-message, so as to reduce the loading times, and thereby helps in increasing the speed, atleast a bit.

c. In that case (once disabled Google fonts CSS), what fonts we shall use, then. What fonts are allowed to use, with the theme.
Do theme have default fonts, or some other fonts, to use on the site (other than Google fonts). That are pre-loaded in Theme. Where can I find the list of those.

And how can we use them for header tags like H1-H5, paragraph, for Elements, Widgets and others..

d. If we simply change the font name or family from Typography area from Theme settings (to any Non-Google library font), then will our site stop loading the CSS or font Library of Google, while loading the page. And also stop showing this warning sort message from Page insights.

Please suggest

Regards

• This reply was modified 2 years, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.

Hello,

3. Of course, just fully copy generated code from the table generator and paste it to the “Raw HTML” element.

4. No, this option only allows SVG upload.

4a. Maybe the “Safe” means that this plugin doesn’t open up security holes in your WordPress site by allowing uploads of sanitized files.

4b. They both allow you to upload SVG, the difference between them is that the “Safe SVG” plugin makes sure that they’re sanitized to stop SVG/XML vulnerabilities affecting your site.

5. Sorry, but the issue isn’t related to our theme and our theme doesn’t influence it. You can try to upload another font and check the speed, maybe it depends on the font.

In order to set some font for the paragraph, Widgets, and others, please navigate to Theme Settings -> Typography.

https://gyazo.com/e61713ad570f4b427ba429faf6ee1ba0

Kind Regards

[harshwe]

Hello Luke,

3. Thank you

4. OK. I understand
4.b. Thanks for clarifying it.

5. I didn’t termed it as an Issue. Nor I meant by that.
I just wanted to know the possible ways or options to bypass this message so as to improve the load Times. As well as how to Disable it completely. May be there was a confusion, in getting my point.
Can you please read below points again and answer each query accordingly-

5.a. What are the possible ways or options to bypass this message or lower the Time it is taking to load the Google fonts CSS library (by still using 1-2 Google fonts or by keeping the existing one, on site)-

Please suggest, How can we resolve or improve on this – ttps://i2.paste.pics/FC0QJ.png

b. If results cannot be improved that much (for above), then how to completely put it Off, so as not to load the Google fonts CSS from library, and to get rid of this Opportunity-message, so as to reduce the loading times, and thereby helps in increasing the speed, atleast a bit.

c. In that case (once disabled Google fonts CSS), what fonts and from where we shall use, then. What fonts are allowed to use, with the theme.
Do theme have default fonts, or some other fonts, to use on the site (other than Google fonts). That are pre-loaded in Theme. Where can I find the list of those.

And how can we use them for header tags like H1-H5, paragraph, for Elements, Widgets and others..

d. If we simply change the font name or family from Typography area from Theme settings (to any Non-Google library font), then will our site stop loading the CSS or font Library of Google, while loading the page. And also stop showing this warning sort message from Page insights.

Please suggest

Regards

• This reply was modified 2 years, 10 months ago by harshwe.

Hello,

5a. You can try to upload other fonts and check which one has better speed.

b. We have the “Custom Fonts” option that uploads any font without using the google fonts service, please navigate to Theme Settings -> Typography -> Custom Fonts.

https://prnt.sc/23e01ax

c. You can download any .woff or .woff2 font and upload it via the “Custom Fonts” area.

The font for the H1-H5 titles comes from the “Title font” field.

https://gyazo.com/bb7724d5d5cfbd48d655c8baee075428

The font for the paragraph, elements comes from the “Text font” field.

https://gyazo.com/c57669653401b6fbe323596f93016f13

d. Maybe it will solve your problem.

Kind Regards

Hello Luke,

I still did not get the answer I am looking for-

Can you please suggest-

5.a. What are the possible ways or options to bypass this message (loading of CSS for Google Fonts)
https://i2.paste.pics/FC0QJ.png

b. If results cannot be improved that much, then how to completely put it (CSS of Google fonts) to Off. Is there a way to Not Load the CSS of Google Fonts. I think it is somewhere there, but I am missing it.

In order to resolve or improve on this – https://i2.paste.pics/FC0QJ.png

c. You suggested –

The font for the H1-H5 titles comes from the “Title font” field.

However, there is another similar field option in Theme Settings > Typography, named as –
Entities names font, for-
Titles for posts, products, categories and pages

So, if this is also for Titles of Posts, products. So, how it is different than the above one, termed as “title font” field
What Titles and Headers it (Entities names font) is controlling, then.
Can you please elaborate on this.

Similarly, what is “Header Font” field. And how it differs from above ones. With Header, it had a perception, that is for H1-H5 header tags. And same is for above. So bit confusion. Can you please clarify bit more.

e. Can we download and use only .woff as Custom fonts. Or we can also use TTF, SVG fonts as Custom ones.

Regards

Hello,

5a. Sorry, but our theme can’t influent the speed uploading of the font, please try to upload another font or contact their support team for further explanation.

5b. Unfortunately, we don’t have such functionality for disabling the CSS of the Google fonts.

5c. The difference is that the “Title font” field changes titles globally on the site.

The “Entities names font” field controls the same titles described in the description of the option (Titles for posts, products, categories, and portfolio).

https://prnt.sc/23v81tr

https://prnt.sc/23v83ob

https://prnt.sc/23v8d49

https://prnt.sc/23vbzyh

There is a little mistake in the description of the “Entities names font” option, it changes titles for the portfolio and not for pages. It will be fixed in our next update.

https://monosnap.com/file/dBR1NWDMvM1Vfe75GIuuOKI6FYInw0

The “Header Font” option changes font only for the header (e.g You want the header font or the font size of the header to be different).

https://prnt.sc/23vf70z

c. You can use only .woff or .woff2 fonts as Custom fonts.

Kind Regards

[harshwe]

Hello Luke,

5.a. Just thought to inform you –
I found that, If I do Not use any Google font from Theme settings > Typography section, and use either custom .woff2 font (or default ones), then it does Not load the CSS of Google fonts automatically. I checked and found the same from either GTMetrix or Google Page Speed Insights too.
So, this could be one alternative solution, to not have CSS loaded for Google fonts.
This trick or alternative should help other users also. And you may guide them, if they have similar query.

5.b. I come across one option under Performance > Fonts and Icons > Google fonts > Disable
https://i2.paste.pics/FEVC9.png

Wanted to know, what this option does, if we click and select “Disable”
Will it stop loading CSS of Google fonts forcefully (even if we use any Google font from Typo area). And displays some other font, instead.

If not, what is the purpose of this option. How it will be helpful, if someone chooses “Disable”

5.c. Got your point somewhat regarding Entities title.
So, in this case, what field is controlling the Title of products on Single product page (font-family, styles).
Is the field option name – “Title font” or “Entities names font” (under Typography)

5.d. And what field option (by default) is responsible to update and show the font family for Sub-Menus (level 1 and 2) showing under Main-Menu on Header.
PS: (If we are not changed using the Advance Typography section)

Is the field option name – “title font” or “Header font” (under typography)

5.e. What field option is controlling and reflects the Font-family and size for Category names showing on Shop page (Inside title area)
https://i2.paste.pics/FEVJE.png

6.a. I could not find the option to currently change the Font size (later, may be family, style too), for H2-H6 tags separately for each. And do not want to have the same one, that gets assigned for H1 tag.

Say, we have already adjusted Font size to be displayed for Title of product on Single product page (using the pre-defined selector from Advance Typography).

And we also want to use H2 to H4 tags too on the Single product page. But practically, we cannot have same (larger) font size for H2-H4 tags, or atleast do not want. That is already assigned for H1.
So, from where and how we assign and change the font-size for H2-H6 tags separately.

6.b. Most importantly, I tried to use H2-H4 tags on the Single Product page, and surprisingly, ALL of those are looking in the same font size (probably 17px). There seems no visible difference in between each. Similarly, H5-H6 are of same size too (15 px).

Also, I could not find any option to change the Font size for those, from Theme settings (Neither in typography nor in Adv Typo also).

6.c. On the other hand, there is No option in the field, named as – “title font” (in Typography), for Font size. (irrespective of Header tag from H1-H6). There is not even a Global option.
Should not that be provided there.

6.d. I come across, that the List element (Woodmart’s own) do not have the custom option to define the font size. There are few preset font sizes (14-22px only), in increments of 2.
Say I want to use font-size of 15px, how can I do that

Can you please ask the team to Add Custom option for Font-size in the List Elements also. Just like we have for few other Elements.

In addition to that, a Global option in Typography section, so as to define the Size, family, styles for List Elements, at once. Otherwise, we have to set for each product or other areas manually, and every time.

PS: Atleast, an option in Advance typography to choose from Pre-defined Selectors to change Size, Style, Family, colors. (Not by adding and using custom selector). That is a New Pre-defined Selector.

6.e. How can I change the Font-size for Paragraphs on just Single Product page, and other Standard Pages only. Not anywhere else.
Currently, I think, the Text-font field option (under Typography), changes or reflect font on other areas also.

Please ask the team to Add a New Pre-defined Selector to change the font-attributes of Paragraphs for Single product page, Standard pages and other areas too. So one can change them according to their needs.
In the meantime, can you please suggest how we can achieve using CSS or some other way.

5.c.

There is a little mistake in the description..

Thanks for the clarification and updated Info. Much appreciable.

Regards

• This reply was modified 2 years, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.

Hello,

5b. The font-display descriptor determines how a font face is displayed based on whether and when it is downloaded and ready to use. Read more information about it here https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

5c. The “Entities names font” option controls the title of the product on the Single product page too.

5d, 5e. Font family for Sub-Menus and for category names comes from the “Text font” option.

6a. Sorry, but we don’t have such options for changing the font family for each title tag.

6c, 6b, 6a, 6e. I have forwarded your suggestion to the team.

6d, 6e. You can change the font size for some elements or pages by means of the custom CSS code.

Kind Regards

[harshwe]

Hello Luke,

5.b. I already looked similar articles earlier, but could not find the details for Value named as “Disable“, which is provided under Performance > Fonts and Icons > Google fonts > Disable
https://i2.paste.pics/FEVC9.png
That is why I asked about this Value only.

Wanted to know, what this option does, if we click and select “Disable” value option
Will it stop loading CSS of Google fonts forcefully (even if we use any Google font from Typo area). And displays some other font, instead.
If not, what is the purpose of this option

5.c,d,e. Thanks for suggesting further.

6.a,b,c,e. I wish the team would surely bring solution on these, as early as possible. By Adding further options in Basic Typography options area to control Font properties of different sections and areas.
As well as, to control font properties for H2-H6 tags, separately.

Specially, by ADDing more Selectors in Advance Typography section, so to control and adjust according to our needs. As well, Refine the existing Selectors, to work Globally and much better way.

Until then, please suggest-
6.d. Custom CSS to change the font size, family and color for the content of List elements (Woodmart’s own). So as to affect Globally, wherever we use List Element.

6.e. How can I change the Font-size and color for Paragraphs on just the Single Product page (and other Standard Pages only). Not anywhere else. That is Not affecting other areas.

6.b. How can we change the Font size and family, just for H2-H4 tags, separately. Please share the custom CSS for this.

Regards

• This reply was modified 2 years, 10 months ago by harshwe.

Hello,

5b. The “Disable” value disables downloading a spare font. You can also set the “Disable” option and check the speed.

6d. The color can be changed owing to the selected “Custom” option in the “Color Scheme” field.

https://gyazo.com/11eac6a153c88cd5fe3a875773ca71c5

To be able to set font family and size globally, please try to use the below custom CSS.

.wd-list .list-content {
    font-family: 'Poor Story', cursive;
    font-size: 17px !important;
}

6e.You can change the font size and color only for paragraphs on the Single Product page by means of the “Custom selector” (.single-product p) in the “Advanced Typography”.

https://gyazo.com/f6b453dfac60b853cd1ce0bf3f455e0e

https://gyazo.com/abf1ea571a58a68a13ec1e005c9eb59f

6b. The font size and family separately for the H2-H4 you can change also using “Custom selector” (.page h4).

https://gyazo.com/eb9990eca239230849600bc84ae6c3df

https://gyazo.com/ba6ae2b8406b9e6359c1360783fdb833

Kind Regards

[harshwe]

Hello,

5.b. Thanks for additional info. OK , will check by disabling too.
Can you please suggest, what does Spare font refers here.

6.d.,e. Yes, these worked. Changing font size and attributes. Thank you 🙂
Can you please share the Custom Selector for List element too, to affect Globally. So as to use, instead of the below custom CSS-

.wd-list .list-content {
    font-family: 'Poor Story', cursive;
    font-size: 17px !important;
}

6.b.

The font size and family separately for the H2-H4 you can change also using “Custom selector” (.page h4).

This above one seems not working on Single product page (haven’t tried on other Standard pages). Using Inspect tool also, it is not reflecting the font size.

So, I tried this Selector, too –
.single-product h4
.single-product h2
Although, this did showed in Inspect tool, but still not reflecting the change. Means, not increasing the size. I tried by entering upto 30px value, but there is no visible change at all. If we compare it with the existing default font size (without selector)
https://i2.paste.pics/FHA2X.png

Probably something is missing, or it requires something else too.

PS: We want the selector for H2-H4 tags to work Globally. Whether Single product page, or Blog post or other page.
Not sure, why .page h4 or .page h2 not working

Can you please try to replicate at your end too, and share the updated code.

There seems 2 issues or glitches–
7. I changed the “Search” icon for Mobile also, which gets updated correctly. However, upon clicking the icon, when it shows the Sidebar, then there, the inside Search icon did not gets updated. As shown below-
https://i2.paste.pics/FHA6X.png
Should not that also gets updated automatically. As there is no direct way to change or replace that icon separately.

7.b. Similarly for Wishlist icon in sidebar menu, where Wishlist menu is displaying.

8. The flyover style of Pre-Next products (on Single product page), is showing while hovering mouse even below those prev-next icons.

Possibly, this is happening, only on the area, where the price of those Prev-Next products shows-up in that flyover. Below video will clearly shows up that action and screenshot help you to understand.

Video – https://watch.screencastify.com/v/DMU56TlPDjcgQZSqJZiY
https://i2.paste.pics/FHAKG.png

Product URL – https://bit.ly/3FAfVNY
It can be checked on any product page.

What could be causing this issue.
PS: We are not using any 3rd party plugin, so far. We cleared or Empty Entire Cache too.

Please try to replicate at your end, and suggest how to resolve it.

Regards

• This reply was modified 2 years, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.

Hello,

5b. To mitigate some of the risk of a slow font download, most browsers implement a timeout after which a fallback font (spare font) will be used.

6d,e. You can also use this .wd-list .list-content custom selector.

6b. Try using these selectors to edit titles (also see below video).

.page h4, .single h4, .archive h4

https://monosnap.com/file/9SvzQ6IdK0f96QbUBooVyuvrP3tulP

.page h3, .single h3, .archive h3, .blog h3

https://monosnap.com/file/CIkL9hgbN1cP4DpqEfxS16zPH3tU0k

PS: You can replace the h3 tag with any other title tag.

7. I have prepared custom CSS code for changing icons in mobile navigation.

Search:

.mobile-nav .searchform .searchsubmit:after {
    content: ' ';
    background-image: url('https://www.vasangini.com/wp-content/uploads/2021/12/Vas-search-svgrepo-com-6-25x25-3rd-A.svg');
    background-size: 20px 20px;
    height: 20px;
    width: 20px;
}

Whishlist:

.wd-nav-mobile .menu-item-wishlist>a:before {
    content: ' ';
    background-image: url('https://www.vasangini.com/wp-content/uploads/2021/12/wishlist-1539830801-4th-25x25-1.svg');
    background-size: 16px 16px;
    height: 16px;
    width: 16px;
}

https://monosnap.com/file/QAL5NYEifn9BVxFvPSTB5NNwil3Ki2

8. In order to get rid of that issue, enter the below code to the “Global Custom CSS” area.

.hide-larger-price .wd-products-nav .price *:not(.price) {
	pointer-events: none;
}

Kind Regards

[harshwe]

Hello Luke,

5.b. Thanks for clarifying further.

6.d,e. Yes, this worked. Will custom selector .wd-list .list-content work to change the font attributes in mobile devices also.

6.b. I used these below selectors one-by-one, but found that they are not affecting H4 on Single product page, at all. .page h4, .single h4,
Probably I am doing something wrong, or some other CSS (from somewhere else) might be taking the precedence.

Can you please try to replicate on just one product, below one-
https://bit.ly/3ExFlKP
Once it gets identified, I will follow same on and for other products.

6.f. However, there is one Glitch, that after I use this .single h4,
It then also change the Title size of the Element named “Section Title”
(Irrespective of whatever font size, I set inside the Element).

So two points-
Technically, CSS selector for Single product page, does not affects the font size on Section Title Element.
Secondly, if at all (it is affecting, in error), it should not takes precedence, as I have already set the Font size inside the Section Title Element. Means, whatever inside the element, should be of higher priority.

Please try to check and replicate, how the selector .single h4 changes Title here, on Section Title-
https://i2.paste.pics/FHNH6.png
Please get this resolved, by forwarding this to team.
And in the meantime, please suggest the solution.

6.g. There seems another issue. If I set font size to Custom in Text block Element (Woodmart’s), and change the Font-size, then it actually affects or reflect the Line-Height, rather than the font-size.

Please try to replicate on same HTML block (Ask Us Pop Up form), as below-
https://i2.paste.pics/FHNKA.png
https://i2.paste.pics/FHNM3.png

7. Thanks for sharing the CSS. Will try these and let you know.
Can you please forward this to team, so that it can be updated in a way, that if someone uses custom image for Wishlist and Search icons, then those also gets reflected in Mobile navigation (left sidebar)
7.a. That way, it will make changes Globally and by maintaining uniformity too. As well as avoid extra CSS, for which it should not required, primarily.

8. .

In order to get rid of that issue…

This worked, as of now. But, wanted to know, what could be causing this Glitch.
What has been identified as a reason, for this bug. And will this be resolved in the next update.

8.b. Can you please ask the team to Add options of Horizontal Alignment also (that is for Top, Bottom, Center), for Icons to be aligned with the List content, inside the List Element (Woodmart’s)

Why so. Reason below–
https://i2.paste.pics/FHO4A.png

If List’s content is more, then it does not looks good at all, when icon shows way below (in the center). There is no purpose then, to display that List icon. Infact, that becomes very Odd too, and seems like an error. (As user may even think, that why and where that “Hand icon” is coming from, in the middle, that too mis-aligned)
And when someone views the content in mobile, then it gets even worse, as matter is longer and wraps down further, and Icon shows at way bottom, towards the center.

Until then, please suggest how to resolve this, in order to align the Icon horizontally with the top of the Content.

Regards

• This reply was modified 2 years, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.

Hello,

6d.e. Yes, it will work.

6b. I have checked the .single h4 selector on the single page and it affects the h4 tag (see below video).

https://monosnap.com/file/wynJcu232HQbgVSjA292kgPpdJXK8H

6f. Your font size for the “Section title” element comes from the base CSS styles (https://prnt.sc/25sk42z). The base styles can be replaced by means of the custom selector. To be able to set your own font size that can’t be replaced try to use the “Custom size” field (https://prnt.sc/25skn9g), please.

https://monosnap.com/file/Pm0NTiUEzdp0GiM9neEWxRZICFsE1o

6g. If you put only the font size then the line height is given 10 px more so that the strings don’t merge. You can also set the line height with help of the “Line height” field (https://prnt.sc/25so0n3).

7,7a, 8b. I will forward it to the team.

8. Check the below custom for aligning the Icon horizontally.

.wd-list.wd-list-type-icon li {
  align-items: flex-start;
}

Kind Regards

[harshwe]

Hello Luke,

6.b.

checked the .single h4 selector on the single page and it affects the h4 tag

Thank you for sharing the Video. It can be seen that, It is affecting something else, but not actually the Font-size.
You can try to replicate by updating the font size from 19 to 25px or 30px (of same selector for h4 tag). You will find that it is only updating the line-height, but not the font-size. Something is missing, and not allowing the font-size to get updated.
Or some other CSS (from somewhere else) might be taking the precedence.

6.f.

..font size for the “Section title” element comes from the base CSS styles. The base styles can be replaced by means of the custom selector..

I understand, but the custom selector that we are using, is not for Section Title.
I think, the selector .single h4, should not affect the Section Title directly. Even if the Section Title is also using H4.

As .single h4 is for Single product page, whereas Section is different element and can be used anywhere else also. (other than product page)
Please correct me, if I am wrong.

By the way, do you mean to say, that Section title is using H4 tag, as well as, it is currently getting updated from .single h4 font-size.
If so, can you please ask the team to update it, so that .single h4 only updates h4 on Single product page, but not other areas, that are using H4.

6.g.

If you put only the font size then the line height is given 10 px more

I think I did not get this point. Can you please clarify.

In either case, it should actually update the Font size, even if it is updating the Line-height automatically too. As primarily, we are updating the Font-size.
Can you please check the query from our same point again. Probably, there might be some confusion.
Should not it update the Font-size, because we do not want to update the Line-height, just the Font-size, a bit.

8. One of the query got skipped somehow.

In order to get rid of that issue…

But, still wanted to know, what could be causing this Glitch.
What has been identified as a reason, for this bug. And will this be resolved in the next update

.

8.b.

Check the below custom for aligning the Icon horizontally.

It worked, but not aligning with First line properly. Currently, it is somewhat above the first line, as can be seen from below-
https://i2.paste.pics/FJCCW.png

How to Align in same line with Green Arrow, as shown in image. That is with the first line.

Regards

• This reply was modified 2 years, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.

Hello,

6b. Try to use this one .single h4 span , please.

6f. I will forward it to the team.

6g. It’s a principle that when you put the font size it is given line height also so that strings don’t merge (https://gyazo.com/aaaa654a75dc2efd38d11794a38c44a8). If you set your custom size, also set the “Line height” (https://prnt.sc/25so0n3) as you need.

8. It was some bug from WooCommerce so we have prepared CSS code to fix it.

8b. Check this one, please.

.wd-list.wd-list-type-icon .list-icon {
    margin-top: 5px;
}

https://gyazo.com/97cb5cd0896c517772f521717e07eb58

Kind Regards

Hello Luke,

6.b. While exploring and deep further into things, I think I found the reason. Probably this might be the culprit and taking the precedence. Due to which the font-size was not updating, when we were trying to change through custom selector .single h4

https://i2.paste.pics/FJOJI.png
Is it correct.

I tried by removing this line of html code by switching to “Text” tab and then update. The font-size then worked perfectly, through the custom selector.

PS: However, I am not sure, from where this html code comes from. Is it by default after using H4 directly in Description area. Or some other reason.

6.f. Thank you
6.g. OK. Will check by using line-height also. If still face any issue, then let you know.

8.b.

Check this one, please..

Means, do I need to use both of these CSS

9. In Mobile – There is beautiful square shaped black colored BG behind Prev-Next arrows (with Transparency) on image while we hit “Click to Enlarge” on Main image from Single product image (Mobile)
https://i2.paste.pics/FJOOK.png

So similarly, how can we have the same Black colored BG on Prev-Next arrows in below areas, as those are Barely visible, even on Mouse – Hover (specially with similar color of image) –

a. On Main image on single product page (Desktop) – https://i2.paste.pics/FJQH1.png

b. On main image area, while in Quick View from Desktop as well as Mobile –
https://i2.paste.pics/FJQJY.png
https://i2.paste.pics/FJQKT.png

Regards

[Luke Nielsen]

Hello,

6b. I am glad that you sorted it out.

8b. Yes, you should use both custom codes.

9a,b. I have prepared custom CSS for changing the style of arrows, you can check it. Also, add it to the custom global area.

.single-product .product-image-summary .wd-btn-arrow:after,
.product-quick-view .wd-btn-arrow:after{
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 18px;
    color: #ffffffc7;
    width: 30px;
    height: 30px;
    background-color: rgba(0,0,0,.3);
    transition: all .2s linear;
}

.single-product .product-image-summary .wd-btn-arrow:hover:after,
.product-quick-view .wd-btn-arrow:hover:after {
    color: #fff;
    background-color: rgba(0,0,0,.6); 
}

https://monosnap.com/file/EzVVGwzTgZroJXncxeSqL1v47Btm6i

https://gyazo.com/ad0d45951bba84e3b4364f07b1b893ca

Kind Regards

• This reply was modified 2 years, 10 months ago by Luke Nielsen.
• This reply was modified 2 years, 10 months ago by Luke Nielsen.

[harshwe]

Hello Luke,

9 a,b. This worked perfectly. Thanks 🙂

9.c. In Quick-View only (mobile and desktop) How can we have the Add to cart button to flexibly adapt with the image height, automatically.

Reason– We have images with different heights, due to which when user scroll further (to view other images), there is a huge white space left in-between bottom of the image and Cart button, as shown below.
https://watch.screencastify.com/v/xDBXZmArlFsgtTppBQ7g

How can we achieve, so that, the Cart button moves Up-and-Down and adjust itself according to the image height, by not leaving the white space in-between.

(Because, I think, in Woodmart, the container acquires and sticks to default fixed position according to the image that is largest in length or height.)
Specially, if the very first image of any product is of the smallest height (compared to other images of same product), then it shows way Odd from the very 1st image itself, leaving too much white space.

PS: In today’s era, One can have variable image dimensions, to represent product with various angles and perspectives, and its parts. And practically, one cannot have all of the images of any one product with exact same dimensions.
Hence, looking for the solution, on this issue.

9.d. Similarly, for same reason, how to display Prev-Next arrows (Just in Quick View of Mobile and Desktop), at the Top area of the image (and few pixels below from the very beginning of the Top edge)
As shown below-
https://i2.paste.pics/FK28W.png

Regards

• This reply was modified 2 years, 10 months ago by harshwe.

Hello,

9c. The best solution is to upload bigger images because our HTML structure doesn’t allow changing the position of the “Add to cart” button depending on the height of the picture.

9d. I have prepared custom CSS for moving Prev-Next arrows at the top area of the image.

.product-quick-view  .wd-btn-arrow {
    top: 10%;
}

Kind Regards

[harshwe]

Hello Luke,

9.c. I understand. But the image is already bigger. The only thing is, width-to-height ratio varies in each image for a product. In short, few are landscapes and few are portrait sort of. That is why I asked for that, and as few other themes have such option to adapt or adjust that button according to the height of the image.

If this is not possible, we have one alternative workaround requirement, that may work for us, atleast somewhat.
That is, how can we show that “View Details” button in the Right frame (of Quick View), instead of below image. Either at –

i) Above the Product Title, by showing it in smaller size as shown below
https://i2.paste.pics/FKI7J.png

OR else,
ii) Below “Add to Cart” button, as shown here-
https://i2.paste.pics/FKI7N.png

10. There are few issues or possible glitch.
a. The font family, size not correctly reflecting in Quick View (both Desktop and Mobiles)

https://i2.paste.pics/FKI84.png

The font we set is below and correctly displaying in normal view on Single product page on Desktop.
https://i2.paste.pics/FKI8J.png
However, in Quick view only, it is displaying other font and font attributes.

10.b. The Product Summary area on Single product page (in mobile), is not showing content in Full-width or with the same width, that it is showing in and for the Main Description area.
Due to which content in Summary area is showing smaller, and hence, is not properly visible in the mobiles.

Please check below-
https://i2.paste.pics/FKI90.png

Wanted to know, why it is showing extra padding sort or margin across both the sides (in Summary area only), due to which visible area of content gets shrunk and hence not properly visible with the same font size chosen, as it is for Main description area (where product tabs are displaying)

How can we resolve this, so that content area be bigger in Product’s Summary area (in mobile view) on Single product page.

Regards

• This reply was modified 2 years, 10 months ago by harshwe.

Hello,

9. By going this path you can find the file of the quick view.

woodmart/woocommerce/content-quick-view-horizontal.php

So as not to lose your changes after updating of the theme, you should copy the “content-quick-view-horizontal.php” file in your child theme and make changes there. Move the woodmart_view_product_button() function under the wd-scroll-content block.

https://monosnap.com/file/c1Zb4Zb8nACAXZATJ1qOtF4XC8yYyp

https://monosnap.com/file/1biYg1x3PQsd8oiS1nc26GwLeEeFRt

Also, add this custom to the global area for showing it correctly.

.popup-quick-view .view-details-btn {
    position: static !important;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
}

https://gyazo.com/4570edb72865e152e5d6714030aa4126

10a. The quick view isn’t related to the single page (as you can see above, the quick view comes from another file), but it has a very similar appearance so try to use this .product-quick-view h3 selector.

10b. The “Add shadow to product summary block” option gives additional indents for showing summary with shadow correctly. So disable it and check the product page again.

https://gyazo.com/b0a80f6e3704c4f9c636e140c8901570

Kind Regards

[harshwe]

Hello Luke,

9. Before proceeding to change, I would like to know below. You suggested-

So as not to lose your changes after updating of the theme you should copy the “content-quick-view-horizontal.php” file in your child them…

I understand, that changes won’t get lost after updating theme, if I copy the file in Child them directory. But wanted to know, what will happen if during any Theme update, the Woodmart team brings an update in the same file also, that is view-horizontal.php itself

Will I still be able to take benefit of the update (if to be brought by Woodmart team) of that file, even after, when we have that file already copied in the child theme directory.
If not, what are the possible solutions on this. Please suggest

10a.

The quick view isn’t related to the single…

Yes, this worked. Shall I use the same selector for H2 and H4 tags also, by just replacing H3
Thank you 🙂

10.b.

The “Add shadow to product summary block” option gives additional indents for showing summary…

Yes, after disabling shadow it shows correctly.
But bit wondering, as shadow shows up outside of the Summary box area. So how come, it is leaving additional Indent Inside of the summary area, leaving so much extra space.
How can we remove Extra Indent or padding inside of the Summary area, by having the Shadow enabled too.

Regards

• This reply was modified 2 years, 9 months ago by harshwe.
• This reply was modified 2 years, 9 months ago by harshwe.

[Luke Nielsen]

Hello,

9. Yes, you can use the update and it will not affect the “content-quick-view-horizontal.php” file in the child theme even after updating it in the Woodmart theme.

10а. Yes, of course.

10b. I have prepared custom CSS for resizing the shadow summary. If you want to resize it only for the tablet and mobile device, hence you should add the code to the “Custom CSS for tablet” and “Custom CSS for mobile” areas.

.product-summary-shadow .summary-inner {
    padding: 10px 10px 10px;
}

https://gyazo.com/87a3164b838e797161474c384bcacd28

Kind Regards

• This reply was modified 2 years, 9 months ago by Luke Nielsen.

[harshwe]

Hello Luke,

9. I understand that I can update the Woodmart Theme and it will not affect the “content-quick-view-horizontal.php” file in the child theme.
My question is something else, that is, somewhat opposite scenario. Let me try to ask again-

Let’s assume, that we have already copied the file in the Child theme. Thereafter,
Wanted to know, during any upcoming New Theme update, and if the Woodmart team had made some updates (developmental changes) in that same file also, that is view-horizontal.php itself, then what will happen in that scenario.

Will I still be able to take benefit of the recent update or change in that file (that Woodmart team itself made in that Theme update), even after, when we have that file already copied in the child theme directory.

Or NOT.
If not, what are the possible solutions on this. Please suggest

10b.

I have prepared custom CSS for resizing the shadow summary…

For now, I have disabled the Shadow option. But will use this code, once I enabled back.
Thank you for sharing 🙂

11.a. Below is the reason, why we earlier preferred to have Breadcrumbs Navigation below Header.
https://i2.paste.pics/FMYN3.png
But as, sharing on FB was not retrieving the correct image, and as you suggested to have the Breadcrumbs Navigation in the Summary area, we followed as per your suggestions.

But, due to this reason, this does not looks good at all and taking up space too. Specially when the Title is bit large. Showing duplicate entries just one-On-top-of-another, seems too Odd.

So, how can we Hide the Title from the Breadcrumbs Nav. area of the Single product page alone, so as to avoid this appearance. Atleast for a workaround purpose.

11.b. On Single product page (with Stock level meter enabled), it says “Ordered” (left side) and Items Available (right side).
We want it to be as “Sold” instead of Ordered, and
“Left” instead of Items Available, to make it short and simple.
Shown here- https://i2.paste.pics/FMYRS.png

How can we achieve that.
If not by CSS, then, can you please share the Snippet code to make the desire changes.

11.c. We come across that the stock progress bar is showing too Thick line in our site (as shown in same above screenshot), and not as Thin as it is showing in your Demo.
I think this is getting affected on the basis of font size of some area. Please forward this to team, so that they can look into it and resolve this issue or bug.
As the line of progress bar should not get affected, when we change the font size of Paragraph or some other element. If for some other reason, then please suggest.

Until then, please suggest, how can we make it Thin, like Demo.

Regards

• This reply was modified 2 years, 9 months ago by harshwe.
• This reply was modified 2 years, 9 months ago by harshwe.

[harshwe]

Hello Luke,

Very Urgent:

In addition to above message, I am writing here again to let you know, that suddenly whole site BROKE. We are feeling very much tensed and depressed. It took almost 2 months to refine and improve the things with few products and pages On-board, and design parts, size guides, forms and much more.

Details:
We further tested and found that it was NOT showing Broken while we logged-in as Admin, but only as visitor or Guest. (Not checked with other logged-in user role). We tested few pages as Admin.

Here is the video, of just one product page and a part –
https://watch.screencastify.com/v/JtlmCY7oyrzB3pUOnlhQ

All product pages broke including All other pages, and have same results as in above video.

Hence, then we test the same in Incognito mode as a Guest visitor too. It still was Broken.
Temporarily we had Disabled Cache, but this should not be the Culprit or reason, as it Broke almost every area from top to bottom. And we had Not made any changes in the Plugin since long (more than a month or so).

Also, we have NO 3rd party plugin activated too. We have Not made any other changes. No code except provided by you. You know, that we always consult you first. And had not made any changes to core files also. Child theme is currently activated, with NO CSS in Child theme.
Only in Customm CSS area, that too provided by you.
Point is, the site started Breaking 24-40 hours back only (from now 21:30 pm here in India)
Till then, it was perfectly working fine.

Can you please check the Child theme CSS page (by logging in as Admin) and other relevant areas.
Also, a look at LS Cache plugin setting, if anything can be found there.

PS: Although that makes us too tensed, with raised heart-beats. Hence, as a workaround, we currently get our site restored from one of the previous back (with Hosting team support). As we cannot wait more or longer, for it to be identified. Atleast, as of now.

However, now you can take a look at existing area of Child theme CSS, its linking, settings of LS Cache plugin, as of now.
Because, there is a possibility, the same issue shall arise again also. Most probably, this may happen again.

Important to note: We wonder, why such issue arise, suddenly. When we had not made any such changes, No 3rd party plugin, No changes in core files, nothing else. No Changes in Cache plugin and its settings. Those were intact since more than a month or so, as it is.
Hosting is way better, and had no issues at their end also.

Could something else be the reason.

Here is the video link-
https://watch.screencastify.com/v/JtlmCY7oyrzB3pUOnlhQ

Probably, you can find the root cause, just with the help of this video itself.
As per this video, what could this be related to.

Please suggest

Regards

• This reply was modified 2 years, 9 months ago by harshwe.
• This reply was modified 2 years, 9 months ago by harshwe.

[Author]

Posts