One of my favorite things about Artisteer is the ability to randomly generate themes/templates, and in most cases this is the starting point of a great design. However, there are some settings that have to be set in a certain way, in order for the theme to look good. Today, I’m going to discuss one of those situations.
This issue is apparent for those of us who use Woocommerce, and have variable products. Once you put a variable product in the shopping cart and go to the shopping cart page, in most cases you will notice that the product’s options do not line up properly. Also the shipping info is not lined up either, so in a way this affects all Woocommerce products, and not just the variable ones, although the products in the cart are more visible. Don’t get me wrong, the cart and all the functions of the site will work, but if you want everything to look pixel perfect, we need to pay attention to the small little details like this.
The problem stems from this piece of code within your theme’s style.css file (found near the top):
margin: 13px 0;
In most cases I found that Artisteer likes using a margin value of 13px for this class. Of course this value will vary from theme to theme, as Artisteer generates the themes from randomized settings.
Quick Manual Fix (existing sites):
Although there is a way to fix this within Artisteer, a quick fix for existing sites, will be to change the margin value of 13px (in this case), to 0 (zero).
The Artisteer fix is equally simple, just apply these settings for your future themes. I have a short silent video demonstrating the problem, and how to fix it in Artisteer.