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, 8 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, 8 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, 8 months ago

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

    Thanks.

  4. Gunter 10 years, 8 months ago

    I turned it back to the normal Butons.

    http://shop.lohntsich.de

  5. Gunter 10 years, 8 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, 8 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, 8 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, 8 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, 8 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