[Resolved] I would like to add attributes to the add to cart button

[Author]

Posts

[bradleyH-2]

I am trying to:

I would like to add attributes to the add to cart button to add things like size and color and I would like them to fail if the product with those attributes does not exist.
OR I would like to display the options I can add with the product based on the availability (stock level) of an item with those attributes.

I am thinking this must be done on both the front end single Product template in coordination with the back end product template.
To further simplify design I would be willing to have the "add to cart" button link to the single product template to fill the details however a modal would be best as I don't like the idea of them losing thier place during thier shopping experience.

Thanks for your assistance with this in finding my best site wide UX for product interaction.

Bradley

I have enclosed my sample layout using boot strap that I created in my test site and I have plenty of room to add and move things around.

[Luo Yang]

Dear bradley,

First you need to setup a variable product with Woocommerce plugin, see their document:
https://docs.woocommerce.com/document/variable-product/

Then you can use shortcode [wpv-woo-buy-or-select] from plugin "WooCommerce Views" to display the Select options button, see our document:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-woo-buy-or-select
For variable products, the user first has to select a product variation, the Select options button will take the user to the product detail page, where they can select a Variant and add it to the cart.

[bradleyH-2]

that did it thanks!