[Resolved] Variable products’ buy buttons and selectors not working

[Author]

Posts

[willD-2]

Hi,

I hope you can help. I'm trying to set up a gift card product, and no gift card plugin seemed to be working. I have investigated by using variable products, and it still doesn't work – so it would appear that my product template is only working for single products, and something is broken when it's any other type of product – the text from the post body rides up to cover the button, there's no selector, and if you click the button the page simply refreshes.

I'm in Safari on a Mac, and have looked in the console in developer mode, but there's nothing there.

I hope you can help!

All best,

Will

[Jamal]

Hello and thank you for contacting the Toolset support.

I wonder if you checked this issue on a minimal setup to exclude any possible conflicts with other plugins? If no, please check if this issue appears when:
- Only Toolset plugins are activated(and any plugin required). It will tell us if there is an interaction issue with another plugin.
- The theme is set to a WordPress default like Twenty Fourteen. It will tell us if there is an interaction issue with your theme.
If the problem disappears, start activating one at the time to track where the incompatibility is produced.

If this issue is still present, let me login to your admin area and check it closely. But I'll need more details, URLs, screenshots to understand the issue better. I am sure you will understand, that I can't guess how your website is built without some guidance. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[Jamal]

Hello Will and thank you for the access.

From what I gathered so far, you are using a Toolset Layout to display the products. The section, containing the title, the add to cart button, and the body, is built with a visual Cell. The code of the visual cell is not a valid code. It does not respect hierarchy. Some tags or shortcodes are closed before their children are closed. Check this example:

<p>[wpv-conditional if="( $(wpcf-translator-of-book) eq '' )" evaluate="false"]</p>
	<p class="element-author-block">[types field='translator-of-book'][/types]</p>
<p>[/wpv-conditional]</p>

The first <p> tag is closed before its child [wpv-conditional] shortcode is closed. The code should be:

[wpv-conditional if="( $(wpcf-translator-of-book) eq '' )" evaluate="false"]
	<p class="element-author-block">[types field='translator-of-book'][/types]</p>
[/wpv-conditional]

Or:

<p>[wpv-conditional if="( $(wpcf-translator-of-book) eq '' )" evaluate="false"]
	<p class="element-author-block">[types field='translator-of-book'][/types]</p>
[/wpv-conditional]</p>

But this is not a valide HTML code, <p> tag can't be inside another <p> tag.

When an invalid HTML is generated, the browser does its best to correct it(make it valid), which will most probably break the design of the page.

For example, note this screenshot, the correct product has an empty <p> tag that makes sure to keep the body after the button. I am not saying this is the correct way to do, but this can demonstrate how invalid HTML can be handled by the browser: hidden link

Regarding the add-to-cart button, I believe that's probably a logic issue in the conditional button and the product custom fields. But it is hard to analyze inside invalid code.

I suggest:
1. Create a new unassigned Layout.
2. Copy the code from the current layout to it and correct it to make it valid.
3. Test it with all types of products(simple, gift, variable).
4. Let me then check why the add-to-cart button is not working and expected.
5. Once it is correct, delete the current layout and assign the new one to all products

Sounds good? Let me know your feedback.

[willD-2]

Hi,

Many thanks for getting back to me. Yes, the annoying <p> tags were created automatically. I've swapped the visual editor for a content template and have cleaned it up, an the problem persists.

Thanks again for the help, and hope the problem is more obvious now you can see the wood for the trees!

All best wishes,

Will

[Jamal]

Thank you Will. The layout and content templates are much easier to read.

Currently an empty <p> tag is still generated for simple products and not generated for the variable product for example. I still don't see why, and why the Add to Cart button is empty. To debug this further, I need to take a copy of your website and investigate it locally.
https://toolset.com/faq/provide-supporters-copy-site/

Would you please create a Duplicator copy of your website? Please use filter to reduce the size of the copy as described in this video around 1:00 hidden link
If Duplicator fails to create a copy, we'll need a database copy/export, plugins, and theme folders, all in a zip file.

Your next reply will be private to let you share the download link safely.

[willD-2]

Hi Jamal,

Many thanks for the swift reply. All very strange!

That's all done, so I look forward to hearing how you get on! You can download the files from here: hidden link.

All best, and thanks again for your help,

Will

[Jamal]

From what I was able to get so far, there are two errors that are causing these issues.

There is something with the theme that prevented the button from having a text. When switching to a default theme, the button has the default text "Select options". Check the following screenshots:
- Button text with Storefront theme: hidden link
- Button text with TwentyTwenty theme: hidden link

The second error is that the add-to-cart button was not correctly used for variable products. As you can see in the documentation of the [wpv-woo-buy-or-select] shortcode, if we don't use "external_add_to_cart_text" or "show_variation_options", there will be only a "Select Options" button that redirects to the product page to choose the options of the variable product. When used inside a single product page, we must add one of the attributes. Check this screenshot after adding the attribute "show_variation_options" to the shortcodes in the content template hidden link
Part of the code for the button inside the content template became:

[wpv-conditional if="( $(wpcf-forthcoming) eq '0' )" evaluate="false"][wpv-woo-buy-or-select add_to_cart_text="PRE-ORDER" show_variation_options="yes"][/wpv-conditional]

[wpv-conditional if="( $(wpcf-reprinting) eq '' )" evaluate="false"][wpv-woo-buy-or-select add_to_cart_text="PRE-ORDER REPRINT" show_variation_options="yes"][/wpv-conditional]

[wpv-conditional if="( $(wpcf-reprinting) eq '' ) AND ( $(wpcf-forthcoming) eq '0' )"][wpv-woo-buy-or-select add_to_cart_text="BUY NOW" show_variation_options="yes"][/wpv-conditional]

Check the shortcode documentation here https://toolset.com/documentation/user-guides/views/views-shortcodes/#vf-154336

I hope this helps. Let me know your feedback.

[willD-2]

Thanks for that – it's got the variable product working, so I'll just have to be content with using that and then issuing gift card numbers manually.

All best, and thanks for your patience,

Will