Adding a buy now button in product description

Support
#1

Hello!

I’m wondering if it’s possible to add a “Buy now” button within the product description of specific products?
The screenshot I’m adding here is from this product on my website:

Thanks for your help!
Nadia

#2

Hi Nadia,

Thank you for reaching out to us. Yes you can add a button within the product description using the button’s shortcode (see https://demo.theme.co/integrity-1/shortcodes/buttons/)

Simply paste the button’s shortcode in the product description anywhere you want. Hope this helps!

#3

Hi !

Great, thank you for sharing that Shortcode Button page. It’s super helpful!

How do I match each unique product to get added to the cart?
For instance, In the product page I mentioned earlier, there’s an “add to cart” button at the top, and after the description I want to add a “Buy Now” button. How do I make sure that when a customer clicks “Buy now”, that the product of their choice gets to the cart?

I hope that made sense. :slight_smile:

Thanks for your help!!
Nadia

#4

Hello Nadia,

I would highly recommend that you use the WooCommerce shortcode within your product description. This should display the add to cart button with the same styling as the one above.

We would love to know if this has worked for you. Thank you.

#5

Hi!

Thanks so much! It worked!
This is what it looks like:

I’m not sure if you’d be able to help me with this but I’m wondering if we could make some CSS edits?

  1. I’m wondering how to remove the grey rectangular line & broader grey area, or change the color of both of those to white?
  2. How do I change the text of the button to “BUY NOW”? I’d like to remove the icon as well.
  3. Can the font be changed to Lato, and make the font size a little bit larger?
  4. When I click the button to add it to the cart, the “View Cart” link pops up on the side (as it can be seen in the screenshot). Can I change the text to: “Proceed to checkout!” ?

Thank you for your help!

#6

Hey Nadia,

I’ll help you with minor cosmetic changes. The rest of the tweaks that I’m not including here would need to be forwarded to a personal developer.

The Gray Area is because you copied the shortcode straight from WooCommerce site to the Visual Text editor so it copied the text styling too. Switch to the Text editor and remove the pre tags.

For the Gray border, add this code in Theme Options > CSS.

.add_to_cart_inline {
    border: 0 !important;
}

I’ll only cover the icon, please add this code in Theme Options > CSS.

.add_to_cart_inline  .button:before {
    display: none;
}

The reason why the font in the button is different is because of the pre tags. Removing them as mentioned above should make the button inherit Lato which is used in your site.

For the font size, please add this code in Theme Options > CSS and adjust the value according to what you need.

.add_to_cart_inline  .button {
    font-size: 40px;
}

For the other request that I didn’t answer, please hire a developer as this would require more hacks or WooCommerce custom development.

Hope that helps and thank you for understanding.

#7

Thank you !! That worked perfectly!
I soo appreciate your time and help :slight_smile:

#8

We are delighted to assist you with this.

Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.