I’ve recently bought Vantage to use it with Woocommerce. Theoretically Vantage should override Woocommerce and it seems to be.
I tested 3 pages where I’ve buttons:
1-The Home: the base color is the one from Vantage but the hover color is taken from Woocommerce;
2-The Shop: the base color is from Vantage (I can see it using firebug) and there is no hover effect;
3-The cart: all the bottun’ styles are taken from Woocommerce;
I’m missing something? There is a way to make Vantage overriding the plugin’ style?
Unfortunatly I’m doing this work in local.
I was forgetting…in 2-The Shop I can see that the color is taken from Vantage but I haven’t found that control in the customization page.
Hi zeitan
Thanks for your support. On the whole Vantage should let WooCommerce handle it’s own styling. We can assist in smoothing this out. Please can you send through links for each of these points and confirm which styling you want to use and I’ll do my best to get it all lined up for you.
This is the code in style.css from vantage that controls the buttons in the archive shop pages but I haven’t found anyway to change it in the vantage costumization page. Am I missing something or there is no control for that color?
line 2898
* This will override anything from WooCommerce core CSS */ .woocommerce #page-wrapper .button { border-top: solid 1px #d2d2d2; border-left: solid 1px #c3c3c3; border-right: solid 1px #c3c3c3; border-bottom: solid 1px #9f9f9f; background: #ffffff; background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dfdfdf), color-stop(1, #ffffff)); background: -ms-linear-gradient(bottom, #dfdfdf, #ffffff); background: -moz-linear-gradient(center bottom, #dfdfdf 0%, #ffffff 100%); background: -o-linear-gradient(#ffffff, #dfdfdf); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf', GradientType=0); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #646464; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5); -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5); width: auto; text-decoration: none; /* Improves usability and consistency of cursor style between image-type 'input' and others */ cursor: pointer; /* Corrects inability to style clickable 'input' types in iOS */ -webkit-appearance: button; line-height: 1; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }There is unfortunately no front end setting for this at the moment. You can take the above selector and paste it into Appearance > Custom CSS and customise from there.
So, the best solution is to create a custom css that merge both Vantage and Woocommerce?
If you’d like to get rid of the times that Vantage adds styling and go with the WooCommerce styling then we’d need to add the Vantage WooCommerce buttons selectors Appearance > Custom CSS and reverse the styling they add:
This instance is the only time, at least that I can see, that Vantage styles a WooCommerce button:
.woocommerce #page-wrapper .button { border-top: solid 1px #d2d2d2; border-left: solid 1px #c3c3c3; border-right: solid 1px #c3c3c3; border-bottom: solid 1px #9f9f9f; background: #ffffff; background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dfdfdf), color-stop(1, #ffffff)); background: -ms-linear-gradient(bottom, #dfdfdf, #ffffff); background: -moz-linear-gradient(center bottom, #dfdfdf 0%, #ffffff 100%); background: -o-linear-gradient(#ffffff, #dfdfdf); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf', GradientType=0); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #646464; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5); -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5); width: auto; text-decoration: none; /* Improves usability and consistency of cursor style between image-type 'input' and others */ cursor: pointer; /* Corrects inability to style clickable 'input' types in iOS */ -webkit-appearance: button; line-height: 1; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }You could try just render this all to none, the WooCommerce styling should take effect. That would look as follows:
.woocommerce #page-wrapper .button { border-top: initial; border-left: initial; border-right: initial; border-bottom: initial; background: initial; background: initial; background: initial; background: initial; background: initial; filter: initial; -webkit-border-radius: initial; -moz-border-radius: initial; border-radius: initial; color: initial; -webkit-box-shadow: initial; -moz-box-shadow: initial; box-shadow: initial; width: initial; text-decoration: initial; /* Improves usability and consistency of cursor style between image-type 'input' and others */ cursor: initial; /* Corrects inability to style clickable 'input' types in iOS */ -webkit-appearance: button; line-height: initial; text-shadow: initial; }Thak you! Your solution works pefectly.