Add to Cart Example: Menu

Hibernation Ale Ever get a beer blanket so heavy you could curl up for the winter? We don’t recommend that heavy of drinking, but this Traditional Old-English Ale really hits the spot and warms the bones. $2.50
Juicy Domination This Tropical IPA is bound to dominate your tastebuds and bring them to the sunny beaches you never knew existed in Oregon. $3.25
Juicy Drop Hazy IPA A Breckenridge brew, this hoppy can shows the soft, lush, and intensely juicy profile that beer lovers around the world will agree is delicious. $4.00
Sparkalicious Hard Seltzer Cosmo Blast your tastebuds with a refreshing yet sweet seltzer that goes down smooth! A perfect way to start your night. $2.50
White Claw – Lemon $4.50
White Claw – Mango $4.50
White Claw – Tangerine $4.50
White Claw – Watermelon $4.50
Wild Basin – Bitter Citrus Spritz For the citrus fanatics, it’s sure to make your mouth pucker! $4.25
Wild Basin – Fruity Sangria A more Fruit than Sangria vibe, this can is sure to be a hit for many flavor palettes. $4.25
Wild Basin – Habañero Piña Colada Leaving a spicy trail, this is like the best lingerer at a party. One who makes you feel confident, and helps you clean up! $4.25
Wild Basin – Mango Mai Tai A nice middle of the road sweetness that isn’t overpowering in any, even way at the end. $4.25
Winterfest Enjoy a warm malty yet slightly sweet take on your traditional Winter Lager. $4.00

Add to Cart Example: Single Callout

Having one direct Call To Action is an effective way to guide your users into actions you would like them to take. In this example, we are going to show how effective this can be when used in stark contrast to walls of text. Whether you are writing an article, creating an educational post, or trying to build a better brand, we can all understand how an effective and vibrant Call To Action guides the users eye.

Pua the Hawaiian Pig Plush Toy $18.00

Also on display here is hiding of the quantity field, utilizing the min/max functions in the block, only adding 1 product at a time. The min/max functions do not prevent a purchase based on the min/max values, but will reject someone trying to add more to their cart from using these buttons.

The buttons shown here are the most flexible variants of the blocks available, utilizing CSS to make the interesting variations of display shown throughout the website. If you have submissions you would like us to present, you can reach out using our contact form!

Using the same block with some slight modifications, we can actually see here that we can create a full width banner as an effective Call To Action, promoting a product or browsing habits as well.

Pua the Hawaiian Pig Plush Toy $18.00

Add To Cart Example: Sub Store Area

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.