Custom header icons, font styles, and others

Hi

I’ve compiled a few problems, i hope you can help me out.

1.Header Builder:
Custom Icons are not showing up. There is only white space (see image_01).

View post on imgur.com

<script async src=”//s.imgur.com/min/embed.js” charset=”utf-8″></script>

Although it is showing up in the settings (see image_02).

View post on imgur.com

<script async src=”//s.imgur.com/min/embed.js” charset=”utf-8″></script>

I want a green border at the bottom of the header and I managed to set that. If I scroll down, there is no green border anymore. How can I change this? Image_03

View post on imgur.com

<script async src=”//s.imgur.com/min/embed.js” charset=”utf-8″></script>

2.WOOCOMMERCE:
2.1 Product titles: How to edit font size in product tabs view? (image_04)

View post on imgur.com

<script async src=”//s.imgur.com/min/embed.js” charset=”utf-8″></script>

I know there is an option in woodmart typography settings (image_05), but if I set Font size there, it also effects the title size of the single product page.

View post on imgur.com

<script async src=”//s.imgur.com/min/embed.js” charset=”utf-8″></script>

2.2 Single product page: How can I adjust some font styles? I would like to take another font for the red underlined words. Also I would like to change the hover color of the breadcrumbs (actually I would like to edit the global font hover color) (image_06)

View post on imgur.com

<script async src=”//s.imgur.com/min/embed.js” charset=”utf-8″></script>

2.3 Product categories:
Singular of “Product” is translated to “Produkt”, but “Products” is not translated to “Produkte”
(image_07)

View post on imgur.com

<script async src=”//s.imgur.com/min/embed.js” charset=”utf-8″></script>

3. Blog:
How to edit “read more…” ? In this case, “weiterlesen”? (image_08)

View post on imgur.com

<script async src=”//s.imgur.com/min/embed.js” charset=”utf-8″></script>

4. Footer:
How to get different colours for footer and the “sub-footer”? I would like to change the colour of the marked area(image_09).

View post on imgur.com

<script async src=”//s.imgur.com/min/embed.js” charset=”utf-8″></script>

How to edit parts in footer (e.g. titles with links, border style, title font width, hover color)? (image_10)

View post on imgur.com

<script async src=”//s.imgur.com/min/embed.js” charset=”utf-8″></script>

5. Accordeon menu:
How to edit font title? (image_11)

View post on imgur.com

<script async src=”//s.imgur.com/min/embed.js” charset=”utf-8″></script>

6. Line Chart:
How can I change the dark grey stroke fill color?
How can I put the legend “gelöster Sauerstoff” to the bottom of the chart?
How can I adjust the width but not the height of the chart? I typed following but it was just scaling down proportionally:
.oxygen {fill: true; height:50% !important; width:100% !important;
(image_12)

View post on imgur.com

<script async src=”//s.imgur.com/min/embed.js” charset=”utf-8″></script>

Can you help me?

Best,
Lorenz

Attachments:

You must be logged in to view attached files.

Hello,

Images in the Header Builder: you need to open your SVG icons file with some editor like Sublime Text or default system text editor and add width=”31″ height=”40″ attributes to your <svg> tag like it is shown: http://prntscr.com/m4n0qw
Then you will need to re-upload your icons in WordPress Dashboard.

Greenline in the row: disable the Sticky header clone https://xtemos.com/docs/woodmart/header-builder/global-header-settings/ make the rows sticky https://xtemos.com/docs/woodmart/header-builder/header-rows-columns-configuration/ and the line would appear.

Customization of the font:
You can change the font by means of Advanced typography option, which allows to choose the item from a drop-down or insert your custom CSS class. Please navigate to the Theme Settings > Typography > Advanced Typography.

Here is the documentation providing more detailed instructions: https://xtemos.com/docs/woodmart/advanced-typography-settings/

You can translate all theme and plugin texts via PO file in WordPress. Here is a video tutorial that should help you translate your website texts with a Loco Translate plugin https://www.youtube.com/watch?v=D3NsDdMzsls&list=PLMw6W4rAaOgKKv0oexGHzpWBg1imvrval&index=3

We suggest you to keep translated files in wp-content/languages/themes/woodmart-pt_PT.po folder.

You can create different HTML blocks for pre-footer and for the Footer: https://xtemos.com/docs/woodmart/html-blocks-2/#pre-footer

Best Regards

Hello Elise,

thanks a lot for your fast response!

Images in the Header Builder:
Thank you, it worked out perfectly. Important was to insert the dimensions directly after the “<svg” tag.

Mobile Menu:
How can you edit the icons there? How can I change the global wishlist and account icons? See image 01

Header bottom line:
The settings have already been set like you told me. I also played around a little but it did not work. But it is not that important.

Single product page:
That’s great, I have overlooked these settings. But still, there are some limitations. I would like to give the underlined words another font family, is this possible? As at the moment the font is set in bold but it doesn’t look very nice. See image 02.
The same counts fot the checkout page, e.g.. See image 03.

Cart page:
How can I change the image? See image 04.
Same counts for Wishlist page.

What about 5. Accordeon Menu and 6. Line Chart of my first post?

Thank you a lot in advance.

Best,
Lorenz

Attachments:

You must be logged in to view attached files.

Hello,

Mobile menu = you add the icon in the same way as you do it for the main menu: https://xtemos.com/docs/woodmart/create-menu-2/

Single product page: = Please provide your URL I will provide custom CCS. If your site is under maintenance, please provide your site admin access to the private area.

Cart page: It is possible with custom CSS. Provide image URL I will provide custom CSS.

Line chart This is the default WP Bakery page builder element. It requires more complicated customization which is out of our support scope.

Accordeon menu Please provide the screen and page URL. If you mean the mobile menu,

You can change the font by means of an Advanced typography option, which allows to choose the item from a drop-down or insert your custom CSS class. Please navigate to the Theme Settings > Typography > Advanced Typography.

Here is the documentation providing more detailed instructions: https://xtemos.com/docs/woodmart/advanced-typography-settings/

Best Regards

Hello Elise

Thanks a lot again for your great support, I really appreciate it.

Mobile menu: I tried to manage, but the last two menu items are not showing up there (image_01)

Single product page: Here you have the URL for one product: https://edapro.ch/shop/index.php/product/edalife-chrome-brausysteme/

Cart & Wishlist page: Here you have the URLs for the images:
Cart image: https://edapro.ch/shop/wp-content/uploads/2019/12/shop_emptycart.svg
Wishlist image: https://edapro.ch/shop/wp-content/uploads/2019/12/shop_emptywishlist.svg

Accordeon Menu: Here you see the accordeon:
https://edapro.ch/shop/index.php/faqs/
Meanwhile, I could fix it. So all good.

Now I have a strange issue with icons at only one page:
https://edapro.ch/shop/index.php/kontakt/
See image_03 and image_04. I tried to fix it in the global css by trial and error insert classes which are used (source code). But if something did not work out I deleted it. Since then, there is the issue with icons not showing up or with a background color even though there should be no background color.

Checkbox and radio buttons hover (global): How can you edit the global hover settings for radio buttons and checkboxes?
At the moment they are standard blue, but they should become green (#ccca00)

Best,
Lorenz

Attachments:

You must be logged in to view attached files.

Hello,

Mobile menu: Please read and follow this instrcutions: https://xtemos.com/docs/woodmart/faq-guides/menu-doesnt-save-custom-fields/

Single product page:
Please add this code to the Theme Settings > Custom CSS > Global:

body .variations_form .variations label,
body .wd-action-btn.wd-style-text a{
text-decoration:underline;
}
body .product_meta>span {
text-decoration:underline;
}
body .product-share .share-title {
text-decoration:underline;
}

Cart & Wishlist page:
Please add this code to the Theme Settings > Custom CSS > Global:

body .woodmart-empty-wishlist:before {
    content: "";
	min-height:250px;
	background-image:url(https://edapro.ch/shop/wp-content/uploads/2019/12/shop_emptywishlist.svg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size: contain;
	height:auto;

}
body .woodmart-empty-compare:before {
    content: "";
min-height:250px;
	background-image:url(https://edapro.ch/shop/wp-content/uploads/2019/12/shop_emptycart.svg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size: contain;
	height:auto;
}

strange issue with icons
You need to open your SVG icons file with some editor like Sublime Text or default system text editor and add width=”31″ height=”40″ attributes to your <svg>tag like it is shown: http://prntscr.com/m4n0qw
Then you will need to re-upload your icons in WordPress Dashboard.

Checkbox and radio buttons are not edited with custom CSS only, such change requires more complicated customization which is not covered by our support.

Best Regards

Hi,

thanks again for your help.

Mobile Menu: PHP max input vars is actually set to 200000 so it should be fine? Or should it be exactly 5000?

strange issue with icons
I did edit the svg icons as you told me but the grey colour is still there. It seems that there is a colour fill in front of the icons (#d9d9d9), see image_01. I could not manage it to get it away.

The rest worked out perfectly.

Best,
Lorenz

Attachments:

You must be logged in to view attached files.

Hello,

I see you have settled the issue with icons already https://prnt.sc/q96rgz

As for the menu deactivate all the plugins not related to the theme and switch the parent theme, check the issue, if the problem remains, leave the plugins not activated and provide the site admin access to the private area

Best Regards

Hello,

i followed your instructions but the issue is still there.
Now the plugins are deactivated. Login see private content.

I would be very happy to get a response soon as the shop page is not working due to the deactivated plugins.

By the way, is it possible to change the standard icons in the ajax product view and also at the single product page? See images attached.

Thanks and best,

Lorenz

Attachments:

You must be logged in to view attached files.

Hello,

1. In order to get the custom fields in the menu item, you should choose something like “Set size” or “Full-width”, as soon as you set, the fields appear https://gyazo.com/55eda525c8411309db1b05180bde0c25

2. I am checking now the icons they work https://gyazo.com/44c37b2e90b8148224fe042c83864ced

I have activated the recently deactivated plugins not to keep your site without the plugins.

Best Regards

[Author]

Posts