Woocommerce shop appearance customization part 2

Support
#1

Hello

I am finishing up setting up a woocommerce shop with xtheme and I had a couple questions about customizing the templates

1
on the product pages it currently shows “additional information” at the bottom listing the product shipping weight and dimensions- how do I hide this extra information

2
I would like to set the font for the store title to the google font Asset however I cannot figure out how to do this and get it to stick with a google font, do I need to import the font or something like this? Can you please tell me how to change this font in all instances of the shop header title?

3
when you add an item to your cart a gray/blue rectangle appears at the top of the page with a link to the shopping cart (screen grab attached below)- how can I change the color for every instance of this gray/blue rectangle? (sometimes it appears at other points during the checkout process)

4
How do I change the fonts on all of the buttons in the checkout process to the google font Baloo Thambi? (apply coupon, update cart, place order etc etc)

5
How do I change the fonts of all of the text within the checkout process (addresses, billing details, text entered within the fields etc- is there a way to address the fonts of all of the fonts on the woocommerce template pages to make it all baloo thambi or would I need to individually address each chunk of text via css?)

6
How can I change the yellow background color in these boxes as they get autofilled? How can I change the color of the outlines around these input fields/input boxes?

login info in a secure note below

motherculture.love/shop

Thank you so much!!

#2

Hello There,

Thanks for writing in!

1.) Additional Information can be hidden by going to X > Theme Options > WooCommerce > Single Product and disable the “Additional Information Tab”.

2.) To set the font for the store, please have this custom css updated:

.woocommerce-page .h-landmark {
    font-family: 'Faster One';
    font-size: 55px !important;
}

Changing the “Faster One” to Asset will change the font of the Shop title.

3.) To change the color of the WooCommerce message, please make use of this code:

.woocommerce-message {
    color: magenta !important;
    border-color: magenta !important;
}

Feel free to change the color values.

4.) To change the font of the buttons in woocommerce pages, please make use of this code:

.woocommerce li.product .entry-header .button, 
button.single_add_to_cart_button,
.woocommerce .button {
    font-family: 'Baloo Thambi' !important;
}

5.) The font of the WooCommerce check out fields is dependent with your global settings. Please go to X > Theme Options > Typography > Body and Contents and make sure that it is set to Baloo.

6.) To change the colors of the auto filled fields, you may use this code:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

For reference:

Hope this helps.

#3

Hello thank you for this

2
This actually does not change anything, although I have the css set to Faster One it does not properly set the font which is part of the problem, if I switch it to asset, same the font does not change---- what do I need to do to actually make this work? If You could please test it that would be wonderful

3
there are still some of these messages coming up in blue with blue borders such as the coupon code request or returning customer request (screengrab below)— how do I change the colors of these?

5
is there a way change these only for woocommerce pages but leave the global standards intact on all other pages

6
how do I change the color of the background of the input field boxes?

Thank you so much!

#4

Hey There,

Thanks for updating in!

2.) The code did not work because it turns out that Asset font is not loaded yet on the page. To resolve that, you will need to update the code and use this:

@import url('https://fonts.googleapis.com/css?family=Asset');
.woocommerce-page .h-landmark {
    font-family: 'Asset', cursive;
    font-size: 55px !important;
}

And if you use Faster one, you will need this code:

@import url('https://fonts.googleapis.com/css?family=Faster+One');
.woocommerce-page .h-landmark {
    font-family: 'Faster One', cursive;
    font-size: 55px !important;
}

3.) Please update the css code and use this:

.woocommerce-message,
.woocommerce-info {
    color: magenta !important;
    border-color: magenta !important;
}

5.) And to make the font change of the fields for the WooCommerce pages only, you can make use of this code:

.woocommerce-account form select, 
.woocommerce-account form textarea, 
.woocommerce-account form input[type="tel"], 
.woocommerce-account form input[type="text"], 
.woocommerce-account form input[type="email"], 
.woocommerce-account form input[type="password"], 
.woocommerce-checkout form select, 
.woocommerce-checkout form textarea, 
.woocommerce-checkout form input[type="tel"], 
.woocommerce-checkout form input[type="text"], 
.woocommerce-checkout form input[type="email"], 
.woocommerce-checkout form input[type="password"] {
  font-family: Arial;
}

6.) You can add the code in #5 and add background-color: black; like this:

.woocommerce-account form select, 
.woocommerce-account form textarea, 
.woocommerce-account form input[type="tel"], 
.woocommerce-account form input[type="text"], 
.woocommerce-account form input[type="email"], 
.woocommerce-account form input[type="password"], 
.woocommerce-checkout form select, 
.woocommerce-checkout form textarea, 
.woocommerce-checkout form input[type="tel"], 
.woocommerce-checkout form input[type="text"], 
.woocommerce-checkout form input[type="email"], 
.woocommerce-checkout form input[type="password"] {
  font-family: Arial;
  background-color: black;
  color: white;
}

We would loved to know if this has work for you. Thank you.

#5

Hello

Thank you so much for this!!

A couple of these still are not working- details below

6
I can’t seem to get the background color for the input fields to set to WHITE- are these pieces of code in conflict or do I need to add something else?

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid magenta;
-webkit-text-fill-color: magenta;
-webkit-box-shadow: 0 0 0px 1000px #000 inset;
transition: background-color 5000s ease-in-out 0s;
}

.woocommerce-account form select,
.woocommerce-account form textarea,
.woocommerce-account form input[type=“tel”],
.woocommerce-account form input[type=“text”],
.woocommerce-account form input[type=“email”],
.woocommerce-account form input[type=“password”],
.woocommerce-checkout form select,
.woocommerce-checkout form textarea,
.woocommerce-checkout form input[type=“tel”],
.woocommerce-checkout form input[type=“text”],
.woocommerce-checkout form input[type=“email”],
.woocommerce-checkout form input[type=“password”] {
font-family: Arial;
background-color: white;
color: magenta;
}

5
this doesn’t seem to change the fonts for any of the titles for the input fields, do I need to add something else to make it apply to all fonts on the woocommerce pages (input fields, field titles etc)? I would also like to set it to the google font Baloo Thambi

2
I currently have the following code input but I cannot make the shop title font change to either- what is the problem with my code?

@import url(‘https://fonts.googleapis.com/css?family=Faster+One’);

@import url(‘https://fonts.googleapis.com/css?family=Asset’);

.woocommerce-page .h-landmark {
font-family: ‘Asset’;
font-size: 35px !important;
}

1
How do I change the color of the text for the product name and price on the main shop page?

Thank you so much!!

#6

Hello There,

6.) The code works as I have tested your site. I went to the check out page and the fields has a white background and a magenta text color.

And if you are referring to the auto filled fields, please refer to this link since this is a browser specific already and deemed as custom development.

5.) It does work and is set as Arial. If you want other code, you use this instead:

.woocommerce-account form select, 
.woocommerce-account form textarea, 
.woocommerce-account form input[type="tel"], 
.woocommerce-account form input[type="text"], 
.woocommerce-account form input[type="email"], 
.woocommerce-account form input[type="password"], 
.woocommerce-checkout form select, 
.woocommerce-checkout form textarea, 
.woocommerce-checkout form input[type="tel"], 
.woocommerce-checkout form input[type="text"], 
.woocommerce-checkout form input[type="email"], 
.woocommerce-checkout form input[type="password"] {
  font-family: 'Baloo Thambi';
}

2.) Already fixed. I have added @font in the WP additional css section.

@import url('https://fonts.googleapis.com/css?family=Faster+One');

@import url('https://fonts.googleapis.com/css?family=Asset');

1.) The product name and price is red because that is what is set in your custom css.

Hope this helps.

#7

Hello

Thank you so much for this, I think we are still misunderstanding each other on #5

5
right now all of the fonts in the input fields themselves have been set to arial- but how do I set the fonts of all of the titles for the input fields ie. FIRST NAME, COMPANY NAME, COUNTRY, LAST NAME etc etc etc etc- I would like to set the fonts for all of the woocommerce input field titles in the cart and checkout pages

also re #1 - the background color starts off as white, but if it autofills in chrome then the background becomes black- is there an easy way to change this so that it always stays white background?

Thank you so much!

#8

Hello Again,

  1. You can use this code:
.woocommerce-account label, 
.woocommerce-checkout label {
  font-family: 'Baloo Thambi';
}

1.) The Auto filled fields is controlled by the browser defaults that is why I have referred you to this link:

There might be a way but I am not sure how. Regretfully this is already beyond the our capacity since it already involves the browser default stylings for auto filled input fields.

Thank you for your understanding.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.