“Featured Product” Broken Background Image

Hi @kfutter!

Have you made any recent updates? Because usually, this kind of issue, like the one you have, could be related to a conflict between WooCommerce and your theme or another plugin; an outdated or malfunctioning code could be interfering.

To be sure of this, please perform a conflict test by temporarily switching your theme back to Storefront, disabling all plugins except WooCommerce, and then check again if the issue persists.

If that solves it, reactivate the theme first and check again. Then, reactivate your other plugins, testing after each, until you find the one causing conflict.

If you cannot perform a conflict test on your live site, we recommend creating a staging site using the WP Staging plugin.

You can find a more detailed explanation of how to do a conflict test here: https://docs.woocommerce.com/document/how-to-test-for-conflicts/.

Let us know how that goes for you!

I always run every update as they become available, which is usually several times a week. So yes, I’ve made any number of updates recently. I only use the Storefront theme, so that’s already taken care of. Unfortunately I can’t disable most of the functionality on a live eCommerce site just for testing purposes, so I’ll check out WP Staging, but it’s not something I can do quickly.

Hi there,

Running tests in a staging environment is what we recommend to avoid working directly on the production site and causing inconvenience to your customers.

It certainly requires some time but please let us know how that goes.

Cheers.

In looking through my installed plugins, one of the most recent updates was for Woocommerce Blocks itself (5 days ago), which is the plugin that provides the “Featured Product” functionality block I’m having trouble with. So I suspect the update introduced a bug, as the timing seems about right. I’ll have to wait for the next update to (hopefully) fix it. Which will probably be quicker than me trying to set up a staging environment.

I’ve just found the support page for the Woocommerce Blocks plugin, and have asked my question over there also, just in case it is a bug (known or otherwise).

Hello,

I understand what you are saying, first, you can ask your host to provide you a staging environment to make the test, we recommend WP Staging for this type of task, that way you will not touch your production site.

If the issue persists, I kindly ask you to provide the following:

Share a copy of your site’s System Status: You can find it via WooCommerce > Status. Select “Get system report” and then “Copy for support”.?

Error Log: Share a copy of any fatal error log found under WooCommerce > System Status > Logs (if any).

We’ll look forward to hearing from you.

I am my host – I run a self-managed VPS, so it’s all work I’ll have to do myself.

Here is the System Status Report:

### WordPress Environment ###

WordPress address (URL): https://www.klp.com.au
Site address (URL): https://www.klp.com.au
WC Version: 6.4.1
REST API Version: ? 6.4.1
WC Blocks Version: ? 7.5.0
Action Scheduler Version: ? 3.4.0
WC Admin Version: ? 3.3.2
Log Directory Writable: ?
WP Version: 5.9.3
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: –
WP Cron: ?
Language: en_AU
External object cache: –

### Server Environment ###

Server Info: Apache
PHP Version: 7.4.29
PHP Post Max Size: 32 MB
PHP Time Limit: 30
PHP Max Input Vars: 1000
cURL Version: 7.81.0
OpenSSL/1.1.1n

SUHOSIN Installed: –
MySQL Version: 5.7.38
Max Upload Size: 32 MB
Default Timezone is UTC: ?
fsockopen/cURL: ?
SoapClient: ?
DOMDocument: ?
GZip: ?
Multibyte String: ?
Remote Post: ?
Remote Get: ?

### Database ###

WC Database Version: 6.4.1
WC Database Prefix: wp_
Total Database Size: 36.55MB
Database Data Size: 26.66MB
Database Index Size: 9.89MB
wp_woocommerce_sessions: Data: 3.35MB + Index: 0.18MB + Engine MyISAM
wp_woocommerce_api_keys: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
wp_woocommerce_attribute_taxonomies: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_woocommerce_downloadable_product_permissions: Data: 0.37MB + Index: 0.42MB + Engine MyISAM
wp_woocommerce_order_items: Data: 0.22MB + Index: 0.09MB + Engine MyISAM
wp_woocommerce_order_itemmeta: Data: 1.28MB + Index: 0.89MB + Engine MyISAM
wp_woocommerce_tax_rates: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_woocommerce_tax_rate_locations: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_woocommerce_shipping_zones: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_woocommerce_shipping_zone_locations: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_woocommerce_shipping_zone_methods: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_woocommerce_payment_tokens: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_woocommerce_payment_tokenmeta: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_woocommerce_log: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_actionscheduler_actions: Data: 0.83MB + Index: 0.30MB + Engine MyISAM
wp_actionscheduler_claims: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_actionscheduler_groups: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
wp_actionscheduler_logs: Data: 0.47MB + Index: 0.35MB + Engine MyISAM
wp_aelia_dismissed_messages: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_commentmeta: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
wp_comments: Data: 0.98MB + Index: 0.47MB + Engine MyISAM
wp_links: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_mailpoet_custom_fields: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_dynamic_segment_filters: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_feature_flags: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_forms: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_mailpoet_log: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_mailpoet_mapping_to_external_entities: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_newsletters: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_newsletter_links: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_mailpoet_newsletter_option: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_newsletter_option_fields: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_newsletter_posts: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_newsletter_segment: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_newsletter_templates: Data: 2.52MB + Index: 0.00MB + Engine InnoDB
wp_mailpoet_scheduled_tasks: Data: 0.11MB + Index: 0.13MB + Engine InnoDB
wp_mailpoet_scheduled_task_subscribers: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_segments: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_sending_queues: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_settings: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_statistics_bounces: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_mailpoet_statistics_clicks: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_mailpoet_statistics_forms: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_statistics_newsletters: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_statistics_opens: Data: 0.02MB + Index: 0.08MB + Engine InnoDB
wp_mailpoet_statistics_unsubscribes: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_mailpoet_statistics_woocommerce_purchases: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_mailpoet_stats_notifications: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_subscribers: Data: 0.16MB + Index: 0.33MB + Engine InnoDB
wp_mailpoet_subscriber_custom_field: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_subscriber_ips: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_subscriber_segment: Data: 0.06MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_user_agents: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_user_flags: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_options: Data: 4.41MB + Index: 0.20MB + Engine MyISAM
wp_postmeta: Data: 6.56MB + Index: 3.70MB + Engine MyISAM
wp_posts: Data: 2.71MB + Index: 0.35MB + Engine MyISAM
wp_termmeta: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
wp_terms: Data: 0.01MB + Index: 0.02MB + Engine MyISAM
wp_term_relationships: Data: 0.02MB + Index: 0.04MB + Engine MyISAM
wp_term_taxonomy: Data: 0.01MB + Index: 0.01MB + Engine MyISAM
wp_usermeta: Data: 1.04MB + Index: 0.70MB + Engine MyISAM
wp_users: Data: 0.08MB + Index: 0.08MB + Engine MyISAM
wp_wc_admin_notes: Data: 0.03MB + Index: 0.00MB + Engine MyISAM
wp_wc_admin_note_actions: Data: 0.01MB + Index: 0.01MB + Engine MyISAM
wp_wc_category_lookup: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_wc_customer_lookup: Data: 0.14MB + Index: 0.13MB + Engine MyISAM
wp_wc_download_log: Data: 0.28MB + Index: 0.26MB + Engine MyISAM
wp_wc_order_coupon_lookup: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
wp_wc_order_product_lookup: Data: 0.27MB + Index: 0.24MB + Engine MyISAM
wp_wc_order_stats: Data: 0.14MB + Index: 0.11MB + Engine MyISAM
wp_wc_order_tax_lookup: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_wc_product_attributes_lookup: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_product_meta_lookup: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
wp_wc_rate_limits: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_reserved_stock: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_wc_tax_rate_classes: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
wp_wc_webhooks: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wp_wpmm_subscribers: Data: 0.00MB + Index: 0.00MB + Engine MyISAM

### Post Type Counts ###

amn_mi-lite: 1
attachment: 414
custom_css: 1
jetpack_migration: 2
jetpack-testimonial: 11
jp_img_sitemap: 1
jp_sitemap: 1
jp_sitemap_master: 1
mailpoet_page: 1
nav_menu_item: 26
page: 21
post: 163
product: 19
revision: 633
shop_coupon: 4
shop_order: 2170
shop_order_refund: 27
wp_global_styles: 1

### Security ###

Secure connection (HTTPS): ?
Hide errors from visitors: ?

### Active Plugins (14) ###

WooCommerce Blacklister: by Aelia – 1.0.5.200727
Free Downloads WooCommerce: by Square One Media – 3.5.1
Grids: by Evolve – 1.3.8
Jetpack: by Automattic – 10.8
MailPoet 3 (New): by MailPoet – 3.88.1
Sitewide Notice WP: by Yoohoo Plugins – 2.3
Theme Customisations: by WooThemes – 1.0.0
User Switching: by John Blackbourn & contributors – 1.5.8
W3 Total Cache: by BoldGrid – 2.2.1
Aelia Foundation Classes for WooCommerce: by Aelia – 2.2.5.220330
WooCommerce Blocks: by Automattic – 7.5.0
WPC Product Bundles for WooCommerce: by WPClever – 6.1.1
WooCommerce PayPal Payments: by WooCommerce – 1.7.1
WooCommerce: by Automattic – 6.4.1

### Inactive Plugins (2) ###

WooCommerce - ShipStation Integration: by WooCommerce – 4.1.48
WooCommerce PayPal Checkout Gateway: by WooCommerce – 2.1.3

### Dropin Plugins (1) ###

advanced-cache.php: advanced-cache.php

### Settings ###

API Enabled: ?
Force SSL: ?
Currency: AUD ($)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
variable (variable)
woosb (woosb)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to WooCommerce.com: –

### WC Pages ###

Shop base: #4 - /shop/
Cart: #5 - /basket/
Checkout: #6 - /checkout/
My account: #7 - /my-account/
Terms and conditions: ? Page not set

### Theme ###

Name: Storefront
Version: 4.1.0
Author URL: https://woocommerce.com/
Child Theme: ? – If you are modifying WooCommerce on a parent theme that you did not build
personally we recommend using a child theme. See: How to create a child theme

WooCommerce Support: ?

### Templates ###

Overrides: –

### WooCommerce PayPal Payments ###

Onboarded: ?
Shop country code: AU
WooCommerce currency supported: ?
PayPal card processing available in country: ?
Pay Later messaging available in country: ?
Webhook status: ?
Vault enabled: ?
Logging enabled: ?
Reference Transactions: –
Used PayPal Checkout plugin: ?

### Action Scheduler ###

Complete: 1,861
Oldest: 2022-04-02 00:05:40 +0000
Newest: 2022-05-02 23:10:52 +0000

Pending: 4
Oldest: 2022-05-03 00:10:52 +0000
Newest: 2022-05-05 07:29:30 +0000

### Status report information ###

Generated at: 2022-05-03 09:54:33 +10:00

The only logs I have are all related to PayPal transactions, other than a single ‘test-log.log’ file from 28 April.

Hi @kfutter,

Since you created the featured product with WooCommerce Blocks for the Gutenberg editor, the issue would be best handled in the WooCommerce Blocks support forum.

In the meantime, check out if adding this custom CSS in Appearance > Customize > Additional CSS works for you.

This specific forum is more focused on the default features of WooCommerce core so I’m going to close the thread now. Feel free to open a new topic if you have questions or issues with WooCommerce core.

Best regards.

The custom CSS works, but it duplicates a raw version of the text overlay, complete with HTML tags. Plus, it hard-codes the image, whereas I use that feature on multiple pages with different products, so I’ll just have to hope that the Woocommerce Blocks team can come to my rescue.

Hi @kfutter

Thanks for trying the suggested custom CSS.

As advised, kindly reach out to the Woocommerce Blocks team for best support in this case.

If you have any other questions, please feel free to create a new topic.

Cheers

Hi again,

The Woocommerce Blocks team informs me that the Featured Product block is a core Woocommerce plugin, so this question then remains valid and unanswered. They did, however, identify some broken HTML code in the output for the block, which looks like a bug to me. Can someone please investigate?

Hello,

The Woocommerce Blocks team informs me that the Featured Product block is a core Woocommerce plugin, so this question then remains valid and unanswered.

That is correct, sorry for the mix-up. I’m setting the topic back to “not resolved”.

They did, however, identify some broken HTML code in the output for the block, which looks like a bug to me. Can someone please investigate?

I’ve run a local test with Storefront and just WooCommerce installed, and I wasn’t able to reproduce what’s happening with your site. The Featured Product block appears to be working as expected – see the image below as reference.

Link to image: https://snipboard.io/2Zp7Nr.jpg

This points to Juan’s initial assessment that something else might be causing the issue. The next step would be to perform the conflict test on a staging site when you get the chance.

Please let us know how it goes.

OK, so I’ve set up WP-Staging and disabled all but a few important plug-ins (Woocommerce, PayPal, Jetpack, and W3 Total Cache). After this, the background image started working again. The first plugin I re-enabled for testing was Woocommerce Blocks, and boom! it stopped working immediately. If you could repeat your test by installing and enabled Woocommerce Blocks to confirm my results, that would be handy. But one of you has a bug with respect to the other. At this stage I’m not even sure what I would lose by disabling Woocommerce Blocks. I’ll convey my findings to their team as well.

Hello,

I’ve also tried this on my test site, and found out that the background image won’t load when there is a link in Product short description: https://snipboard.io/CPi6p3.jpg

Here is the result: https://snipboard.io/ouagfZ.jpg

I can also confirm that this issue appears only when WooCommerce Blocks is enabled. On your staging site, you can temporarily remove this link to check if the background image loads properly.

I understand you’ve created a thread on the WooCommerce Blocks support forum. Can you please also give them this detail so they can replicate it on their end and take a closer look at the issue?