Add To Cart Example: Sub Store Area

Example

One of our goals is to show you how our blocks work with content around them, allowing users to learn about our product as they either play with the page or choose to read. Here, we have put the styling directly on this page for the “sub-store” areas below. Other ways that you can add CSS can be found on our CSS guide.

Maximus Plush $25.00
Olaf Plush Toy $19.00

The blocks, as shown here, follow the standard WordPress alignment practices, custom css classes, and non-intrusive styling built in. Check out how you can create a more phone browsable beer or restaurant menu here!

Also notice, we attempt to follow theme styles as much as possible, applying standard classes “button” and “alt” with type “submit”, matching many theme building suggestions from WordPress or other sources.

Additional classes used, when the Add to Cart button is pressed, it adds a “loading” class, and when completed, buttons get an “added” class! Many themes already integrate with these classes, and if yours does not, you can use the example code below to get a quick loading animation.

Maximus Plush $25.00

You can mix the single or the group Add to Cart blocks on the page, or even have multiple of the same product on a page! The individual Add to Cart “area” act uniquely, so if multiple areas on the same page have an Add to Cart Pro button, their unique quantity boxes will not influence the other area on the page.

To be clear, none of the physical products on this website are for sale, nor are we claiming to sell or have any right to sell these products. We wanted to have some fun and create an interesting example experience.

About Author

addtocartpro

Leave a Reply