I created a tutorial a few weeks ago called Quick Tip: Swap Price and Title in SureCart [sc_product_list] Shortcode using a little JavaScript
A subscriber applied this but also wanted to filter, and the way SureCart filters work meant this solution wouldn’t work, so I have applied some changes to the original snippet. To create the new snippet below, which waits till the page has been reloaded before applying so that it can then apply the javascript changes.
document.addEventListener('DOMContentLoaded', function () {
function enforcePriceUnderTitle() {
document.querySelectorAll('.sc-product-item').forEach(function (productItem) {
let price = productItem.querySelector('.wp-block-surecart-product-list-price');
let title = productItem.querySelector('.wp-block-surecart-product-title');
if (price && title) {
// Ensure price is always under title
if (title.nextElementSibling !== price) {
title.parentNode.insertBefore(price, title.nextElementSibling);
}
}
});
}
function observeProductList() {
let productListContainer = document.querySelector('.wp-block-surecart-product-list');
if (productListContainer) {
let observer = new MutationObserver(function (mutations) {
let contentChanged = false;
mutations.forEach(function (mutation) {
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
contentChanged = true;
}
});
if (contentChanged) {
setTimeout(enforcePriceUnderTitle, 100); // Delay to ensure content is fully rendered
}
});
observer.observe(productListContainer, { childList: true, subtree: true });
}
}
// Initial run
enforcePriceUnderTitle();
observeProductList();
});
You can see this in motion by viewing this bubble of it working as I say within the video there is going to be an almost undetectable refresh of the screen when this applies as it has to wait until they are loaded to apply.
This goes to show you what you can do with a bit of customisation with SureCart and WordPress, and that it is entirely possible to get the look and feel you want.
