Cheers Yigit,

The workaround I provided above to hide the buttons works for now. I have applied this to all of my WooCommerce sites so the picker works.

Workaround to enable Spinbox defaults:

Place this into Quick CSS to add the default Spinbox controls to the basket page only and hide the JS plus/minus buttons.

This is WooCommerce default setting for the quantity field. If you remove .product-quantity from the css below and change it to .quantity it applies to the product pages as well.

/* For Chrome and Safari  */
.product-quantity input[type="number"]::-webkit-outer-spin-button,
.product-quantity input[type="number"]::-webkit-inner-spin-button 
{
-webkit-appearance: button !important;
}
/* For Firefox  */
.product-quantity input[type="number"] {
-moz-appearance: button !important;
width: 75px !important;
}
.product-quantity  input[type="button"] {
display:none !important;
}
table div.quantity {
    width: 75px !important;
}

• This reply was modified 2 years ago by thinkjarvis.
• This reply was modified 2 years ago by thinkjarvis.

Thanks ddandreo/

The full problem below unless you have anything else to add.

1.Add item to basket
2.View basket
3.Change the shipping method

4.The plus and minus buttons stop working and you can only change the quantity by typing in a value.

I too have this same issue and can replicate it on the site in the private link.

You cannot change the basket quantities after changing the shipping method on the basket screen.

Please can you advise? I am running WP 6.1.1 and Enfold 5.2.1

@hmsvictory
In the media library changing the title and alt text is possible per image.

I use this plugin which includes a bulk updater based on file name.:
https://wordpress.org/plugins/auto-image-attributes-from-filename-with-bulk-updater/

If you upload the images named what you want the text to say then this plugin will automatically use this to create a title and alt tag. Best practice is to upload images with file names that reflect the content anyway. Just as a final bit of info for search engines to cross reference against.

The difference between title and alt tag

“alt” is for providing an image alt tag to describe the image to the search engine crawlers and the screen readers for better web accessibility.
“title” is for providing an explanation of the image alt tag and image URL within the “src” attribute.

Alt tags are used by search engines and for accessability. Titles are used to provide more detail than alt tags and also displayed to the user on hover.

If they are both the same it isnt an issue. I would keep the title tags for SEO purposes but also get into the habit of uploading images named to reflect what they contain.

Please dont ever delete this post.

What an excellent insight into self hosting fonts.

I have always gone down the route of individual fonts at 400 (regular) woff2 rather than variable to reduce the number of font files that need to be downloaded. The browser interpretation of font weights is normally adequate for most sites.

I also pre-load them manually to prevent the font swap jumping in.

Font Squirrel can further optimise Woff and Woff2 bringing the file size of each custom font down significantly. A Woff2 font created using cloud convert is often about 30 to 60% larger than using Font Squirrels Optimised versions. A site with 3 fonts for example would save about 100kb of data which is huge.

If you want an alternative to roboto, arial, helvetica, open sans etc. Try Google font Karla – Compressed it is only about 17kb as a Woff2. The lightest Google font available?

Hey @guenni007,

The best settings for Enfold and WP-Rocket
Note that you may have to add more exclusions to the JS settings depending on the Enfold features used.

Also note that this is set up for compatibility. You may find that you can defer or delay more JS and your site still loads properly.

In most setups I would merge and minify CSS and JS – then use critical css to load above the fold content. But because WP-Rocket provide a set of exclusions in their documentation specifically for Enfold it is probably better to just serve items minified only instead of merged so scrips can be excluded.

My advice would be play around with the CSS settings to see if you get a better result with CSS merged and minifed or just minified. Site design will play a part in how well this works.

Enfold > Performance
Turn off Enfold Script merge and minify
Enable only load used elements

WP-Rocket
(From the top down)

Cache
Enable caching for mobile devices

File Optimization
Minify CSS
Optimize CSS delivery (Load Asynchronously)

Minify JS
Exclude:
/wp-includes/js/jquery/jquery.min.js
/wp-includes/js/jquery/jquery-migrate.min.js

Load Javascript deferred
Exclude:
/wp-includes/js/jquery/jquery.min.js
/wp-includes/js/jquery/jquery-migrate.min.js
google-analytics.com/analytics.js
ga\( ‘
ga\(‘
/gtag/js
gtag\(
/gtm.js
/fbevents.js

Delay Javascript execution:
/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/jquery-migrate(.min)?.js
/dynamic_avia/avia-footer-scripts-(.*).js
var avia_is_mobile
/enfold/js/avia.js
/enfold/js/shortcodes.js
/enfold/config-templatebuilder/avia-shortcodes/
/enfold/js/avia-compat.js
layerslider
google-analytics.com/analytics.js
ga\( ‘
ga\(‘
/gtag/js
gtag\(
/gtm.js
/fbevents.js

Feel free to tweak depending on your theme setup. You may have to exclude some plugins from this. You can keep google analytics from loading until interaction if you want but this may through your metrics off slightly if you live in the US and do not need to ask users to opt-in to cookies (bounce rate).

Media
Enable lazyload for images
Enable for iframes and videos
Add missing image dimensions

Preload
Activate Preload

Heartbeat
Control heartbeat

All other aspects I normally deal with manually or using a different plugin including loading fonts locally.

@navindesigns
A lot to unpack here
I specialise in optimised Enfold sites.
Enfold with a handful of plugins is capable of scoring 90+ in web vitals without premium plugins or a CDN.
Using WP-Rocket and their delay execution of JS and defer JS feature will see most Enfold sites score 95+/100 if the rest is done correctly.

It looks like all of the options under Enfold > Performance are turned off.
JS is being loaded first
No minification
Imagery loads after all other scripts
Multiple tracking codes and third party resources loaded.

My recommendation would be to enable all Enfold performance features and re-test. Assuming your host offers server side caching you wont need a caching plugin.
The popup you have on pageload will also affect load times.

Otherwise I recommend WP-Rocket to users who are not familliar with speed optimisation because it does all of the work for you.
They also provide bespoke exclusions specifically for Enfold on their support pages.

If you use Google tag Manager to manage multiple tracking metrics then this can impact speed scores especially if they all fire ahead of pageload.

I hope this helps.

I currently have 50+ enfold sites scoring 90+ under lab conditions on mobile and 100 on desktops.
Some of the sites I design and host below if you wanted to run your own tests.
https://www.stanspals.co.uk/
https://www.forensic-testing.co.uk/
https://www.thehealthworkshop.co.uk/
The three above do not use WP-Rocket but I am expecting to add this on a developer license very soon.

I must add – Always run a few test. Especially if you are using page speed insights via your browser and not in chrome dev tools. You will not always get a clean test run.

• This reply was modified 2 years ago by thinkjarvis.