How to use Artisteer Buttons with WooCommerce

WooCommerce is a popular choice for WordPress enthusiasts that want to incorporate a shopping cart solution in their website.  It provides an out of the box solution which has great functionality, and is generally easy to customize.  

We ran into a rather unique situation though, and found little to no documentation on how to overcome the hurdle.  

The situation:

You have just spent hours (or days) working in Artisteer to develop your own WordPress theme.  You have seen to every last detail and you are absolutely in love with your work.  You install and activate your theme, only to find that WooCommerce has overwritten many of your settings with it’s own.  Most of the settings are very easy to change, but what about your buttons? The buttons you spent hours perfecting? WooCommerce just doesn’t want to use them, but now you have a way around that.  

Below you will find one way around the dilemma. We are sure there are other, and perhaps better, ways to accomplish this, but this is proven to work in WordPress version 4.7.2 and WooCommerce version  2.6.14.

1. Install a plugin for a CSS editor. We commend never editing your theme stylesheet from inside of WordPress. If you chose to edit the stylesheet from inside of your hosting control panel, please use best practices and make a backup first just in case something goes wrong.  For the purpose of this post, we will install Slim Jetpack, and enable Custom CSS.

2. Now we need to take a look at the themes stylesheet. You can access it by downloading the file and looking at it using your favorite word editor or you can view it through your hosting control panel. You will need to locate the original button code in your stylesheet and copy it in full. You may have more than one sets of code to copy, work on one at a time.

3. Copy the button code into the Custom CSS editor. Make sure to remove any art- tags. WooCommerce won’t recognize these and they aren’t necessary for our purposes.  Best practices are to avoid using !important whenever possible. 

4. Save your changes and perform a hard refresh to clear the cache in your browser. If your buttons do not look correct, you may need a second snippit of code from your stylesheet for your buttons.  Once you’ve located and added all of your button snippits, your shopping cart will use the same buttons that you designed in Artisteer.