Some CSS works in Theme Options > CSS to make adjustments to Woocommerce

Support
#1

When I make changes to the css in Theme Options>CSS the window to the right shows the adjustments that I would like to make, but when I go out on my localhost to look at it only some adjustments stick.

In Theme Options

Screenshot 2020-11-05 at 2.15.37 PM
Screenshot 2020-11-05 at 2.15.37 PM2092×1386 266 KB

Outside of the Theme Options environment:

Screenshot 2020-11-05 at 2.17.32 PM
Screenshot 2020-11-05 at 2.17.32 PM2748×1532 248 KB

I tried to cut and paste the css into my child theme and that didn’t work either.

I have to say the current layout and styling that is available in Pro for Woo is lacking and the most frustrating experience I have ever had with Wordpress.

#2

Hi Desi,

Thanks for reaching out.

If your website is still on localhost then we can’t check it to help you troubleshoot your issue. If you would like us to check it, can you upload it to a temporary server so that we can help you sort your problem.

On the other hand, you may try to clear the style cache. To do that, please go to Pro > Status

image
image1172×458 40.8 KB

Hope that helps.

Thank you.

#3

That didn’t work. I’ll work on uploading my site. I didn’t want to do that until I was ready to launch because of all the malware attacks lately, but I will.

#4

Hi Desi,

Great, just let us know when your website is already uploaded to your server so that we can help you troubleshoot your issue.

Thank you.

#5

I have a live demo site now. http://ijl.tlu.mybluehost.me/demo/shop/

#6

Hello Desi,

Kindly update the last portion of your Custom CSS and use this instead:

.has-post-thumbnail .entry-wrap{
    border-radius:none;
}
.woocommerce li.product .entry-header h3{
    font-family: "Custom Font Family",serif;
}
element.style{
}
.woocommerce li.product.first{
    clear:both;
}
.woocommerce .cols-3 li.product,.woocommerce.columns-3 li.product{
    width:30.66667%;
}
.woocommerce li.product{
    background-color:transparent;
    border-radius:0;
    box-shadow:none;
}
.woocommerce div.product .summary .product_title{
    margin:0 0 0.25em;
    font-size:200%;
    font-family:"custom font family",serif;
}
.woocommerce li.product .entry-header h3{
    font-family:"custom font family",serif;
    font-weight:100;
}
.has-post-thumbnail .entry-featured{
    border-bottom:none;
}

If nothing is helping, provide us access to your staging site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
​
To know how to create a secure note, please check this out: How The Forum Works

image
image1040×250 17.4 KB

Best Regards.

#7

It didn’t work. I’ve left a secure note.

#8

Hello Desi,

The given credentials do not work for us.

Please double-check it. Thanks.

#9

i double checked, it should work now.

#10

Hello Desi,

I have logged in and went ahead to resolved the issue. I simply updated the CSS as I pointed out in the code above.

Screen Shot 2020-11-08 at 8.54.43 AM
Screen Shot 2020-11-08 at 8.54.43 AM1028×496 49.5 KB

Kindly check your shop page now.

#11

I did the same and it didn’t work. Where did you update the css?

#12

Also the ‘custom font family’ isn’t showing.

#13

Hello Desi,

Screen Shot 2020-11-08 at 9.24.27 AM
Screen Shot 2020-11-08 at 9.24.27 AM1254×1750 78.6 KB

I have corrected the CSS in Pro > Theme Options > Custom CSS. I have changed the code from:

font-family: "Custom Font Family",serif";

into this one instead, removing the extra " in your code:

font-family: "Custom Font Family",serif;

Now, the custom family did not work because it is not loaded into the page. You must assign the font in Pro > Theme Options > Typography > Body and Content. For more information about the Typography and how the Font Manager works, kindly check out our documentation here:

Best Regards.

#15

It’s still not working outside of the preview in Theme Options. Sorry.

You might want to refer to the screenshot in my first post to see what the type is supposed to look like. Thank you.

#16

Hi Desi,

It seems that the style is working fine, while visiting the shop page it’s loaded with the updated styles. If you are not seeing the same, I would suggest you clear the browser cache or check into the Private or Incognito mode.

Products-Demo-Site (1)
Products-Demo-Site (1)1903×903 135 KB

Thanks

#17

Which browser you are using? I’m on a Mac and I’ve tried in Private and Incognito in Safari, Chrome, and Firefox and it’s not showing up. I’ve also looked at it on my iphone. Thank you.

#18

Hey Desi,

I compared your shop front-end with the backend and the only difference I could see was the font family, it wasn’t working because of the following reason:

I went ahead and assigned this font family to Body and Content via Pro > Theme Options > Typography > Body and Content (see screenshot)

image

Now the custom font you assigned to the product titles are same on both the front-end and the back-end. Now clear all of caches and check your shop page.

Hope this helps!

#19

I only wanted the body titles in the shop to have that typeface, not the entire site. Is there a way to make that happen.

Also, this still doesn’t explain why it was displaying correctly in the Theme Options window and not outside of that window, or why @ tristup was able to see it and I wasn’t.

#20

Hey Desi,

Custom fonts are loaded only in the Preview that’s why the custom font doesn’t work on the live page.

To make it work on the live page, you need to use the font in the Theme Options or inside the builders. Since it’s not feasible for you to use the font in the Theme Options, load the font in the header. Just add any text element in the header, set the font to your custom font, and set the font size to 0 and color to transparent so that the text is hidden. That is the simplest way to load the font.

Hope that helps.

#21

Thank you so much! This completely make sense. I wish I would have thought of it myself. It’s working.