Several workarounds help

I’ve tried several workarounds before reaching out, and given your active support, I’m hopeful that you can assist with the issues I’m facing. Below are the details of each problem along with my requests for enhancements:

Single Product Page Issue:

The variation icons on the single product page load correctly only after the first page refresh. Could you please investigate and provide a solution to ensure they load correctly the first time?

Product Archive – Thumbnail Size on Variations:

When hovering over product variations, the thumbnail image changes size. I would like to fix the crop size of these thumbnails to either 1:1 or 2:3. I managed to set this on the default prebuilt template through WooCommerce product gallery settings but not with Elementor. If the custom layout is disabled, the desired effect is visible. I aim to apply this fixed thumbnail size across all product galleries on the site (carousel, grid, archive, etc.). (on some i will use a square crop, on others 3:4).

Category Navigation in Page Title:

Currently, the text and icons for category navigation in the page title are misaligned and appear uneven. Additionally, the icons are very small despite uploading SVG files. I would like to center-align the category navigation and adjust the icon size for better visibility.

Subcategories are not displayed in the category navigation. Can this be enabled?

Theme Settings Not Functioning:

Certain settings in the theme (e.g., filters, product count, product grid) are not functioning, and I’ve had to modify or remove them using the Elementor layout editor. Could you provide guidance on fixing these settings within the theme?

Dynamic Categories Menu:

Is it possible to create a categories menu that automatically updates with new categories? I’m looking for a sidebar similar to the Mega-Electronics template, but with auto-generated categories and subcategories. Ideally, this menu would utilize HTML blocks and widgets to display all levels of categories.

Prebuilt Templates and Layouts:

The prebuilt templates lack specific page layouts that could serve as examples for my custom designs. This makes it challenging to create new layouts that are consistent with those provided in the prebuilt templates. Would it have been better to choose WPBakery over Elementor for this purpose?

Attachments:

You must be logged in to view attached files.

Hello,

01. I’ve checked your site, and the product variations are loading correctly the first time on the single product page.

02. Your images differ in size considerably. Please check this manual and upload the same size of product images: https://xtemos.com/docs-topic/image-size-and-content-alignment-in-a-product-grid/

The only way to make the view awesome is to upload images of the same size and proportion.

WooCommerce allows some settings that you can find under Appearance >> Customize >> WooCommerce >> Product Images.

You can define the “height” of the shop thumbnails by setting up the width : height aspect ratio in the “Thumbnail cropping” section:

Custom: In Custom, you can select the aspect ratio of the image.

Here are some of the popular aspect ratios (1:1, 5:4, 4:3, 3:2, 16:9 and 3:1).

Uncropped: The height of the image will be untouched. Images will be displayed using the aspect ratio in which they were uploaded: https://ibb.co/6mR6DbD

If you’re setting the image size in the layout, go to Layouts > Edit Product Archive Layout with Elementor, then edit the Product Archive widget and set the image size to WooCommerce Thumbnail: https://ibb.co/BH4bbb11

03. Please add the below Custom CSS code to Theme Settings > Custom CSS > Desktop CSS:

.page-title .wd-nav-product-cat {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px; /* spacing between items */
    text-align: center;
}

.page-title .wd-nav-product-cat > li > a {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* space between icon and text */
    padding: 8px 12px;
}

.page-title .wd-nav-product-cat .wd-nav-img {
    --nav-img-height: 25px !important;
    --nav-img-width: auto;
    height: var(--nav-img-height);
    width: var(--nav-img-width);
    max-height: none;
    object-fit: contain;
}

To display subcategories in the category navigation, please make sure they are properly configured under Products > Categories in your dashboard.

Create or assign subcategories under a parent category > Then, assign relevant products to those subcategories > On the front end, when you hover over a parent category, the subcategories should appear in the dropdown automatically.

04. The reason your changes under Theme Settings are not taking effect is likely due to Custom Layouts being enabled for your archive pages. When a custom layout is applied via Elementor, it overrides the default theme settings.

To resolve this, you can either:

Edit the custom layout directly via Templates > Layouts in your dashboard and adjust the elements there,

Disable the custom layout for archive pages if you prefer to manage settings through the theme options.

5. To achieve this, you need to use the “Product Categories” widget in an HTML Block. This widget will automatically pull all your categories and subcategories, so any new ones you create will appear in the widget without needing manual updates.

6. Both Elementor and WPBakery are powerful page builders, and the choice depends on your preferences and design workflow. Our theme provides prebuilt templates for both builders.

If you’re using Elementor and feel that prebuilt layouts are less content, you can import additional Elementor blocks or sections from the theme template library.

Follow this guide for more details: https://xtemos.com/docs-topic/templates-library/

Best Regards,

[Author]

Posts