This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Changing Vantage Woocommerce Shop Button

Resolved 9 replies premiumthemetheme-vantage
Gunter
10 years ago · Last reply by Andrew Misplon 10 years ago

Is there a way to change all the Woocommerce shop buttons into that button which is in the purchase order processing, in the shopping cart – right down at the bottom?

See screenshot:
https://www.dropbox.com/s/nyqagmzexqun1ck/shopbutton.jpg?dl=0

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

9
  1. Andrew Misplon Staff 10 years, 10 months ago

    Hi Gunter

    Thanks for reaching out.

    Please try the following at Appearance > Custom CSS:

    /* WooCommerce */
.woocommerce a.button,.woocommerce .checkout-button,.woocommerce input.button,.woocommerce .button.alt,.woocommerce #page-wrapper .button
{
	background:0;
	border-bottom:solid 1px #0077b4;
	border-left:solid 1px #007ebd;
	border-right:solid 1px #007ebd;
	border-top:solid 1px #0086c5;
	color:#fff;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00bcff',endColorstr='#00aaeb',GradientType=0);
	text-shadow:none;
}
.woocommerce a.button:hover,.woocommerce .checkout-button:hover,.woocommerce input.button:hover,.woocommerce .button.alt:hover,.woocommerce #page-wrapper .button:hover
{
	background:0!important;
	border-bottom:solid 1px #0081c3!important;
	border-left:solid 1px #08c!important;
	border-right:solid 1px #08c!important;
	border-top:solid 1px #0090d4!important;
	color:#fff;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0fc0ff',endColorstr='#00b5fa',GradientType=0)!important;
}
  2. Gunter 10 years, 10 months ago

    Hi Andrew,

    thanks for this code, but it looks this like (screenshot):
    https://www.dropbox.com/s/rr19mh08r5kazw6/shopbuttonclear.jpg?dl=0

    Only a margin to see.

  3. Andrew Misplon Staff 10 years, 10 months ago

    If possible, please, could we view the site. You could use the private reply checkbox below.

    Thanks.

  4. Gunter 10 years, 10 months ago

    I turned it back to the normal Butons.

    http://shop.lohntsich.de

  5. Gunter 10 years, 10 months ago

    Hi Andrew,

    I changed the two lines

    color: #fff;

    into the colors

    color:#1600A5;

    and

    color:#5FB0EA;

    Here the complete code:

    /* WooCommerce Buttons ändern*/
.woocommerce a.button,.woocommerce .checkout-button,.woocommerce input.button,.woocommerce .button.alt,.woocommerce #page-wrapper .button
{
	background:0;
	border-bottom:solid 1px #0077b4;
	border-left:solid 1px #007ebd;
	border-right:solid 1px #007ebd;
	border-top:solid 1px #0086c5;
	color:#1600A5;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00bcff',endColorstr='#00aaeb',GradientType=0);
	text-shadow:none;
}
.woocommerce a.button:hover,.woocommerce .checkout-button:hover,.woocommerce input.button:hover,.woocommerce .button.alt:hover,.woocommerce #page-wrapper .button:hover
{
	background:0!important;
	border-bottom:solid 1px #0081c3!important;
	border-left:solid 1px #08c!important;
	border-right:solid 1px #08c!important;
	border-top:solid 1px #0090d4!important;
	color:#5FB0EA;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0fc0ff',endColorstr='#00b5fa',GradientType=0)!important;
}

    This works now, but the backgroundcolor of the checkout-button in the shoppingcart has a strange color. How to change this color? Further on the backgroundcolor of all buttons is white and I would like to have it in this

    #5FB0EA
  6. Andrew Misplon Staff 10 years, 10 months ago

    Thanks for the effort.

    In your Custom CSS you’re saying:

    .woocommerce a.button:hover,.woocommerce .checkout-button:hover,.woocommerce input.button:hover,.woocommerce .button.alt:hover,.woocommerce #page-wrapper .button:hover
{
	background:0!important; /* Right here, this is where the white/no background is being set. Change this.  */
	border-bottom:solid 1px #0081c3!important;
	border-left:solid 1px #08c!important;
	border-right:solid 1px #08c!important;
	border-top:solid 1px #0090d4!important;
	color:#5FB0EA;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0fc0ff',endColorstr='#00b5fa',GradientType=0)!important;
}
  7. Andrew Misplon Staff 10 years, 10 months ago

    Check out my comment on line one there to set a button background color.

    The purple checkout button can be adjusted with:

    .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
  background-color: #a46497;
}
  8. Gunter 10 years, 10 months ago

    Hi Andrew,

    Super fine, this works.

    Thank you for your help and have a nice weekend :)

    Gunter

  9. Andrew Misplon Staff 10 years, 10 months ago

    Awesome :) Thanks. You too.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread