Home>Support>Changing Vantage Woocommerce Shop Button

Changing Vantage Woocommerce Shop Button

By Gunter, 9 years ago. Last reply by Andrew Misplon, 9 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. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    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. 9 years, 3 months ago Gunter

    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. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

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

    Thanks.

  4. 9 years, 3 months ago Gunter

    I turned it back to the normal Butons.

    http://shop.lohntsich.de

  5. 9 years, 3 months ago Gunter

    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. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    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. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    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. 9 years, 3 months ago Gunter

    Hi Andrew,

    Super fine, this works.

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

    Gunter

  9. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More