Woocommerce Add to cart style as product page

Question

I am trying to get the exact styling woocommerce has in the product pages for the quantity and Add to cart button. I can't seem to add this to a normal page next to a product image. I am using Jupiter 5 and "Add to cart" shortcode. Examples attached of what it looks like and what I want it to look like. Please help!

1. http://i.stack.imgur.com/JbAaf.png
2. http://i.stack.imgur.com/qXdTj.png

Answer 1

Finally you want to add the displaying of the quantity buttons and field before add to cart button in [add_to_cart] shortcode.

You need first installing and enabling jupiter child theme (included with jupiter5). Once done, copy the woocommerce folder (located inside your jupiter5 theme) into your child theme folder.

Important note: This woocommerce templates have been (not at all) customized by jupiter5 team.

Your shop simple products pages are using for displaying quantity + add to cart fields and buttons the following woocommerce templates:

• single-product/add-to-cart/simple.php

• single-product/add-to-cart/quantity.php

"Add to cart" shortcode use another unique woocommerce template (without quantity):

• loop/add-to-cart.php

So you need to add in this template some code to have something similar than your single product pages, and it's not so easy than you can expect.

There are some related links (some are not really useful as they are, but they can help):

• Override loop template and show quantities next to add to cart buttons.

• Add the quantity field to the [add_to_cart] shortcode

• WooCommerce - Template add-to-cart.php with quantity and Ajax!

With all that material, and with the html/php code of single-product/add-to-cart/quantity.php, you will be able moving forward, and updating your question in this new way, showing what you have done, what works and what doesn't…