Problems and optimizations (CDN, Navi, Toolbar, CSS, Images)

Hi,

we have some problems and optimizations that we would like to fix.

1) CDN: On the product page the product images are not delivered by CDN (we use keycdn). We always have the problem (before 4.0.3.) and also with WP Super Cache or W3C (currently we use WP Rocket). Even with ShortPixel-CDN it didn’t work. So it seems to be a theme problem. All other pictures and files are delivered by CDN. (Links in private content)

2) Product Navi: We would like to remove the toolbars for the previous and next product on the product page (not only hide them via CSS). So that only the buttons/icons remain. This should make the page faster. But we don’t want to turn off this navigation completely (for which there is an option in the theme). (Picture)

3) YITH button: On the product page we would like to hide the wishlist button of YITH (without deactivating the plugin). Is there a CSS snippet for this?

4) In the sidebars we have WooCommerce product widgets. Since the images are always 65x65px in size, we registered our own image size via the theme (sidebar-thumb) and generated all product images in this size. How can we define the new image size “sidebar-thumb” in the widgets?
(FEATURES REQUESTS: Perhaps it would be good if you would register and integrate a 65x65px image size in a future Theme update. Many widgets have exactly this image size.)

5) Fonts – FEATURES REQUESTS: It would be great if you could also choose a “font-display” in the Theme-Settings > Custom Fonts for the local fonts, not only for Google-Fonts and Font Awesome. We manually entered the font-display values (swap, fallback etc.) for the local fonts into the dynamic CSS, but every time we save the theme settings, we have to do it again.

Attachments:

You must be logged in to view attached files.

Hello,

1. When we check your product images on the single product page they seem to be loaded via CDN https://gyazo.com/ea8faa98e96fc8e6929d88374794f230

2. You can customize them in the file /inc/integrations/woocommerce/template-tags.php. Function name is woodmart_products_nav

3. You can use the following CSS code for this purpose

.yith-wcwl-add-to-wishlist {
	display: none!important;
}

4. It is a WooCommerce products widget and this feature request should be addressed to the plugin’s developers instead.

5. If you set the font-display property for Google Fonts it will be used for our theme’s custom fonts at all.

Kind Regards

Thanks.

To 1) In this case the thumbnails (300x300px) are not delivered via CDN. An image link without CDN can be seen in your screenshot. (Also in the GTmetrix Waterfall)

The problem may be with your plugin that replaces URLs since there is no such issue on our demo https://gyazo.com/578ab221a3079adbfdd3b25bebb9c452
We are using WP Rocket plugin and it replaces all the URLs.

We also use WP Rocket. Therefore we have contacted the WP Rocket Support. They write the following:

There are two* kinds of files that aren’t re-written to point to the CDN.

The URL for 3 of them (the prodct thumbnails) is stored in a data-thumb attribute which WP Rocket doesn’t handle at the moment:

<figure data-thumb="https://xyz.com/files/2019/03/image-300x300.jpg" class="woocommerce-product-gallery__image">

* The second is a JS file of a popup plugin.

But your code looks identical and it seems to work. The only difference I can see is that you are using the original images and not 300x300px formats.

Hello,

Try again to contact the plugin support and provide them with a link to our demo where everything works and ask what is the difference?

Kind Regards
XTemos Studio

Do you use the “CDN Enabler” plugin to rewrite images to the CDN?

Hello,

This is our WP Rocket CDN settings on the demo http://prntscr.com/otsp05

Kind Regards
XTemos Studio

We have the same settings there, except for the exclusion of svg.

The WP Rocket Support has looked at our settings and told us the following:

I confirm that WP Rocket won’t rewrite URLs for non <img> tags:
https://github.com/wp-media/wp-rocket/blob/b8a54656afd7acc86fec1b1ac4e85d7b72ba5317/inc/front/cdn.php#L157

Your theme’s developer is probably using CDN Enabler to rewrite images to the CDN.

It might work with the next WP Rocket version (3.4). We will test it with CDN Enabler until then.

But so far, it’s still a mystery why it works for you.

We have activated CDN Enabler. Unfortunately, it does not fix the problem either.

We tried different things on the weekend. Among other things we installed the CDN Enabler (which helps with some Revolution Slider files) and deactivated some plugins and settings. Unfortunately all without success. The product thumbnails are not delivered via CDN.

Is it possible to insert the images in a different way? Without that “figure data-thumb”?

It will require a lot of customization and it still works well on our side. We don’t have any extra plugins or customizations.

We are still trying to solve the CDN-Images mystery…

From WP Rocket:

I can see your image galleries are being fed using a JSON object, that gets parsed into the owl-carousel.
WP Rocket can’t modify these images URLs currently.

When I check the provided example (https://woodmart.xtemos.com/shop/lighting/fermentum-potenti/?opt=images_bottom) I can’t see the JSON object. Is it possible they are feeding the galleries differently? and this is why the thumbnail objects are being processed, and the URLs replaced by the CDN?

I found in the theme folder woocommerce/single-product/product-thumbnails.php where the <figure data-thumb= appears.

As I wrote before, I see the difference between the demo and our site, that you didn’t specify a thumbnail image size in the thumbnails (where we link 300×300 images). Could it be that if you define a thumbnail size in the Theme/Woocommerce settings (300 (px) in our case), then the JSON object will be activated? What then doesn’t work with CDN?

Sorry, what exactly JSON object do you mean? Could you please provide us some screenshot? Also, we don’t quite understand about this part the difference between the demo and our site, that you didn’t specify a thumbnail image size in the thumbnails (where we link 300×300 images).

I have new information from WP Rocket which has analyzed the whole thing more closely:

The level 2 team has been reviewing this case, and I see the CDN issue is happening because of the reasons V explained.
The <figure> is being used as a container for the a and <img>tags, <figure> has a data-thumbattribute which contains the thumbnail.

The URL for these images is stored in a data-thumb attribute, and WP Rocket doesn’t handle at the moment:

<figure data-thumb=”https://mysite.com/files/2019/03/minikleid-schwarz-groesse-s-300×300.jpg”&gt;

Once jQuery kicks in, a function extracts this img data-thumb and builds the thumbnails navigator, this happens at https://cdn.mysite.com/wp-content/themes/woodmart/js/functions.min.js?ver=4.0.4

Screenshot-at-ago-21-15-38-34.png
Full image here: https://d.pr/free/i/CzCtll

We’ve been reviewing the example you sent from the theme developer, and after doing some research my teammate S discovered that even at the non-cached version they have the img srcs pointing to their CDN. So it looks like they are doing some kind of replacements.

If you check the source code of this page: https://woodmart.xtemos.com/?nocache
You will find kxcdn.com is already being used even when WP Rocket is not active yet.

Hello,

Once jQuery kicks in, a function extracts this img data-thumb and builds the thumbnails navigator, this happens at

Yes, thumbnails gallery is generated by JS code but they are pointing to a wrong place. Here is a code for this functionality https://gyazo.com/6b4b614320b92e12f3ee89f78d2b94c3
As you can see, the variable image is taken from data-thumb attribute and any other functions for replacement are not applied there.

We’ve been reviewing the example you sent from the theme developer, and after doing some research my teammate S discovered that even at the non-cached version they have the img srcs pointing to their CDN. So it looks like they are doing some kind of replacements.

We are talking about the product page and they point to the home page where data-thumb attribute is not used at all. We have checked the single product page with ?nocache parameter and see that CDN is not used there for product images https://gyazo.com/cce8e88cb40f6da2376ddc23be4cbb1a

We will review our code once more to see if there is any kind of custom code for CDN replacement.

Kind Regards

Also, maybe they have some kind of filter or custom function that can be applied to data-thumb attribute to solve the problem in your case?

[Author]

Posts