Woocommerce shop appearance customization

Hello

I am trying to customize the appearance of the woocommerce pages visible at the following urls

I will attach login credentials in a secure note below

A few questions

  1. how can I customize the various fonts (titles, prices, descriptions etc) on the woocommerce shop and product pages? The following code I received from support does not seem to work

http://www.motherculture.love/product/wiljemmi/

archive.woocommerce li.product .entry-header h3 a {
font-family: ‘Baloo Thambi’; /Change this to your preferred font/
}

  1. on the shop page, how do I make the ADD TO CART buttons rollover to a color on mouse over BUT NOT ADD A SHADOW OR ANY OTHER EFFECTS?

  2. on the product page, how do I change the color of the ADD TO CART rollover AND REMOVE ALL OF THE SHADOWS AND OTHER ROLLOVER EFFECTS?

  3. on the product pages, how do I eliminate the header that says DESCRIPTION and just keep the description itself without the header that says DESCRIPTION?

  4. on the product pages, how do I eliminate the border around the description box

  5. How do I change the font of the descriptions, prices, categories on the product pages?

  6. Is there an easy way to insert a carousel or other way of displaying related products or products of the same category at the bottom of the product pages?

  7. Is there a way to make the product title display at the top of the product page either above or to the right of the product image?

  8. How do I remove the magnifying glass icon from the product images?

  9. How do I change the name of the shop? How do I make the text that says THE SHOP on the product pages link back to the main shop page?

  10. If I want to remove the text that says THE SHOP from the product pages, how would I do this?

Thank you so much!

1 Like

Hi There,

Thanks for writing in!

The font setting comes by default from the theme font setting. To customize it you have to add custom CSS.
Here is a sample CSS code which will help you to manage your fonts for product and Details page.

/* Product listing page */
.woocommerce li.product .entry-header h3 {
font-family: 'Baloo Thambi'; /*Change this to your preferred font*/
}
.archive.woocommerce .price {
font-family: 'Baloo Thambi'; /*Change this to your preferred font*/
}
.woocommerce li.product .entry-header .button, button.single_add_to_cart_button {
font-family: 'Baloo Thambi'; /*Change this to your preferred font*/
}

/* Product details page page */
.woocommerce .entry-title {
 font-family: 'Baloo Thambi'; /*Change this to your preferred font*/
}
.woocommerce .woocommerce-product-details__short-description {
font-family: 'Baloo Thambi'; /*Change this to your preferred font*/
}
.woocommerce li.product .entry-header .button, button.single_add_to_cart_button {
font-family: 'Baloo Thambi'; /*Change this to your preferred font*/
}

Please find custom CSS for your other question in point.

-1 -2

    .woocommerce li.product .entry-header .button:hover, 
     button.single_add_to_cart_button:hover {
       background: #ccc; /*Change this to your preferred color*/
      box-shadow : none !important;
      border: 0px !important;
    }

-3

.woocommerce-tabs ul.x-nav-tabs {
display: none;
}

-4

.woocommerce div.product .woocommerce-tabs .x-tab-content {
  border: none !important;
}

-5

.woocommerce div.product .summary .price>.amount, 
.woocommerce div.product .summary .price>ins>.amount {
font-family: 'Baloo Thambi'; /*Change this to your preferred font*/
}
.woocommerce  .product_meta {
font-family: 'Baloo Thambi'; /*Change this to your preferred font*/
}

-6 - for this you need a third party plugins, we don’t have a recommendation but you can try.

-7 You need customization work, which is beyond our theme support scope.

-8

.woocommerce-product-gallery__trigger {
 display: none !important;
}

-9

To change shop title Simply go to X/Pro > Launch > Theme Options > {Your Stack} > Shop Options > Shop Title or in Appearance > Customize > {Your Stack} > > Shop Options > Shop Title

-10 Please remove the text here as reference to point number 9.

Hope this helps!

1 Like

Thank you so much for this!

A couple more questions

  1. How do I change the font of the shop title that says THE SHOP?

  2. How do I change the font for the quantity before you add to cart?

  3. How do I change the font for the long description at the bottom? (not the short description on the side)

  4. Is it possible to change the size/ shading rollover/hover options for the product gallery thumbnails that appear ontop of the main product image in the upper right corner?

5.On the main products/shop page- how do I change the font/text colors/background colors for the sorting menus?

Hey There,

Thanks for updating in!

1.) The font of the title “The Shop” is coming from the heading settings in Theme Options, X > Theme Options > Typography > Headings which is “EB Garamond”. If you want to customize it and have a different font from other headings, you can make use of this code instead:

.woocommerce-page .h-landmark {
    font-family: Arial, serif;
}

2.) You can make use of this code to change the font of the quantity:

.woocommerce .quantity input[type="number"] {
    font-family: Arial, serif;
}

3.) To change the font f the description pane, you can use this:

.x-tab-pane.description_pane {
    font-family: Arial, serif;
}

4.) To modify the product gallery thumbs, you can use this code:

.woocommerce .quantity input[type="number"] {
    font-family: Arial, serif;
}

.x-tab-pane.description_pane {
    font-family: Arial, serif;
}

.flex-control-nav.flex-control-thumbs img {
    height: 60px;
    box-shadow: 0 0 5px rgba(0,0,0,0.75);
    opacity: 1;
}

.flex-control-nav.flex-control-thumbs img:not(:hover):not(.flex-active) {
    opacity: 0.85;
}

5.) To modify the sort filter menu, you may use this code:

.woocommerce-ordering select {
    font-family: Arial, serif;
    color: red;
    background-color: white;
    border-color: red;
}

Feel free to change the values as they only served as an example.

Thank you so much for this!

A few more questions~

1
This fix worked for the sort pulldown on the shop on the left side, but the ‘results displayed’ box on the right is still gray and black, how do I make this match the sort pulldown menu which is now white and red?

2
how do I change the font size of the categories?

3
how do I make it say ''Product Type:" instead of “Categories”

4
How do I center the shop title text on all pages? (shop and individual product pages)

5
Before launching the store- what do I need to do to make sure everything is functioning properly? Can you check and make sure my SSL certificate or any other connections are properly linked or is there a checklist I can reference that will show me all of the steps to make sure everything is properly set up? Attaching login info in a secure link below

Thanks so much!

Hello there,

Please see answers below:

  1. Can you share to us the URL of this page is so we can give you the exact code to achieve this?

  2. To change font-size of the categories:

.woocommerce .woocommerce-loop-category__title {
     font-size: 20px !important;
}
  1. To change Categories to Product Type: label, kindly add this code into the functions.php of your child theme.
add_filter('gettext',  'translate_text');
add_filter('ngettext',  'translate_text');

function translate_categories($translated) { 
  $translated = str_ireplace('Categories', 'Product Type:', $translated);
  return $translated; 
}
  1. To center shop title and product title text on all pages:

The main title is centered as designed. For the indvidual title, see code below:

.woocommerce .products .product {
     text-align:center
}
  1. You can check this documentation from Woocomerce to help you get started:

Hope this helps.

Hello

Thank you for this!

Questions:

1
This fix worked for the sort pulldown on the shop on the left side, but the ‘results displayed’ box on the right is still gray and black, how do I make this match the sort pulldown menu which is now white and red?

Yes the url is

motherculture.love/shop login info in a note below

Hello @whitelobster11,

Thanks for updating thread. :slight_smile:

You can add following CSS under X > Theme Options > CSS:

.woocommerce-result-count {
    font-family: 'Baloo Thambi';
    color: red;
    background-color: white;
    border-color: red;
}

Let us know how it goes.

Thanks.

Hey thank you so much for the quick reply!

A couple more questions as some of the code from Jumar’s post did not work

  1. How do I change the font size of the categories and text that says “çategories” on the products?

  2. How do I make the product title appear on the product page? how do I change the size and font of this title?

  3. How do I center the title on the main shop AND individual product pages that says MOTHER CULTURE OBO SHOP? How do I change the it’s size?

Thanks so much! Login info attached below- this is all for motherculture.love/shop

Hello @whitelobster11,

Thanks for asking. :slight_smile:

You can add following CSS under X > Theme Options > CSS:

.woocommerce .product_meta span.posted_in {
    font-size: 20px;
}

.product_title.entry-title {
    display: block !important;
    font-size: 225% !important;
    font-family: 'Roboto', sans-serif !important;
}

.woocommerce-page .h-landmark {
    text-align: center;
}

Let us know how it goes.

Thanks.

Great thank you so much for this

a few other questions

  1. when you click on a category such as ‘hoodies’ it takes you to a page that says CATEGORY ARCHIVE- how can I make it say the category name instead ie. say HOODIES ------ or instead how do I completely remove the text that says CATEGORY ARCHIVE?

  2. how do I increase the size of the ADD TO CART button/font on the product pages?

  3. how do I increase the size of the QUANTITY box on the product pages?

  4. Why do some google fonts work but others don’t? I’ve tried to set the store header to the google font Faster One using the following code- but it doesn’t work

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

how do I change the color and font of the text and framing box that says when an item has successfully been added to your cart? (I would also like to change this for the text that says “Have a coupon? Click here to enter your code”)

How do I make a link on the main page of the shop and at the top of each product page that links to your shopping cart

7
How do I change the fonts and sizes of all of the text on the cart page?

8
How do I change the text that says CART to say MY CART

9
How do I change the appearance of the buttons on the cart page to match the appearance of the buttons on the individual product pages? I would also like to change the appearance of the buttons on the checkout pages to match

10
how do I change the fonts of all of the text that is on the checkout page and the fields you type within?

11
I am currently doing a test purchase to see if the store is functioning properly with paypal but it will not allow me to complete the order- I am stuck on the woocommerce/xtheme page where you input your address however it will not let me advance to the next page- I have entered my full address however it still says “Enter Your Full Address to see Shipping Costs” at the bottom of the page and the PLACE ORDER button is grayed out- How can I fix this/what is the problem?

motherculture.love/mothercultureoboshop is the store url login info in a note below

Thank you so much!!

Hi there,

  1. You can edit your product category in admin and look for Archive title and add one.

  2. Please add this CSS to your global custom CSS

.woocommerce li.product .entry-header .button {
    padding: 0.45em 0.5em 0.575em;
    font-size: 25px;
}
  1. It’s already big, but can increase it even more
.woocommerce .quantity input[type="number"] {
    font-size: 40px;
    padding: 1em;
}
  1. The font should be loaded or active first. I checked your site’s source code and there is no loaded font named Faster One. You should go to X > Fonts and add that font, then use it in the Typography settings or element’s font, or yes, with that CSS.

  2. The messages are given by Woocommerce itself and only displayed by the theme. Perhaps, you can check Woocommerce documentation about changing the messages texts. As for font color, you can use this CSS.

.woocommerce-message {
color: red !important;
}
  1. It’s an archive page and you can’t edit it, unless you’ll edit or create your own Woocommerce templates that will override the default templates. Or the easiest is, add your cart URL in the header menu.

  2. It’s a bit hard since the texts could belong to a different structure where it has its own styling that needed to be overridden. Let’s be specific of which text :slight_smile:

  3. Edit your cart page and change its title.

  4. The product page’s add cart button and shop page’s add cart button has the same styling on my end.

  5. Again, we need to be specific, it’s a big question. And with this, I recommend contacting a developer as we can’t provide customization here, especially full customization like this one.

  6. The theme integration with Woocommerce is just in template level, right about few templates under /x/woocommerce/. Or payment processing or method are done by Woocommerce itself so I recommend contacting a Woocommerce developer on this case.

Thanks!

Hi Rad

Thank you for this but a lot of this is still unclear to me

1- I think you misunderstood me, I don;t want to just add new categories, right now when you click on a category it takes you to a page with everything of that category type, if the category you clicked is HOODIES instead of saying HOODIES at the top it says CATEGORY ARCHIVE as the page title— how do I make it say the title of the category instead

2- How do I import a google font for use with xtheme? The X>Fonts page does not seem to allow me to add google fonts? Do I have to do this via CSS?

3-How can I add shopping cart and checkout links to each shop and product page? Do you mean to tell me there is no way to have a button that takes users to their shopping cart or to the checkout? What if a customer is still browsing after adding to their cart and then decide they need to checkout or check the contents of their cart?

4- How do I change the fonts and font sizes for all of the text on the cart page?

5- How do I edit the cart page to change the title from CART to MY CART?

6- How do I make all of the add to cart and checkout buttons match the styling of the ADD TO CART buttons on the product page? IE. I want all of the buttons in the checkout and cart process to match the buttons of the product page in terms of hover state, no shadows, colors, etc.

7- Is there an easy way to change the fonts of all of the text on the checkout page? Again i would also like to style the buttons on this page to match the styling on the product page

8- Please help me with this- I have made no changes to the theme or to woocommerce that should effect this and it really should be base level functionality- I am using this aspect of the product more or less out of the box and would hope that it should work properly without needing to hire a developer to troubleshoot it’s most basic function------I am currently doing a test purchase to see if the store is functioning properly with paypal but it will not allow me to complete the order- I am stuck on the woocommerce/xtheme page where you input your address however it will not let me advance to the next page- I have entered my full address however it still says “Enter Your Full Address to see Shipping Costs” at the bottom of the page and the PLACE ORDER button is grayed out- How can I fix this/what is the problem?

motherculture.love/mothercultureoboshop is the store url login info in a note below

Thank you so much!!!

Hello There,

Thank you for the very detailed post information.

1.) To easily resolve this, please edit your product categories. Go to Products > Categories. Click one of the category and edit it. Find the “Archive Title” option. Editing this will change the category page archive title. I went ahead and edited your two categories already.

2.) You cannot import a Google Font. Which font family you would like to add? Is it not their in the selection already? Please check out the Font Manager to know more how you can use the Font manager correctly: https://theme.co/apex/forum/t/font-manager/101/1

3.) Where do you want to place the cart and checkout links in your shop and product pages? The easiest way is to create a custom link in your menu which you can manage it in Appearance > Menus.

4.) The fonts and font sizes of the cart page is dependent in your global typography settings which you can modify in X > Theme Options > Typography.

5.) Well, go to your WordPress dashboard > Pages and find your “Cart” page. Simply edit the page and change the title.

6.) You already have the same styling with regards to the buttons. They just don’t have the same size.

7.) The same with #4. All the font styles can be change in X > Theme Options > Typography.

8.) Please add a sandbox or add another payment option like “Cash on Delivery” aside from paypal so that you can test the order page.

Hope this helps.

Great thank you so much for this!
A couple questions

1
how do I add a google font for use such as their font Faster One or Asset?

2
with my last questions I think we misunderstand each other on #6- I meant that I would like the buttons in the checkout and cart pages to match the styling of the buttons on the product and shop pages.

motherculture.love/mothercultureoboshop is the store url login info in a note below

Hello There,

Thanks for writing in!

1.) The Google Faster One or Asset is in the Fonts template.


And since you are not using the Font Manager, you can simply select Faster One or Asset in the Font Family selector in X > Theme Options > Typography


2.) The global button setting can be styled in X > Theme Options > Buttons . You do not need any css code. Just tweak the settings to be able to achieve the same button style with the shop page.

Hope this helps.

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