Prevent page from refreshing when adding product

[dwbone]

I am wondering if there is some trick to add an item to the cart without the page having to refresh?

I have the cart short code on the same page asa list of multiple products codes that have variations. The products’ options are hidden until the product name is clicked.

A customer may want more than one variation of a product and when the add the first variation, the page refreshes and the page resets and the customer has to sift through product list again to reopen the hidden product details and then select the next variation…etc..

ideas?

Thanks again.

[wzp]

That is the “normal” behavior, unless you use the Ajax, Add to Cart button.

You can enable the ajax option from the Advanced Settings menu of the plugin. Try it out.

WP eStore – Page reload on Add to Cart

https://support.tipsandtricks-hq.com/forums/topic/estore-add-to-cart-form-submission-using-jquery-ajax

[dwbone]

Thanks wzp, works perfectly, I do now see a check.png, that indicates the item was added to the cart, but the check mark is pushed down well below the product options, rather than say… appearing inline, next to the “add to cart” button.

I am wondering how to eliminate this check mark or change its location.

also I think related and unanswered here:

https://support.tipsandtricks-hq.com/forums/topic/estore-page-not-jumping-to-wp_cart_anchor-upon-add-to-cart-submission

I would like, instead of the check mark indicating item was added,

I’d like when adding to cart, for the customer to be jumped to the cart.

but it is not working. It does not jump to the cart, which in our case is located at the top of the page, so one has to scroll up to view cart.

[wpCommerce]

@dwbone, please provide a link to the page in question so I can take a look.

[dwbone]

[http:mcm4g.com/testing-table/]

select one of the song titles from low on the page and … add to cart.

it will add to cart but not JUMP to cart,

and

it will add the green check.png below the ADD to CART “button”, which happens to also land outside my hidden DIV, but that is because of the DIV’s parameters.

I would rather it jump to the cart and not have the check appear at all (but at least show it inline).

thnaks

[admin]

Hi, Looks like you have customized the output on that page. Did you use a developer or customized it yourself?

You have a CSS class called “player” and you have specified a fixed height for that. So when the item added checkmark is shown below the cart, it goes outside of that player class’s div. Alternatively, you could hide that checkmark showing option.

Did you modify the core plugin’s code for the customization or you added your customization in a separate file or plugin?

[dwbone]

I developed it all myself, and did not customize the core.

It is all with short codes nested inside <div>s which are simply inserted in to page in standard content area; and a lot of CSS via T&T’s wp custom css plugin. This is similar to a technique as posted here:

I could increase the height of the containing div’s but that doesn’t actually do what i want.

Which is/are

1a) either eliminate the check.png (so point me in the right direction for that)

or

1b) have the check.png actually land inline with the “add to cart” button.

and

2) I would like the customer to jump to the in page cart, when they add a product.

[admin]

1) Grab this custom css tweaks plugin:

https://www.tipsandtricks-hq.com/wordpress-custom-css-plugin-6413

Then use the following CSS in there to hide that checkmark icon:

.eStore_item_added_msg{

display: none;

}

2) I have sent you an email also. When you reply to the email mention this so I can look at your settings and apply the necessary changes.

[dwbone]

thanks for the CSS, it worked.

… what “necessary changes” are you thinking? is it regarding the add-to-cart button not jumping to the cart?

unfortunately you guys have an email address I recently stopped using, your system will not let me update. Why not? I’d rather not have to start a new ID.

Thanks for help.

let me know about that Jump-to-cart solution.

[admin]

I was going to turn off the ajax option and enable the cart anchor option. That should give you the effect you are after. I have just sent an email to your address [david@kenaiproductions.com]. did you receive it? If not then what is the best email address to contact you?

[dwbone]

Ah… I actually want the ajax activated because I also do not want the page to refresh when customer adds an item to the cart.

so it appears it works one way or the other as the Jump To option refreshes the page.

I’ll keep the ajax and live with the not jumping.

to be clear,

my ideal scenario is

when adding to cart, the page does not refresh AND page jumps to cart anchor.

But I can see where those are conflicting actions.

Thanks for your help and any further suggestions.

FYI, I prefer to make changes to the functionality my self, so feel free to point me in the right direction whenever possible… I learn from the process, but appreciate that you guys are so hands-on regarding your customer support.

[admin]

I see what you mean. No, you won’t be able to make the page jump to a page while using the ajax option.

[Author]

Posts