Formatting the Proceed to Checkout Button

Further to the previous thread here, I just wanted to post the solution to reformatting the Continue Shopping and Proceed to Checkout link in the cart to make it into a button.

Changing the appearance can be achieved by modifying the CSS using the Style editor under Appearance / eShop menu item.

The reason it may not seem straight forward initially is because the styles / classes for these items are not defined in the style sheet (at least they went in mine).

Therefore you must define the class .gotocheckout and .rtnshopping to set a style for the checkout link and continue shopping link.

Below is the code I used on iBox Photography to create red buttons to replace the links. The proceed to checkout button is in bold to add more emphasis on that action.

You may also notice that I have removed the update and empty cart buttons, but I won’t post how I did that here as it’s a hack and is not supported.

I hope this is useful to those looking to add more emphasis to the checkout button!

/* Checkout button */
.gotocheckout {display: inline-block;
float: right;
width: 170px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	border: 0px;
	padding: 3px 10px 5px 10px;;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #fff;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity = 100);
	opacity: 1;
	-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .2), 0px 1px 0px
		rgba(255, 255, 255, .2) inset;
	-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, .2), 0px 1px 0px
		rgba(255, 255, 255, .2) inset;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, .2), 0px 1px 0px
		rgba(255, 255, 255, .2) inset;
	background: url(images/gradient_button.png) repeat-x bottom #de3917;

}
.gotocheckout a {font-family:Arial; font-size:14px; font-weight: bold;}
.gotocheckout a:link {color:#ffffff;}
.gotocheckout a:visited {color:#ffffff;}
.gotocheckout a:hover {text-decoration:none;}
.gotocheckout a:active {text-decoration: none;}

/* Continue Shopping */
.rtnshopping {display: inline-block;
float:left;
width: 145px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	border: 0px;
	padding: 3px 10px 5px 10px;;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #fff;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity = 100);
	opacity: 1;
	-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .2), 0px 1px 0px
		rgba(255, 255, 255, .2) inset;
	-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, .2), 0px 1px 0px
		rgba(255, 255, 255, .2) inset;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, .2), 0px 1px 0px
		rgba(255, 255, 255, .2) inset;
	background: url(images/gradient_button.png) repeat-x bottom #de3917;

}
.rtnshopping a {font-family:Arial; font-size:14px;}
.rtnshopping a:link {color:#ffffff;}
.rtnshopping a:visited {color:#ffffff;}
.rtnshopping a:hover {text-decoration:none;}
.rtnshopping a:active {text-decoration: none;}

http://wordpress.org/extend/plugins/eshop/