Custom Woocommerce Product Pages

[gunesinan]

Hi,

I need some advice about custom product pages. Let me explain my problem from very beginning:

Woocommerce product pages cannot be styled with Pro, we know that. I tried styling it with Elementor but that made the things more complicated and I figured out that Elementor has its own limitations, therefore I decided designing custom product pages using Pro.

Custom product page design, however, came with its own problems. First, I couldn’t find a way to add AJAX functionality to the Add to Cart button. I actually do not want to insert a redirect link to Add to Cart button. I want the customer add multiple products to the cart before going to the Checkout page, and I want to bypass the Cart page.

I found a plugin that add AJAX functionality to Add to Cart buttons - by Quadlayers - however it doesn’t work with Custom Add to Cart buttons. It only works with default Woocommerce product pages and buttons.

I am also using Modal Cart Element of Pro however, it doesn’t have the AJAX functionality. When a product is added to cart, it doesn’t pop up and notify the customer. If this could be done somehow, I am going to bypass the Cart page, but if not, I have have to design a cart part page, which will most likely come with extra complications.

I know I am not the first one designing custom Woocommerce product pages, and I might be missing a very easy solution. Any case studies or guidance would be highly appreciated.

Thank you

[gunesinan]

Some options that come into my mind are:

(1) We can insert a redirect link to the same product page. In this case, when add to cart button is pressed, the page will refresh, however, after or before the refresh, Cart Element should animate out, and I do not know if this is possible.

(2) Woccommerce product archive page has AJAX functionality but I do not know if we can style it with Pro, or use it like a global block.

Hope this helps you guys understand my problem better.

[lely]

Hi Gunes,

Thank you for detailed explanation.

Since this is a customization, we can give suggestions but the actual customizations and any resulting issues is outside the scope of our support

I did some search and found this guide on how to add ajax functionality on product page. Note that I did not test the suggested code.

Then to manage how it looks, I think it would be best to understand how to customize the templates. This way you can avoid much of the compatibility issues. If you know how to manipulate/edit the actual template, you can adjust it to the way you want.

[gunesinan]

Well, I understand there is no way out without custom coding and I am the only one that spend his time designing a custom product page.

[ruenel]

Hello Gunes,

That would be the case because there isn’t a setting in the theme that you can easily add the AJAX. You will have to do it with customization. By the way, custom development is way beyond the scope of our support.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Best Regards.