Ask SkyVerge: WooCommerce Align Add to Cart Buttons October 06 2014
Today’s question comes from Nelson:
Is there a way to align the “Add to Cart” or “Select Options” buttons on the shop pages? When the product names are different lengths, or some products have reviews and some don’t, the buttons are misaligned. This would make it look much more professional. Thanks!
Unfortunately, this will depend heavily on your theme. However, it may be possible with a bit of CSS to change the way these buttons are displayed. By default, buttons will appear like this:
Before
WooCommerce Align Add to Cart Buttons
Here’s how you would align these buttons if you’re using default WooCommerce styles. You could adjust the heights here as needed, and add this CSS to your child stylesheet (described here).
Now, buttons will be aligned at the bottom of the row:
After
If your theme uses different class names or ids, then this may not work for you. You could try to find the classes or ids by using the Chrome “Inspect Element” tool as seen in this video (which has an awesome soundtrack ;) – reminiscent of George Michael).
You can target CSS classes by adding a period (.) before the name, and target ids by using a hash (#) before the name. You need to target the product list styles with the second part of this snippet, and the button styles with the third part.
Here’s a community post with a bit more detail that might be helpful.
The post Ask SkyVerge: WooCommerce Align Add to Cart Buttons appeared first on SkyVerge.