Hey Tyroneboon,
I have been meaning to add a class control into the shortcode parameters as to let you add classes to different parts of the structure. The shortcode itself has inline styling that is used so there is no additional CSS resource enqueued to keep the plugin as efficient as possible for users.
If you are familiar with CSS, you can use the parent class of each variation and do element selection to make changes from there.
Parent classes which are on divs
woocommerce-variation-add-to-cart
woocommerce-simple-add-to-cart
Those are used for variable products and every other product type respectively. (They have different javascript controls)
Below I will list some examples of how to get some of the changes you asked.
If you want to change font family and font size, you can use the following selector to change them all in one go
.woocommerce-variation-add-to-cart, .woocommerce-simple-add-to-cart {
/*
font-family: sans-serif;
font-size: 1.72em;
or whatever styles you want */
}
To change the textbox size, you can use the following selectors
.woocommerce-variation-add-to-cart .qty, .woocommerce-simple-add-to-cart .qty {
/*
width: 100px;
This selects the input box that has class qty
*/
}
To change the spacing around the input textbox
.woocommerce-variation-add-to-cart .quantity, .woocommerce-simple-add-to-cart .quantity {
/*
width: 200px;
This selects the div that encases the input box
*/
}
You can put these in your theme’s style.css or right in the theme customizer’s “additional css” editor!
If you have any other questions don’t hesitate to reach out again!
Thanks for using the plugin 🙂
– Parker Mathewson
The Rite Sites
