Woocommerce Product Recommendation plugin conflict

Hi!

I want to use the Woocommerce product recommendation plugin with Hitek Theme.
In incognito mode, I just can see a big white space in public side (signed-in admin mode, I can see in public side.)

I asked 3 Ai chat, and them said same. The trigger for the problem is the product recommendation plugin, but the error itself is in the Hitek template (related to Elementor).

I sent the debug log in private content.

Thanks your support, time and help!

I copied another 2 (maybe) related problem in private content. 🙂

Hello,

I sent it to the developer’s team. As soon as I receive an answer, I will let you know.

Thank you for your time and patience.

Kind Regards

Thanks Luke, I’m waiting for the solution.

Hello,

1. Product Recommendation plugin visibility can be resolved by creating a preset for single product in theme settings – https://monosnap.com/file/GnF6t7pGd06uuLnZV3zj73VoK47jne and disabling the Theme settings->Product archive->Layout->Animation on view option only for single product – https://monosnap.com/file/iG9s0inZeg4N0wHjNidziDJlUdhPbQ

2. PHP warnings are caused by the Recommendation plugin, please contact their support

Kind Regards

Hi Luke!

Thanks for your reply.

I globally turned off the animation, and yes, its working.

But I have another problem, what I cant solve.

I have to use a custom javasrcipt for better design, what is change the xts-row-lg-4 to xts-row-lg5 in desktop view, because the product recommendation plugin is using inherit source than product archive loop product count.

In logged-in admin mode, The snippet is running, I can see in single product page 5 columns product listing (product recommendation)
In Incognito mode, using the default theme option 4 columns solution.

I tried out that in theme option I made a single product page preset and set the product archive loop 5 columns, but in incognito mode render 4 columns in single product page.

Custom Javascript in Fluent snippet:
document.addEventListener(‘DOMContentLoaded’, function() {
// Mindkét hely: before_tabs és after_tabs
var targets = document.querySelectorAll(
‘.wc-prl-recommendations.wc-prl-location-after_tabs.wc-prl-page-product_details #main_loop, ‘ +
‘.wc-prl-recommendations.wc-prl-location-before_tabs.wc-prl-page-product_details #main_loop’
);

targets.forEach(function(target) {
target.classList.remove(‘xts-row-lg-4’);
target.classList.add(‘xts-row-lg-5’);
});
});

Attachments:

You must be logged in to view attached files.

I have found the problem and solution too for the recommendation 4col vs 5 col JS snippet.

the problem was, the recommendation plugin in NON-ADMIN using ajax loading. So I have to rewrite the snippet code.

Here is the modified snippet for the community.
Its working only in single product page!

(function() {
// Segédfüggvény: osztály módosítása
function updateCols() {
var targets = document.querySelectorAll(
‘.wc-prl-recommendations.wc-prl-location-after_tabs.wc-prl-page-product_details #main_loop, ‘ +
‘.wc-prl-recommendations.wc-prl-location-before_tabs.wc-prl-page-product_details #main_loop’
);

if (!targets.length) return false;

targets.forEach(function(target) {
if (target.classList.contains(‘xts-row-lg-4’)) {
target.classList.remove(‘xts-row-lg-4’);
target.classList.add(‘xts-row-lg-5’);
}
});

return true;
}

// Csak akkor fusson, ha single product page-en vagyunk
if (!document.body.classList.contains(‘single-product’)) return;

// Első próbálkozás DOMContentLoaded-kor
document.addEventListener(‘DOMContentLoaded’, function() {
if (updateCols()) return; // ha már most sikerült, nem figyelünk tovább

// Ha nem volt ott a tartalom, figyeljük a DOM-ot, amíg meg nem jelenik
var observer = new MutationObserver(function() {
if (updateCols()) {
observer.disconnect(); // ha sikerült, leállítjuk a figyelést
}
});

observer.observe(document.body, { childList: true, subtree: true });
});
})();

Hello,

Thank you for sharing your findings and the updated JavaScript snippet for handling the AJAX-loaded product recommendations on the single product page. Your solution to use a MutationObserver to detect when the recommendations are loaded and then update the column classes is a great approach and will be helpful for other users facing similar issues.

If you have any further questions or need assistance with the theme or customization, please feel free to ask.

Regards

[Author]

Posts