AMP Menu in Storefront Theme with Woocomerce

Hello @yperfre

Thanks for the support topic for navigation on mobile please download the following plugin as a zip file and install it.

Plugin: https://github.com/milindmore22/amp-generic-compat

Once the plugin is installed, active it and follow the next steps

1. Goto AMP -> AMP Compatibility
2. click Enable checkbox
3. Add the details in input boxes in one row the final result will be someing like this screenshot
4. Add nav below Element
5. Add main-navigation below Element Class
6. Add toggled below Element Toggle Class
7. Add button below Action Element
8. Add menu-toggle below Action Element class
9. Add active below Action Element Toggle Class
10. Once all inputs are in place click save

WooCommerce is not yet fully compatible, but it can be configured to work at a basic level.

1) I will suggest disabling AMP on cart and checkout pages

2) Update cart behavior settings to redirect on adding a product in cart and disabling Ajax add to cart check on from Archive.

Additionally, I will suggest using the AMP Enhancer plugin, it can help you in addressing some Incompatibilities in WoCommerce.

Let me know if this helps

Hello Milind
Im still doing tests but I have followed all your steps and looks great ?? thank you very much
I have also downloaded the AMP enhancer: awesome, nothing else than install ??

Have another question for styling:
I assume that I will have to add my custom styles for the AMP version? Any idea on that?

Thank you very much ??

Hello @yperfre

Glad to hear the mini plugin and suggestions are helpful.

If you’re looking to apply CSS rules only to your AMP URLs (AMP Specific) when using transitional mode you can use the [amp] selector.

eg:

html[amp] body {
   background-color : black;
}

I will suggest adding the CSS rules in customizer options gotoDashbord -> Appearance -> Customizer-> Addtional CSS

Make sure you check restrictions before adding the CSS, also check our guide on adding CSS in AMP.

Thanks a lot ??
I still can′t make the AMP styles appear…May be the “megasuperAMPcache” not making changes visible?
Anyway…
Could you please clarify, if I had this custom style:
.single_add_to_cart_button {width:53%; border-radius:4px}
how would I make it AMP?
Have tried with no sucess ??
html[amp] .single_add_to_cart_button {width:53%; border-radius:4px}
[amp] .single_add_to_cart_button {width:53%; border-radius:4px}
.single_add_to_cart_button [amp] {width:53%; border-radius:4px}

Thank you in advance for the help ??

Your custom style

.single_add_to_cart_button {width:53%; border-radius:4px}

will become

html[amp] .single_add_to_cart_button {width:53%; border-radius:4px}

Add above CSS in Dashboard->Appearnce->Customize->Addtional CSS.

Once added clear your site’s cache also clear the browser cache or open the page in incognito mode.

Thanks a lot, Im getting there… I have done that knowing that is right and it will eventually show the new updated style ??
I have seen that AMP is compatible with external fonts, as its my case. I use Open Sans and Caveat. Do I need to add anything else?
Will this:
h3 {font-family: Caveat; font-size:30px; margin-top:30px; margin-bottom:14px}
Show a Caveat font just by making it:
html[amp] h3 {font-family: Caveat; font-size:30px; margin-top:30px; margin-bottom:14px}
Thanks you once again for the support ??

If you are using same font on your AMP and non-AMP page you don’t need to specific style for it.

Example1: if you want Caveat font on both you AMP and non-AMP pages.
no need to add html[amp] specification.

Example2: You want Caveat on normal website (non-AMP page) and you want Open Sans font on AMP page.

 h3 {font-family: Caveat; font-size:30px; margin-top:30px; margin-bottom:14px}
  html[amp] h3 {font-family: Open Sans; font-size:30px; margin-top:30px; margin-bottom:14px}

Remember to use HTML[amp] only for AMP-specific changes and not required for every page.

Additionally. check the guide to know how you can use fonts on AMP pages.

Thanks a lot ??
I have those fonts in normal site and would like them on AMP so I shouldnt need to do anything.
I had a friend looking at my site and is still wathing the same like me: basically sutom CSS not being loaded. Do you have any clue what could be happening?
You can see it yourself in eldietista.online

Can you please share a screenshot of how you are adding the CSS?

Also please share the CSS snippet that you are trying to add so I know which element has changes.

As you can see in this link, AMP has no custom styles at all…It seems like im doing something wrong…
https://snipboard.io/Llpyd5.jpg
The custom AMP CSS Im using is all this:( I have just removed the Stone and Caveat fonts links, since you say AMP will get them from normal version).
/*Hide page title*/
html[amp] .home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header {margin-bottom:0px}
html[amp].entry-header {display:none}
/*Breadcrumb margin bottom fix*/
html[amp] .storefront-breadcrumb {
margin: 0 0 0 1em;}

/*PRODUCTS*/
html[amp] .woocommerce-loop-product__title h2 {font-size:22px}
/*Títulos productos*/
html[amp] .woocommerce-tabs.wc-tabs-wrapper h3 {font-family: Caveat; font-size:30px; margin-top:30px; margin-bottom:14px}
html[amp] .woocommerce-tabs.wc-tabs-wrapper h4 {font-family: Caveat; font-size:30px; margin-top:30px; margin-bottom:14px}
/*H2 descripcion*/
html[amp] h2,h3 {font-family: Caveat}
/*En categorías*/
html[amp] ul.products li.product .woocommerce-loop-product__title {font-size:28px}
/*No related products*/
html[amp] .up-sells.upsells.products h2 {font-size:36px}
html[amp] .related.products h2 {font-size:36px}
html[amp] .single-product div.product form.cart {margin-bottom:0}
html[amp] .wpm_gtin_code_wrapper{display:none}

html[amp] .storefront-full-width-content .woocommerce-products-header {padding:0}

html[amp] p+h3 {margin-top:0px}

/*BOTON ADD TO CART*/
html[amp] .single_add_to_cart_button {width:53%; border-radius:4px}

/*Paypal checkout*/
html[amp] .wcppec-checkout-buttons.woo_pp_cart_buttons_div {margin:-1em 0; text-align:left}

/*Pág dietas online*/
html[amp] h2.av-special-heading-tag {font-size:36px}
html[amp] .elementor-widget-container h3 {font-size:32px;}

/*H3 espacio entre lineas*/
html[amp] .elementor-widget-container h3 {line-height: none}
html[amp] .textwidget.custom-html-widget h3 {font-size: 22px}

/*FOOTER*/
/*No underline in footer links*/
html[amp] .footer-widgets a {text-decoration:none}
/*Footer widget title*/
html[amp] .gamma.widget-title {font-family: Caveat; padding-bottom:0;margin-bottom:10px}
/*Aviso legal footer*/
html[amp] .privacy-policy-link[amp]{display:none}
html[amp] .site-info {font-size:14px; padding:0}

/*PAGS CATEGORIAS*/
html[amp] .woocommerce-products-header__title.page-title {display:none}

/*CART*/
html[amp] .about_paypal{display:none}

/*Fixes funny body blinks*/
html[amp] #content {display: block}

/*BLOG entries: no cat no tag*/
html[amp] .cat-links, .tags-links{display:none}

/*Fixes bold text buttons*/
html[amp] .button{font-weight:normal}

/*Texto promocion en prods*/
html[amp] .onsale{color:red; border-color:red}

/*No breadcrumbs in pages*/
html[amp] .woocommerce-breadcrumb{display:none}

/*Socket en smaller size*/
html[amp] .site-info{font-size:small}

/*hover efect produc*/
html[amp] .eael-static-product-thumb-overlay:hover {background:#ffffff3d}

/*hides subscription in client menu*/
html[amp] .woocommerce-MyAccount-navigation-link–subscriptions {display:none}

/*eimina margen del boton compra con descripcion en productos */
html[amp] .first-payment-date{display:none}

/*text padding in products*/
html[amp] .single-product div.product form.cart {padding: 0;}

/*alinea variaciones*/
html[amp] .single-product div.product table.variations td, .single-product div.product table.variations th {
display: inline-block;
padding-right:10px;
}
html[amp] .single-product div.product table.variations select {
max-width: 100%;
}

/*Home icon in Mobile menu*/
html[amp] .storefront-handheld-footer-bar ul li.home > a:before {
content: “\f015”;
}`

Hello @yperfre

Yes, That is correct your CSS is not getting added on AMP pages, can you please let me know where/how you are adding the CSS

Here is a step-by-step demo of adding CSS using the Customizer option.

• Step 1 : Goto Appearance
• Step 2 : Click Customize in submenu section (Screenshot 1)
• Step 3 : Look for Addtional CSS and click on it. (Screenshot 2)
• Step 4: Add your CSS in textarea provided, for now, add example CSS below which turn body background yellow on AMP page once added click publish (screenshot 3)

html[amp] body {
	background-color:yellow;
}

Visit AMP page https://eldietista.online/?amp to see changes
The final output will look like this screenshot

Im adding it just above the other CSS customizations…In the custom CSS tab on the theme…just like normal an like you explain… ??
I did that yellow change and it did actually change. Removed it and I can see now the custom changes…Weird isn′t it? Now I visit another product but has no custom CSS and has again default CSS ??
I don′t know… I have copied/pasted the full CSS customization, normal and AMP as it is on the tab and it even passes w3c validation https://jigsaw.w3.org/css-validator/validator…
It is like if sometimes it didnt load the custom file or just ignores it for some reason or …I dont′t know…
Some pages are shown with the custom CSS and another not. Products wont load the custom CSS…:(

Hello Milind
I have been trying things.
Checking with other mobile or using that “Google search browser”.
Somehing messes up the CSS because I have seen once custom CSS on AMP. But for some reason, not all, only like some loaded.

Anyway…just in case you have an idea….
The server uses pagespeed.
And my site uses WP fastest cache.
I also have PWA enabled. The home screen sometimes also shows up, sometimes it doesnt, sometimes it does in custom CSS and sometimes it loads the default ??

I have not a clue how could I debug this ??

Thank you very much

Hello @yperfre

The AMP pages allow only 75KB CSS on a page.

The AMP plugin uses the CSS Tree shaking method that loads CSS based on elements on the page, amb bind classes, dynamic elements loaded with AMP etc.

You can learn more about CSS Tree Shaking in our guide

eg:
1) Page A has a button element
button styling is not needed so CSS tree-shaking will remove button styling for Page A
2) Page B does not have a button element
Button element exists so loads button styling for Page B

Thank you Milind, I can′t understand AMP.
I don′t have a clue if AMP works like if there are too many info in my custom CSS sheet and just decides to ignore the rest.
Obviously if I knew…I wouldn′t be asking ??
I don′t know if the plugin plsits CSS to avoid make them too big.
I don′t know too much actually about AMP.
I have Fastets Cache plugin combining CSS. Since that makes less but bigger CSS…could that be the reason why AMP styles are ignored?
Could it be also Google PageSpeed module in the server?
Have′nt you had this problem before? Does thhis plugin work fine with Google Pagespeed or with othercache/CSS and JS combining plugins?
Thanks you in advance