Home › Forums › WoodMart support forum › Imported electronics 3 looks significantly different from the official demo

Imported electronics 3 looks significantly different from the official demo

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #729661

    winlonau
    Participant

    Hi WoodMart Support,

    I recently purchased WoodMart and imported the Electronics 3 prebuilt website.

    However, after importing the demo, my website looks noticeably different from the official Electronics 3 demo, even though I am using the same demo content/products and do not change anything.

    Official Electronics 3 demo:
    https://woodmart.xtemos.com/electronics-3/

    For example, I noticed the following differences:

    Product titles are much larger on my website and frequently wrap onto two or more lines.
    Product cards are much taller, which makes the whole product grid look more spread out.
    Typography and line height appear different from the official demo.
    Spacing between products and other elements is noticeably larger.
    Overall, the page looks less compact and does not visually match the official Electronics 3 demo.

    My expectation is that importing the Electronics 3 demo should reproduce the same basic typography, product grid proportions, spacing and overall visual appearance shown on the official demo.

    Could you please check my website and let me know why the imported demo does not match the official demo?

    In particular, could you please check whether:

    the correct Electronics 3 theme settings were imported;
    the correct typography settings were applied;
    the Product Grid typography/settings are correct;
    Elementor is overriding any WoodMart settings;
    any fonts, presets, CSS or other demo-specific settings are missing;
    there is any difference between the current official demo configuration and the imported demo configuration.

    I would prefer to use the original WoodMart demo settings rather than manually changing CSS or individual settings, because I would like my website to reproduce the official demo as closely as possible.

    I have just purchased the theme, so I would appreciate it if you could check the configuration on my website and identify the exact cause.

    I can also provide temporary WordPress administrator access if you need to inspect the settings directly.

    Thank you.

    Attachments:
    You must be logged in to view attached files.
    #729770

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    I have checked your website, and the Electronics 3 demo has been imported correctly.

    I also reviewed the screenshot you provided. The text mentioned in your report are displayed on a single line, and the product card layout appears consistent with the official Electronics 3 demo.

    If you are still noticing any differences, please provide screenshots of the specific sections from both your website and the official Electronics 3 demo, preferably showing the same products/sections side by side. This will allow us to compare them and investigate the exact difference.

    Best Regards

    #729776

    winlonau
    Participant

    ab.png is my website and ba1 is official demo,
    I’ve marked the “wrap” and “no wrap” areas with red rectangles; I’d like to know how to fix this, as my website doesn’t look good.

    Attachments:
    You must be logged in to view attached files.
    #729794

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    I have checked your site and the text is not wrapped on your site.

    See Screenshot for clarification: https://postimg.cc/0bVvrV4z

    Best Regards

    #729834

    winlonau
    Participant

    The problem still exists and has not been resolved.

    I’ve noticed that the text doesn’t wrap on a 23-inch monitor but does wrap on a 13-inch laptop screen, whereas the official demo doesn’t wrap on a 13-inch screen (I’ve uploaded screenshots). So, I’d like to ask: why is the official demo able to adapt responsively while my website isn’t?

    I also tested taking screenshots on my phone, and the difference in layout is obvious: the official site uses a smaller font and looks neater, whereas my site appears cluttered, with wide line spacing and less visible content.

    Attachments:
    You must be logged in to view attached files.
    #729870

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Thank you for the clarification. I have compared your website with the official Electronics 3 demo and identified the difference.

    The main difference is the product title font size. On the official demo, the product title is set to 14px, while on your imported website it is currently 15px. This difference becomes more noticeable on smaller screen sizes, such as a 13-inch laptop or mobile device, where the available space is limited and the title may wrap onto additional lines.

    To make your product cards appear closer to the official demo, please edit your Single Product Page layout with Elementor and reduce the product title font size from 15px to 14px. You can also adjust the responsive typography settings for tablet/mobile if needed.

    Please note that importing demo content does not create an identical copy of the live demo website. Our demos contain a large number of pages, images, custom layouts, and configurations, and not all settings can be imported exactly as they are currently configured on the live demo. I have also verified this behavior on our test installation.

    Best Regards.

    #729882

    winlonau
    Participant

    Thank you for checking this and identifying the 15px vs 14px difference.

    I understand that changing the product title from 15px to 14px should make the product cards closer to the official demo.

    However, I would like to clarify one more thing.

    When I compare my imported Electronics 3 website with the official demo, the difference appears to be more than just the 1px product title size difference. The overall product grid also looks more spread out, and the product cards appear taller because of the typography, line height and spacing.

    Could you please confirm whether the following settings are also different between the official Electronics 3 demo and the imported demo?

    Product title font size and line height
    Product card spacing
    Product grid column width
    Product image size/aspect ratio
    Container width
    Product grid typography settings
    Responsive typography settings for desktop/tablet/mobile
    Any custom CSS used by the official demo

    If these settings are different, could you please provide the corresponding values used on the official Electronics 3 demo?

    Also, when you say that “not all settings can be imported exactly as they are currently configured on the live demo”, could you please clarify which important settings are not included in the demo import?

    As a customer who has just purchased WoodMart, my expectation was that importing a prebuilt website would reproduce the visual design of the advertised demo as closely as reasonably possible.

    I would therefore like to understand whether there is a recommended way to configure my installation so that it matches the official Electronics 3 demo as closely as possible, rather than manually trying to identify and reproduce the settings one by one.

    Thank you.

    #729884

    winlonau
    Participant

    However, I don’t consider the issue resolved.

    I purchased WoodMart based on the design and appearance of the official demo. I don’t want to spend my time manually adjusting multiple settings to try to reproduce the demo myself.

    I am not asking for any custom design. I simply want the same WoodMart theme configuration and design as the official Electronics 3 demo.

    My expectation is very simple:

    If the official Electronics 3 demo can achieve this design, I would like a fresh theme/demo package from WoodMart that I can install and import, and that will give me the same result as your official Electronics 3 demo.

    If this is not possible, please let me know clearly, as this will affect my decision on whether to continue using the theme or request a refund.

    #729922

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    We additionally reviewed your website and would like to clarify the reason for the differences between the imported Electronics 3 demo and our official demo website.

    Your website is using Elementor Builder, while the current version of the official Electronics 3 demo is built with Gutenberg.

    Because of this, some visual differences between the two versions are unavoidable. Elementor and Gutenberg use different HTML structures, their own styles, spacing systems, responsive settings, and typography handling. Therefore, even when using the same theme settings, certain elements may have slightly different sizes, spacing, block heights, or behavior across different screen sizes.

    This does not mean that the demo content was imported incorrectly. In your case, the main part of the design and settings was imported correctly, but achieving a completely identical appearance between the Elementor version and the Gutenberg version is not always technically possible.

    Regarding the product title font size, which became the main reason for the noticeable difference in your case, we confirmed that the imported content currently uses 15px, while the current official demo uses 14px.

    We will correct this value in one of the upcoming updates to the imported demo content so that, after a new import, the typography will be closer to the current version of the official demo.
    We always try to keep the imported content as close as possible to the current live demo and will continue correcting any detected inconsistencies, such as the product title font size in this case.

    Also, if you would like, we can change the corresponding font size setting directly on your website so that the product grid appearance is already as close as possible to our official Electronics 3 demo. We only need your permission to make this change.

    Best Regards

    #729925

    winlonau
    Participant

    Thank you for the clarification; that helps me better understand the differences.

    Since my goal is to have a site that matches the official Electronics 3 demo as closely as possible, I would prefer to use the same Gutenberg version (or page builder) as the current official demo, rather than trying to manually adjust the Elementor version to make it look similar.

    It makes no difference to me whether the site uses Elementor or Gutenberg. My only requirement is that the result should match the official Electronics 3 demo as closely as possible.

    I can confirm that I do not want to make manual adjustments to numerous settings, as this could lead to endless tweaking and still may not reproduce the official demo accurately.

    If the Gutenberg version is available, please let me know how I can install or import it.

    Thank you.

    #729926

    winlonau
    Participant

    Would the issue be resolved if I delete the current site, reinstall WordPress from scratch, and select Gutenberg as the page builder before importing the Electronics 3 demo data?

    Since you confirmed that the current official Electronics 3 demo uses Gutenberg, I would like to make sure that this process will give me the same version and configuration as the official demo.

    Please let me know the correct way to do this before I proceed.

    #729938

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Yes, starting with a fresh WordPress installation and selecting Gutenberg as the page builder before importing the Electronics 3 prebuilt website will allow you to import the Gutenberg version of the demo.

    If you would like to proceed with the Gutenberg version, you can reset the site using a plugin such as WP Reset, reinstall/activate the WoodMart theme, select Gutenberg as the page builder, and then import the Electronics 3 prebuilt website.

    If you prefer, and we can perform the import on your installation and verify the result.

    Best Regards,

    #730024

    winlonau
    Participant

    Hi,

    That’s excellent—the issue is now resolved. Thank you very much for your help.

    Sticking with Gutenberg was definitely the right choice. I would suggest not only setting Gutenberg as the default option during the WoodMart installation process, but also clearly indicating that it is the recommended and best option for the Electronics 3 demo.

    For beginners, this would make the setup much clearer and would help them simply click “Continue” with confidence, rather than accidentally choosing Elementor and ending up with a different version of the demo.

    I really appreciate your support and guidance. Your explanation helped me identify the issue and get everything working correctly.

    Thank you again for your help!

    Best regards,
    Wenson

    #730042

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Sounds Great! that your issue has been solved.

    I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

    We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

    Thanks for contacting us.
    Have a great day.

    Topic Closed.
    Best Regards.

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Imported electronics 3 looks significantly different from the official demo’ is closed to new replies.