Changing woocommerce product styling

[davepearson]

I have just installed woocommerce and the facebook to woocommerce app to effortless sync between the two mediums.

Unfortunately my site is black and the large, garish white boxes that are styled in the product page as standard are proving difficult to change. Where would I change basic text colours, borders, boxes and buttons etc to enable me to consistently brand the woocommerce pages with my existing styles?

Please note: child themes are way over my head. I am new to design and this is my first ever website. I have thank fully managed to achieve a fair bit with customised CSS but sometimes that can be daunting… Go easy on me.

I was hoping that the fantastic x theme would have more options for editing woocommerce similar to the rest of the fantastic functionality but unfortunately that is not the case.

Any help would be much appreciated.

Kind regards,

Dave

[Themeco1]

Hi There,

This was posted in the wrong forum. If you are looking for support, all questions are to be posted in the Themeco category or by clicking + Support. The other categories are for discussion with fellow Apex members. I have moved your thread this time but keep that in mind in the future.

How support works.

[john]

Hello,

Thank you for writing in!

if you could post some logins details and the website link in a secure note and we`d be happy to take a look.

P.S: You can search by “secure note” on this article if you don`t know about this: https://theme.co/apex/forum/t/themeco-support-overview/288

[christopher]

Hi there,

Thank you for providing the login information. I’m totally with you regarding the options to do some visual changes in Woocommerce, but unfortunately it is virtually impossible due to how the Woocommerce plugin is coded.

The only way to enforce our changes is through overriding the original Woocommerce files in the theme, and believe me that is a support nightmare for any theme developer as the files are changed in each release and in some point it is getting out of hand. That is why we try the minimalistic approach here to give basic styling.

I did a check using he shop menu item on your website and came up with this css code which you can add to X > Launch > Options > CSS:

.woocommerce-ordering select,
.x-tab-content .x-tab-pane,
.x-nav-tabs>.active>a, .x-nav-tabs>.active>a:hover,
.x-nav-tabs>.active>a, .x-nav-tabs>.active>a {
	background-color: #212121;
	color:  white;
}

If there are other cases that you feel it can be improved on your dark skin theme kindly get back to us with the exact URL and a screenshot of the case and we will be happy to give you some CSS suggestions.

Thank you.