#190 – Unable to add product to cart.

 Hello,

I created a product with two variations (color and size) and it is working fine on regular pages but on AMP pages it is showing the message (Sorry, this product is unavailable. Please choose a different combination). It is showing in stock and how many in green.

I did some testing, If you install this plugin WooCommerce Force Default Variant it is for applying a default variation, you will be able to add to cart.

Please help.

Hi,

This is expected of no default variation is selected and it happens the same with WooCommerce in my experience.
If a default variation is selected (manually or through a plug-in such as the one you mention), then weeblrAMP should pick it up.

Best regard

Hello,

There are two problems when adding an item to the cart:

First, there's a default message that the "product is unavailable", even when there are thousands of that product in stock. That message shouldn't be there on the product page.

Second, I cannot add any item to the shopping cart even though it's in stock. I'd love to have it clone the WooCommerce behavior. Please click on the link to see what I'm talking about.


Woo commerce behavior when visiting a product page with variations that haven't been selected:

1. The add to cart button is disabled (and there is no message saying "Sorry, this product is unavailable. Please choose a different combination"... It's a very confusing message to customers and that's why woo commerce didn't use it until customers have interacted with the form. If you can't disable the button, you shouldn't print the message. You only print the message when you interact with the form.)
2. If you click on add to cart, it gives you the message "please select a variation"
3. If you select a variation that's not available, it will tell you "this product is not available"
4. If you select a variation that IS available, it will enable the "add to cart" button

Please advise.

Hi

I see what you mean now:

1 - Message: this is a standard WooCommerce message. Current theme suppresses it. I'll try have a look and change it, issue is that if we have our own message, we also must handle the translations which is why we tend to use WC standard messages so that translations are already available. I agree it's confusing though.

2 - This is exactly how it's supposed to work. You're being hit by a limitation of AMP:



The "amp" language that we're allowed to use puts strong limits to how complicated expressions are. With our current implementation, you are exceeding these limits with the number of allowed variations you are using. See demo on this page for normal operation with a lower number of variations.
We do have a long term plan to rewrite this with more recent evolutions of AMP (amp-script tags most likely ) which should allow more flexibility but there's definitely not ETA on that unfortunately.

Best regards

Hello,

Thank you for your help. If there is a limitations on AMP so we should have some code to force a default variant. I will leave the plugin force-default-variant-for-woocommerce to force a default variation on all products.
But I did want force-default-variant-for-woocommerce active in woo commerce default pages. So I wanted to activate this plugin only on weeblramp by adding it to functions.php. The problem here I can't get functions.php to work in /wp-content/themes/{active_theme_or_child_theme}/weeblramp/functions.php.


I am using now /wp-content/themes/{active_theme_or_child_theme}/functions.php and have my active theme unchecked under theme managment.
In order to override weeblramp templates, you must have "Disable theme on AMP pages" under Theme management unchecked. I tested it on fresh install. I have twenty twenty installed and I have some custom files inside it. wp-content/themes/twentytwenty/weeblramp/layouts/weeblramp/frontend/amp/header.php. Something is not right with override tempaltes process. You can test it by uploading a theme with some files in it.

BTW: I found out the wiggles part in the theme. You have in weeblramp_fe.form.min.css form[method=post] label { width: 100%}. I guess iphone does not like width 100%. I changed it to max-width: 100%. It solved the problem.
FYI: when I debug and push live I always change the background color of the page to make sure I am getting the correct push.

Hi

If there is a limitations on AMP so we should have some code to force a default variant

The limitation is not related to having a default variant. Having a default variant will simply suppress the initial (confusing) message.

The limitation is the one I highlighted in my screenshot: AMP limits the complexity of the expressions used to perform actions such as enabling Add to cart button. There are too many conditions used to decide whether the Add to cart button should be enabled or not and AMP chokes on that.

I am using now /wp-content/themes/{active_theme_or_child_theme}/functions.php and have my active theme unchecked under theme managment.

In order to override weeblramp templates, you must have "Disable theme on AMP pages" under Theme management unchecked. I tested it on fresh install. I have twenty twenty installed and I have some custom files inside it. wp-content/themes/twentytwenty/weeblramp/layouts/weeblramp/frontend/amp/header.php. Something is not right with override tempaltes process. You can test it by uploading a theme with some files in it.

100% works for me, fresh install of WP and weeblrAMP. You must be using the development version (from https://www.weeblrpress.com/downloads/development-versions) but even the released version works out of the box if you do not change the default theme (ie TwentyTwenty on current WP 5.3.2).

BTW: I found out the wiggles part in the theme. You have in weeblramp_fe.form.min.css form[method=post] label { width: 100%}. I guess iphone does not like width 100%. I changed it to max-width: 100%. It solved the problem.

Safari is the new Internet Explorer indeed. Made a note of this, thanks for digging.

Best regards

Hello,
I am using the dev version. You have on this page https://www.weeblrpress.com/documentation/products.weeblramp/1/going-further/advanced-customization/template-overrides.html
weeblrAMP will automatically pick-up layouts files you place in your theme or child theme, in the appropriate folder. . This is only true if you did not disable your default theme.
To test it pleas follow these steps.
Use any theme and inside this theme create custom .../wp-content/themes/Your-Uploaded-Theme/weeblramp/layouts/weeblramp/frontend/amp/footer.php has different text.
Under Theme Management check Disable theme on AMP pages
If you visit a product page, you will not find your custom footer.php active.

If you disable your default theme you must inform weeblrAMP there are some override files are available. How would do you use this filter weeblramp_template_dir?
Thank you for your help.

Hello,
I can't override any of the templates after I disable the theme. The only template I have working is layouts/weeblramp/frontend/amp/contents/wc_single_reviews.php because I have in functions.php.

I have functions.php for weeplrAMP in .../wp-content/themes/twentytwenty/weeblramp/functions.php and this is everything I have in this file.

add_filter('weeblramp_wc_review_date_time_html', function ($datetimeHtml, $comment) {
  // $datetimeHtml = str_replace('at', 'at about', $datetimeHtml);
  // only output the date
  $datetimeHtml = get_comment_date('', $comment);
  return $datetimeHtml;
  }, 10, 2);
add_filter('weeblramp_wc_review_author_html', function ($authorHtml, $comment) {
  $authorHtml = str_replace('says:', '', $authorHtml);
  return $authorHtml;
  }, 10, 2);
// filter reviews template
add_filter(
  'comments_template',
  function($template) {
    if ( is_woocommerce() && Weeblramp_Api::isAmpRequest() ) {
      $template = __DIR__ . '/layouts/weeblramp/frontend/amp/contents/wc_single_reviews.php';
    }
    return $template;
  },
  100
);

I have two different environment to test on. Both are getting the same results. If you disable the theme you can't override the templates.
I think what we are missing here is to inform weeblrAMP to look for some inside a specific directory. Something is telling weeblrAMP to stop looking for files after you disable the default theme.

Hi

I can't override any of the templates after I disable the theme.

I finally can reproduce that. Initially, after installation, Theme is disabled in weeblrAMP settings but you still can override normally, which is what I tested . However the issue appears after you toggled that setting, save and disable back the theme. That's when the overrides are not read again.

Now that I can reproduce, I can fix it. Not sure about ETA, have to dig a bit more.

Note that my reply above - about AMP limitations on number of items in conditions - has not changed. That needs a full rewriting and some research with latest AMP features such as AMP script and will take some time.

Best regards

Hi again,

So as usual things are not that simple: this was happening because when the theme is set to be disabled, we use several techniques to be sure that all of WP and other plugins do not use anything in the theme, including any template override. The bug was that we went as far as also disabling our own AMP overrides!

This should be fixed in the current dev version which you can download from the development versions download area.

Let me know.

Best regards

Hello,
Thank you for the quick fix. The override is working good. However, the reviews are not showing. We had this issue and you fixed it only if you did not disable the theme, but if you disable the theme the reviews will not show. I thought something is wrong with my theme so I tested with storefront theme and I got the same results.

https://notforjerks.com/shop/my-first-testing-product/amp it has store front and not showing the reviews.
Thank you for your help.

Hi

I thought something is wrong with my theme so I tested with storefront theme and I got the same results.

yet the reviews start to show when you switch to TwentyTwenty. Or when you use

- storefront
- shopstore
- "Store commerce"

So as long as the theme is not disabled, they show. Which means that the displays relies on something a proper e-commerce theme does to the WooCommerce review data.
Need to look into it in more details.

Best regards

Hi

OK, I figured it out: since WC 3.3, they added a check about whether the current theme supports WooCommerce. If not, they remove the reviews from the WC data set.
However, when the theme is disabled on AMP pages, it cannot tells WC that it does support WooCommerce. weeblrAMP WC plugins now also claim WooCommerce compatibility and so reviews are not removed by WC from its data.

I installed latest versions on your site to finally validate, it seems to work ok.

Best regards

Hello,
Thank you very much for all your hard work. Everything looks great.

Note that my reply above - about AMP limitations on number of items in conditions - has not changed. That needs a full rewriting and some research with latest AMP features such as AMP script and will take some time.

I am using force default variation plugin so the page is working for now. Maybe in the future you can update with me when you finish it.
Thank you!