List of all Wordpress & Woocommerce CSS for customisation

Hi there,

As far as I aware, I don't think there's such a list avalible.

Actually the easiest way is to use developer tool, you can see all the classes of elements on your site:
https://developer.chrome.com/docs/devtools/

Hey Ying,

Yes, the developer tools option I know, but sometimes internal elements are hard to find, like see the links which I have given you in the private box.

Thanks!

1. It can be found using developer tool easily, the point is how you choose the effective selectors in CSS:
[SCREENSHOT REMOVED FOR PRIVACY PURPOSE]

So the selector would be: table.shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents > thead > tr:first-child

2. It's not align to center is because of this CSS you added:
[SCREENSHOT REMOVED FOR PRIVACY PURPOSE]

3. The cause of the add to button issue is the same as NO.2, and the weird column width is caused by some CSS added by Divi builder. Try disable the Divi builder and clear cache see if the issue is still there.
[SCREENSHOT REMOVED FOR PRIVACY PURPOSE]

If I disable the CSS, the columns are back to normal:
[SCREENSHOT REMOVED FOR PRIVACY PURPOSE]

Hello Ying,

I didn't add those CSS, it was added in Niche theme import from Generatepress site library.

Thanks a lot I will check those, seems the niche theme custom css has some settings to be removed.

Yes, if you did some changes after the import or it was not a fresh install when you imported the site or you are using some 3rd party plugins, there might be some code conflicts going on.

We would be happy to help if you start topics here :)

Hey Ying,

Can you pls tell where do we change font on the website?

Fonts can be changed at customizer > typography mostly.

In some static pages, you might be able to change fonts individually in the block level in page editor :)

Hey Ying,

Thanks! Can you pls tell how to add hover effect css on Woocommerce Single Product page add to cart button, how do you find that code in css?

See the private information box

You can try this CSS for single product page only:

.single-product button.single_add_to_cart_button.button.alt:hover {
    background-color: green;
    color: black;
}

Or go to customizer > colors > Woocommerce, change the alt button colors there. But it applies to some other buttons as well, eg. Place order button on check out page.

Since the original question has been answered, I'll mark this topic as resolved.

If you have more other questions, would you please open a new topic. It's easier for us to archive and categorize the topics, and also easier for other users to search when they seek for their answers.

Thanks for your understanding!

Hey Ying,

Thanks a lot, yes I was wondering should I keep opening new topics or write here, what will be more convenient for you guys, as you told to open new I will follow that for future topics, thanks a lot and have a great weekend :)

Thanks! Have a good weekend yourself too! :)