AMP Menu in Storefront Theme with Woocomerce

What I observe is that some clasees and id in AMP are changed.

On AMP there is no #menu-primary-menu and must use something different: #masthead.
However, even if i set that amp style, I don′t get the page styled as it should.

On the other hand i have 2 pages that behave in different ways:
Sobre nosotros gets the AMP custom CSS. While Contacto, doesn′t.
The difference between them?
Sobre mi is a normal full width page. While Contacto is a full widt Elementor designed page.
Does that help you? ??

It doesn′t seem to work either on Woocommerce pages. All have the old CSS.
Even if I inspect on AMP pages the CSS code and IF it′s different and add the relevant rule, it is not applied.

Hello @yperfre

I am not sure why it’s not adding CSS on AMP pages, the test (yellow body) was a success, so I am not sure it may be related to site cache.

Maybe we have reached a point where you need professional help, feel free to contact a professional expert of your choice or check out AMP experts on our site.

• This reply was modified 3 years, 5 months ago by Milind More.

Im using Storefront theme “the” Woocomerce theme, its not like you wont find this issue again…if you havent already…
Well, thats why I contac you guys, you created this and know how it works.
Im trying to provide you as much information and clues to help you have ideas.
For example, i did put the yellow css test just at the very top of AMP Custom CSS. Could it be that for some reason the CSS file could be bigger than those whatevercant remember KB and so the Custom CSS stylesheet cutted and so the rest of custom AMP styles not loaded? I didnt design the plugin, even if I was the AMP master, I couldnt know could I? ??

Hello @yperfre

I think you misunderstood me, I suspect the issue could be with your site Cache the way it’s behaving inconsistently. that’s why I advised getting professional help as I can’t advise you regarding cache issues.

Regarding the CSS Tree seeking

the plugin prioritizes the order of styles eligible for removal:

– Parent theme (non-print) stylesheets
– Child theme (non-print) stylesheets
– Core stylesheets used by themes (for blocks)
– Plugin (non-print) stylesheets
– Stylesheets from wp-includes
– Additional CSS from Customizer
– Styles added by blocks and widgets
– Dashicons
– Print stylesheets
– Admin bar CSS

Additionally, when comparing AMP and non-AMP versions use the paired browsing mode (when logged in ) using the ?amp-paired-browsing=1 URL parameter so you can determine differences between AMP and non-AMP pages.

eg: https://www.eldietista.online/dietas/dieta-para-perder-peso-de-1-mes?amp-paired-browsing=1

Also please check AMP troubleshooting guide

But if it was a cache problem, i wouldnt be able to inmediatly see the yellow background change…and I did.
A cache problem could explain that custom CSS are not displayed in some minutes…not for this long.
Also, I can simply deactivate my cache in WP and in the server. I have no problem to do that to test. Want me to do so? ??
The thing is that it just doesn′t work and I don′t even know how the plugin works to get the CSS and make them AMP compatible or why is ignoring the AMP styles o even if its loading that sheet ??

Hello @yperfre

If the Yellow body test worked for you it means we are successful in adding Custom CSS on AMP pages.

Please re-check your custom CSS, or even apply them one by one and check if they are applied correctly, it will also good to test your CSS rules by removing HTML[amp] and verify they are applied on non-AMP pages.

eg: if you want add to cart button to be black on this page

Step 1 Add non-AMP CSS

button.single_add_to_cart_button.button.alt.user-valid.valid{
    background-color: #000;
}

Refresh the non-AMP version of the page

did you see black color?
Yes -> follow step 2
NO -> correct the CSS

Step 2

Update CSS to add AMP Specifications

html[amp] button.single_add_to_cart_button.button.alt.user-valid.valid{
    background-color: #000;
}

Now check AMP version of the Page

Continue adding CSS… one by one and checking.

You can learn about how the AMP plugin works in our guide.

I have disabled Pagespeed wich is know to cause issues on JS and CSS.

May be this helps ??
The normal web version displays all the custom CSS added by me. You can even see the AMP custom styles added, and the ayre inside
<style id=”wp-custom-css”>:
view-source:https://www.eldietista.online/

But when going to an AMP page (I have swapped to “?amp=1” version) there is no such a style at all. I can′t find it or any other custom styles.
Is the plugin loading the custom CSS styleshet? Because it doesnt look like it is.
What would be the name for the AMP custom stylesheet?

Thank you in advance,let′s see if I can find the problem ??

Anyway, replying to your previous comment:
I have Stone as default font, customized with CSS style. But ou say I shouldn′t need to add it also as custom AMP.
Well, the AMP site doesnt show Stone, as you can see. So… starting from there, its not wrorking ??
Thanks you

Hello @yperfre

Just want to check out if you are able to add CSS on AMP pages?

I created a plugin that might help you add CSS feel free to give it a try.
https://github.com/milindmore22/amp-generic-compat/

Thank you, I have updated it but still nothing ??
I am considering that may be a child theme was created in the past, messing the basic WP config and avoiding me to work in AMP compatible enviroment…
Would this make any sense?
If so…how could I know and get rid of whatever child theme customizations?

Hello @yperfre

If you are using adding CSS in customizer or the plugin I have provided it should work on child theme without issue.

Thank you Milind.
Thats good! However I can′t find where is the issue yet ??
I keep trying things…

@yperfre Checking in here. Per @milindmore22’s instructions, were you able to update your custom CSS?

No Im afraid.
It just doesnt work and I dont know why or what to do.
I was thinking about exporting content and create it again but…that would take me long and have no proof it will work so I don′t know.