'Buy Now' button adds to cart

Support
#1

Hello, I’d like the ‘Buy Now’ button in my price chart to add the product to my cart. How can I achieve that?

1 Like
#2

Hi there,

Instead of using the button shortcode, you can use the [add_to_cart] shortcode for Woocomerce then you can add the button class like this:

[add_to_cart id="2168" class="x-btn" style="false"]

Please change 2168 to the product ID. You can find the product ID here

Hope this helps…

#3

I’m working with braintree to get some information to make the link. I need to keep this thread open for the moment. You guys are awesome. I’ll have a question to finalize shortly.

#4

Sure, you can ask here once you have it.

Cheers!

#5

Okay, so it is working. I’d like the button to be a plain buy now button. Right now the button looks like the one on the left. I would like it to look like the one on the right.

#6

Hi Steve,

Would you mind providing the link to the page where the buy now buttons are so that we can check?

Thank you.

#7

Hi There,

Thank you for the credentials, since WooCommerce already have the class .button on their shortcode, please remove the class="x-btn"

Hope it helps,
Cheers!

#8

Perfect. It works.

Right now when I click ‘add to cart’ it takes me to the ‘my cart’ page. I have an ‘Off Cart Canvas’ linked with the cart button in my header. Can we make it so that when they click the ‘Add to Cart’ button it causes the ‘Off Cart Canvas’ to slide out from the side to display that they’ve added it to their cart instead of going to the ‘my cart’ page?

#9

Hi there,

I am sure that you will understand this is getting to the realm of customization and outside of our support scope. We will do our best to show you how to do the latest request but unfortunately, we will not be able to implement or maintain the code for you.

Please kindly add the Javascript code below to Pro > Launch > Theme Options > JS:

jQuery('.product_type_braintree-subscription.add_to_cart_button').click(function() {
jQuery('.hm5.x-anchor.x-anchor-toggle').trigger('click');
return false;
});

The code above actually searches for the cases of the Add to Cart button and disables the default behavior of the button. Then it triggers the click event of the header button. So it is like you already clicked on the header button when you click the Add to Cart button.

For additional questions please kindly open up a separate thread so that we can focus on each request better.

Thank you.

1 Like
#10

Hey, thank you. I would still like the button to add the selected service to the cart. The code you provided above opens the off canvas just like I want but it does not add the selected service to the cart. Can that be done? Thank you for going above and beyond. I have learned a bit of js but i have a hard time with it. You guys are helping me learn so much. Thank you again times a million.

#11

Hey @steve,

That can be achieved by enhancing the code previously provided. Further customization from here would be getting into custom development which is outside the scope of our support though. For that, you need to hire a third party developer to further add functions to the code.

Thank you for understanding.

#12

Hello, On the image I provided we solved it so there is only one button however the ‘$0.00 every month’ still appears. How can I remove that? Is that another custom job? Thanks

#13

Hi there,

We can hide that through custom CSS:

.x-pricing-column-info span.woocommerce-Price-amount.amount,
.x-pricing-column-info .subscription-Details {
    display: none;
}

Hope this helps.

#14

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