Specific Styling Questions for Single Product Page

Hello WoodMart Support Team,

I am using your theme and Elementor to build my store and have encountered a few specific issues that I need your help with.

Here are the problems:

Editor/Live Site Background Inconsistency: When I create a Single Product layout using WoodMart -> Layouts, the style inside the Elementor editor is different from the live front-end. For example, the editor preview shows a white background, but the live site correctly shows the global background color I set in Theme Settings. How can I make the Elementor editor preview accurately reflect the live site’s appearance?

Audio Player Styling in “Product Content”: In my Single Product layout template, I have inserted a Product Content widget. Then, in an individual product’s main description area, I use the “Add Media” button to insert an audio player. The resulting player looks great in the Elementor editor preview. However, on the live site, its style is completely overridden by a different theme style. How can I make the player on the live site look exactly like it does in the Elementor editor?

Removing Image Title on Hover: On the single product page, when I hover my mouse over a product gallery image, an unappealing browser tooltip appears, showing the image’s title text. How can I disable this tooltip globally for all product images?

To help you investigate faster, I have created a temporary admin login link and placed it in the private content area of this ticket.

Thank you for your guidance.

Best regards

Attachments:

You must be logged in to view attached files.

Hello,

1. We will find the best way to resolve it in our future updates. Thank you!

2. WordPress itself gives those styles for the audio – https://take.ms/Z8gX8 , our theme doesn’t influent it.

3. Try to use the code below for help:

.single-product .woocommerce-product-gallery img {
    pointer-events: none;
}

Kind Regards

[Author]

Posts