[gardenwzlParticipant]

Hi Themeco folks,

I’m trying to create a custom add-to-cart button for a landing page (vs. a product page). How do I do this?

Here’s what I’ve put together based on two previous threads:
https://community.theme.co/forums/topic/how-to-add-add-to-cart-button-under-any-product-in-any-page-using-cornerstone/
https://community.theme.co/forums/topic/single-product-add-to-cart-button-placement/

<p style="text-align: center;"><a class="button add_to_cart_button product_type_simple" href="/wp-admin/admin-ajax.php?add-to-cart=742" rel="nofollow" data-product_id="742" data-quantity="1">Click Here to Buy Now!</a></p>

There are 2 problems I need help solving:
1) How do I make this a full-width/block style button? I’d also like it to be yellow (I just need the coding; I can pick a hex value).
2) The current WooCommerce button (“CLICK HERE TO BUY NOW” in the screenshot) works, BUT after adding it to the cart, you’re redirected to the blank page in the second screenshot (16.24.08.png).

URL: http://theapproachcoach.com/
WordPress version: 4.6
X version: 4.6.1 (using a child theme)
Cornerstone version: 1.3.1

Thank you in advance!

[Rue NelModerator]

Hello There,

Thanks for writing in! To assist you better with this issue, would you mind providing us the url of your site with login credentials, so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[gardenwzlParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

Please add the class ajax_add_to_cart to the link you have added then add this CSS code in the customizer:

#post-585 #x-section-3 .x-text .add_to_cart_button {
    background-color: yellow;
}

Hope this helps.

[gardenwzlParticipant]

Hi, and thanks for the fast reply.

The code to change the color of the button worked, but:
1) How do I make it the full-width/block style?

And problem #2 still exists — the item is added to the cart, but the user is immediately redirected to the blank page in the screenshot. (I took the page live to see if that made a difference, and it doesn’t. You still get the screenshot as the result.)

Here’s the code I added, per your instructions above:
<p style="text-align: center;"><a class="button add_to_cart_button product_type_simple" class="ajax_add_to_cart" href="/wp-admin/admin-ajax.php?add-to-cart=742" rel="nofollow" data-product_id="742" data-quantity="1">Click Here to Buy Now!</a></p>

What next? Thank you.

[JadeModerator]

Hi there,

#1 Please update the code to:

#post-585 #x-section-3 .x-text .add_to_cart_button {
    background-color: yellow;
    width: 100%;
}

#2 There are two occurrence of the class attribute in the a tag you have added. Please use this instead:

<p style="text-align: center;"><a class="button add_to_cart_button product_type_simple ajax_add_to_cart" href="/wp-admin/admin-ajax.php?add-to-cart=742" rel="nofollow" data-product_id="742" data-quantity="1">Click Here to Buy Now!</a></p>

Hope this helps.

[gardenwzlParticipant]

This worked! Thank you.

[Prasant RaiModerator]

You are most welcome. 🙂

[nataliediverParticipant]

Is it possible to make code very similar to this, but using

<p style=”text-align: center;”><wc_quick_buy_link product=”87″ qty=”1″ type=”button”>Save Your Space!</p>

Instead?

As this is a quick buy rather than add to cart.

[RupokMember]

Hi @nataliediver

You can try but I don’t think it will work.

Thanks!

[Author]

Posts