Trouble with Variable Product "Add to Cart"

Hi there!

I’m new to the world of Pinegrow and I’m trying really hard to create a WooCommerce theme.

I’ve watched the tutorial at least a dozen of times now, but it seems every time I fix one error, another appears.

Here’s the current issue:

When I select my variations, and click the “Add to Cart” button, WooCommerce generates the following error:

Cookie Count and Chocolate Level are required fields

This issue persists even though I’m clearly selecting the variations. Any ideas as to what might be causing this problem?

Any help would be very much appreciated!

@iamrobbie WC Add to cart for variants is very sensitive to the correct HTML structure of the section. Elements must be wrapped and arranged correctly. Otherwise the WC JS code doesn’t work.

PG Add To Cart action gives some guidance but it is easy to make a mistake.

Please double-check the structure, and in case it doesn’t help, paste the HTML code for the Add To Cart section from PG here, or send the project to support@pinegrow.com.

@matjaz - Thanks for the reply!

Luckily, I was able to figure it out… after several days of struggling.

Now, my next challenge is figuring out why some of my CSS properties are being overwritten when I add WP actions (e.g., the color of my Product Search button)

I would LOVE to see more tutorials from you. A full build from start to finish would be great!

1 Like

@iamrobbie

First of all, here is a useful tip that doesn’t only concern the use of WooCommerce but all WordPress smart actions.

To troubleshoot your creations, never hesitate to analyze the code produced by Pinegrow in your template (you can do it from Pinegrow, or directly by analyzing the exported PHP template file from your theme folder)

Then, never hesitate to use the inspector of your browser to see if your CSS is well loaded.

If the CSS reference is not visible on your element (or if your element does not have exactly the structure you gave it in Pinegrow), chances are that the smart action has overwritten the content of your element by obliterating all the CSS properties you had set in Pinegrow.

Because in fact, depending on the type of action, the export/result will replace the element OR will replace the content or will be positioned before or after the targeted element (if you use the standard actions, you can define this choice)

In some cases, it will be necessary to create specific CSS rules to target what is inside your containers.

That’s it. Do not hesitate to tell me if I have not been clear enough in my explanation. :wink:

2 Likes

Thanks, @Emmanuel. I still have a lot to learn…