Shop

.fm-search-bar-wrapper {
width: 100%;
margin-bottom: 25px;
box-sizing: border-box;
}

.fm-search-form {
display: flex;
align-items: center;
background: #ffffff;
border-radius: 50px;
border: 2px solid #d4a338;
padding: 6px 8px 6px 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}

.fm-search-form:focus-within {
box-shadow: 0 15px 35px rgba(212, 163, 56, 0.25);
}

#fm-custom-search-input {
flex: 1;
border: none;
outline: none;
font-size: 15px;
font-weight: 500;
color: #1e293b;
background: transparent;
}

#fm-custom-search-input::placeholder {
color: #94a3b8;
}

#fm-custom-search-btn {
background: #d4a338;
color: #ffffff;
border: none;
width: 42px;
height: 42px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: background 0.3s ease, transform 0.2s ease;
}

#fm-custom-search-btn:hover {
background: #2C1A0E;
transform: scale(1.05);
}
/* Forza le dimensioni corrette dell’icona di ricerca, ignorando qualsiasi regola globale del tema */
#fm-custom-search-btn svg,
.fm-search-form button svg {
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
min-height: 22px !important;
max-width: none !important;
max-height: none !important;
display: inline-block !important;
vertical-align: middle !important;
}

.fm-custom-catalog-pro .fm-product-card-pro.product_cat-fisarmoniche-e-organetti .fm-image-wrapper-pro img,
.fm-custom-catalog-pro .fm-product-card-pro.product_cat-fiati .fm-image-wrapper-pro img { mix-blend-mode: multiply; }

.shop-category-header-card {
background: #ffffff;
padding: 24px 28px;
border-radius: 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
border: 1px solid #f1f5f9;
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
box-sizing: border-box;
margin-bottom: 25px;
}

.shop-header-top {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
width: 100%;
padding-bottom: 14px;
border-bottom: 1px solid #f1f5f9;
}

.title-row {
display: flex;
align-items: center;
gap: 12px;
}

/* Icona dinamica a fianco del titolo, leggermente più grande (28px) */
.header-cat-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 26px;
line-height: 1;
}

.header-cat-icon svg,
.header-cat-icon img {
width: 28px !important;
height: 28px !important;
object-fit: contain;
}

.title-row h1 {
font-size: 24px;
font-weight: 800;
color: #0f172a;
margin: 0;
letter-spacing: -0.4px;
line-height: 1;
}

.shop-header-top p {
font-size: 13px;
color: #64748b;
margin: 0;
font-weight: 500;
}

.shop-header-bottom {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
width: 100%;
}

.ordering-label {
font-size: 13px;
color: #475569;
font-weight: 600;
}

.shop-header-bottom select.orderby {
padding: 8px 16px;
border-radius: 14px;
border: 1px solid #cbd5e1;
background: #ffffff;
font-size: 13px;
font-weight: 600;
color: #0f172a;
outline: none;
cursor: pointer;
transition: all 0.2s ease;
}

.shop-header-bottom select.orderby:hover {
border-color: #94a3b8;
}
/* Rimuove definitivamente qualsiasi icona residua o duplicata in alto */
.shop-category-header-card > .shop-header-top > :not(.title-row):not(p),
.shop-header-icon,
#dynamic-category-icon {
display: none !important;
}
/* Nasconde qualsiasi immagine o icona automatica di WooCommerce fuori al titolo */
.shop-category-header-card img:not(.header-cat-icon img),
.shop-category-header-card svg:not(.header-cat-icon svg),
.term-thumbnail,
.woocommerce-products-header img {
display: none !important;
}
/* Spegne qualsiasi residuo testuale o emoji isolato prima del titolo */
.woocommerce-products-header > *:not(.shop-category-header-card),
.page-title {
display: none !important;
}
/* Rimuove definitivamente qualsiasi icona residua o duplicata in alto */
.shop-category-header-card > .shop-header-top > :not(.title-row):not(p),
.shop-header-icon,
#dynamic-category-icon,
.woocommerce-products-header img,
.term-thumbnail {
display: none !important;
}
/* Spegne completamente la vecchia testata/titolo nativo di WooCommerce che genera il doppione */
.woocommerce-products-header,
.woocommerce-products-header h1,
.woocommerce-products-header .page-title,
header.woocommerce-products-header {
display: none !important;
}

document.addEventListener(“DOMContentLoaded”, function() {
const categoryLinks = document.querySelectorAll(‘.faremusica-shop-sidebar a’);
const titleEl = document.getElementById(‘dynamic-category-title’);
const countEl = document.getElementById(‘dynamic-category-count’);
const sortSelect = document.querySelector(‘select.orderby’);
const container = document.querySelector(‘.fm-custom-catalog-pro’);
const searchInput = document.getElementById(‘fm-custom-search-input’);
const headerIconContainer = document.getElementById(‘shop-header-icon-container’);

if (!container) return;

const originalProducts = Array.from(container.querySelectorAll(‘.fm-product-card-pro’));

function parsePrice(card) {
const badge = card.querySelector(‘.fm-price-badge’);
if (!badge) return 0;
const cleanText = badge.innerText.replace(‘€’, ”).replace(/\s+/g, ”).replace(/\./g, ”).replace(‘,’, ‘.’);
return parseFloat(cleanText) || 0;
}

function parseTitle(card) {
const title = card.querySelector(‘.fm-title-pro’);
return title ? title.innerText.trim().toLowerCase() : ”;
}

function updateCatalog() {
const searchQuery = searchInput ? searchInput.value.trim().toLowerCase() : ”;
const activeLi = document.querySelector(‘.faremusica-shop-sidebar li.active’);
const activeLink = activeLi ? activeLi.querySelector(‘a’) : null;

let catText = ‘Tutti i Prodotti’;
if (activeLink) {
const textSpan = activeLink.querySelector(‘span:not(.cat-icon):not(.arrow)’);
catText = textSpan ? textSpan.innerText.trim() : activeLink.innerText.trim();
}

const lowerCat = catText.toLowerCase();
let currentProducts = Array.from(container.querySelectorAll(‘.fm-product-card-pro’));
let visibleCount = 0;

currentProducts.forEach(prod => {
let matchCategory = false;
let matchSearch = true;

// 1. Filtraggio Categoria tramite lo slug della voce selezionata
const categorySlug = activeLi ? activeLi.dataset.category : ‘all’;
const categoryClassMap = {
‘chitarre-e-bassi’: ‘chitarre-e-bassi’,
‘amplificatori’: ‘amplificatori’,
‘fisarmoniche-e-organetti’: ‘fisarmoniche-e-organetti’,
‘pianoforti’: ‘pianoforti’,
‘tastiere’: ‘tastiere’,
‘batterie-e-percussioni’: ‘batterie-e-percussioni’,
‘fiati’: ‘fiati’,
‘archi’: ‘archi’,
‘accessori’: ‘accessori’,
‘pa-live’: ‘pa-live’,
‘home-recording’: ‘home-recording’,
‘abbigliamento’: ‘abbigliamento’
};
if (categorySlug === ‘all’) {
matchCategory = true;
} else {
const categoryClass = categoryClassMap[categorySlug];
matchCategory = !!categoryClass && prod.classList.contains(‘product_cat-‘ + categoryClass);
}

// 2. Filtraggio Ricerca Testuale (dalla barra)
if (searchQuery !== ”) {
const prodTitle = parseTitle(prod);
if (!prodTitle.includes(searchQuery)) {
matchSearch = false;
}
}

// Applica la visibilità combinata
if (matchCategory && matchSearch) {
prod.style.setProperty(‘display’, ‘flex’, ‘important’);
visibleCount++;
} else {
prod.style.setProperty(‘display’, ‘none’, ‘important’);
}
});

// 3. Aggiorna Titolo Card e Contatore dinamico
if (titleEl) {
if (searchQuery !== ”) {
titleEl.innerText = `Risultati per: “${searchInput.value.trim()}”`;
} else {
titleEl.innerText = catText;
}
}

if (countEl) {
countEl.innerText = `Visualizzando ${visibleCount} prodotti musicali`;
}

// 3.1 Aggiorna l’icona dinamica nell’intestazione e gestisce la pulizia nella sidebar
if (headerIconContainer) {
headerIconContainer.innerHTML = ”;

// Ripristina la visibilità di tutte le icone nella sidebar prima di aggiornare
document.querySelectorAll(‘.faremusica-shop-sidebar .cat-icon’).forEach(icon => {
icon.style.display = ”;
});

const activeIconSpan = activeLink ? activeLink.querySelector(‘.cat-icon’) : null;

if (activeIconSpan) {
headerIconContainer.innerHTML = activeIconSpan.innerHTML;
// Nasconde l’icona dentro la sidebar per quella voce attiva, così non si duplica visivamente
activeIconSpan.style.display = ‘none’;
} else {
// Icona di default (cursori) per “Tutti i Prodotti”
headerIconContainer.innerHTML = ``;
}
}

// 4. Ordinamento
if (sortSelect) {
const sortValue = sortSelect.value;
let sortedList = […currentProducts];

if (sortValue === ‘price’) {
sortedList.sort((a, b) => parsePrice(a) – parsePrice(b));
} else if (sortValue === ‘price-desc’) {
sortedList.sort((a, b) => parsePrice(b) – parsePrice(a));
} else if (sortValue === ‘title’) {
sortedList.sort((a, b) => parseTitle(a).localeCompare(parseTitle(b)));
} else {
sortedList = […originalProducts];
}

sortedList.forEach(card => container.appendChild(card));
}
}

// Ascolta la digitazione nella barra di ricerca
if (searchInput) {
searchInput.addEventListener(‘input’, updateCatalog);
}

// Clic categorie sidebar (pulisce la ricerca se si cambia categoria)
categoryLinks.forEach(link => {
link.addEventListener(‘click’, function(e) {
e.preventDefault();
document.querySelectorAll(‘.faremusica-shop-sidebar li’).forEach(li => li.classList.remove(‘active’));
const parentLi = this.closest(‘li’);
if (parentLi) parentLi.classList.add(‘active’);

if (searchInput) searchInput.value = ”;
updateCatalog();
});
});

if (sortSelect) {
sortSelect.addEventListener(‘change’, updateCatalog);
}

updateCatalog();
});

Ordina per:

Più rilevanti
Prezzo: da meno caro a più caro
Prezzo: da più caro a meno caro
Nome prodotto

Chitarra Acustica Premium

450,00 €

Aggiungi al carrello

Pianoforte Digitale

890,00 €

Aggiungi al carrello

Violino Artigianale

320,00 €

Aggiungi al carrello

Organetto diatonico Baffetti a 2 bassi

890,00 €

Aggiungi al carrello

Sassofono contralto

799,00 €

Aggiungi al carrello

@media (min-width: 768px) {
body.woocommerce-shop .wp-block-columns > .wp-block-column:first-child { flex: 0 0 25% !important; flex-basis: 25% !important; width: 25% !important; }
body.woocommerce-shop .wp-block-columns > .wp-block-column:last-child { flex: 0 0 75% !important; flex-basis: 75% !important; width: 75% !important; }
}
@media (max-width: 767px) {
body.woocommerce-shop .wp-block-columns > .wp-block-column { flex-basis: 100% !important; width: 100% !important; }
}
.faremusica-shop-sidebar { width: 100% !important; box-sizing: border-box !important; }
.faremusica-shop-sidebar .sidebar-header { height: 48px !important; min-height: 48px !important; box-sizing: border-box !important; padding: 8px 12px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; overflow: hidden !important; }
.faremusica-shop-sidebar .sidebar-header .header-icon { display: flex !important; flex: 0 0 18px !important; width: 18px !important; height: 18px !important; margin: 0 !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; }
.faremusica-shop-sidebar .sidebar-header .header-icon svg { display: block !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; }
.faremusica-shop-sidebar .sidebar-header h3 { flex: 1 !important; margin: 0 !important; font-size: 16px !important; line-height: 20px !important; text-align: center !important; }
.faremusica-shop-sidebar .sidebar-header .menu-badge { flex-shrink: 0 !important; padding: 3px 8px !important; font-size: 10px !important; line-height: 14px !important; }
.faremusica-shop-sidebar #sidebar-category-list > li:first-child > a { height: 36px !important; min-height: 36px !important; box-sizing: border-box !important; padding: 6px 8px !important; line-height: 22px !important; font-size: 14px !important; }
.faremusica-shop-sidebar #sidebar-category-list > li:first-child .cat-icon { flex: 0 0 16px !important; width: 16px !important; height: 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.faremusica-shop-sidebar #sidebar-category-list > li:first-child .cat-icon svg { width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; }
.faremusica-shop-sidebar .sidebar-header .header-icon svg, .faremusica-shop-sidebar #sidebar-category-list > li:first-child .cat-icon svg { display: none !important; }
.faremusica-shop-sidebar .sidebar-header .header-icon::before { content: “”; display: block; width: 16px; height: 12px; background: linear-gradient(to bottom, #d4af37 0 2px, transparent 2px 5px, #d4af37 5px 7px, transparent 7px 10px, #d4af37 10px 12px); }
.faremusica-shop-sidebar #sidebar-category-list > li:first-child .cat-icon::before { content: “”; display: block; width: 16px; height: 16px; background: linear-gradient(#ffffff,#ffffff) 1px 0/2px 16px no-repeat, linear-gradient(#ffffff,#ffffff) 7px 0/2px 16px no-repeat, linear-gradient(#ffffff,#ffffff) 13px 0/2px 16px no-repeat; }

.fm-custom-catalog-pro {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 10px;
width: 100%;
box-sizing: border-box;
}

@media (min-width: 768px) {
.fm-custom-catalog-pro {
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
}

.fm-product-card-pro {
background: #ffffff;
border-radius: 20px;
padding: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(212, 163, 56, 0.2);
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.fm-product-card-pro:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 25px 50px rgba(212, 163, 56, 0.35);
border-color: #d4a338;
}

.fm-image-wrapper-pro {
background: radial-gradient(circle, #ffffff 0%, #f0f0f0 100%);
border-radius: 15px;
padding: 10px;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.fm-image-wrapper-pro img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;
}

.fm-product-card-pro:hover .fm-image-wrapper-pro img {
transform: scale(1.2) rotate(3deg);
filter: drop-shadow(0 15px 25px rgba(0,0,0,0.4));
}

.fm-details-pro {
text-align: center;
margin-top: 15px;
z-index: 2;
}

.fm-title-pro {
color: #2C1A0E !important;
font-size: 15px !important;
font-weight: 800 !important;
margin: 0 0 10px 0 !important;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.fm-price-badge {
display: inline-block;
background: #f8f1e6;
color: #2C1A0E;
font-size: 15px;
font-weight: 900;
padding: 6px 14px;
border-radius: 30px;
margin-bottom: 15px;
border: 1px solid rgba(212, 163, 56, 0.4);
}

.fm-button-pro {
display: block;
background: linear-gradient(135deg, #d4a338 0%, #b88c2b 100%);
color: #ffffff !important;
text-decoration: none !important;
text-transform: uppercase;
padding: 12px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.5px;
border: none;
width: 100%;
box-sizing: border-box;
box-shadow: 0 8px 20px rgba(212, 163, 56, 0.4);
animation: pulseButton 2s infinite;
transition: all 0.3s ease;
cursor: pointer;
}

.fm-button-pro:hover {
background: linear-gradient(135deg, #b88c2b 0%, #2C1A0E 100%);
transform: scale(1.04);
box-shadow: 0 12px 25px rgba(44, 26, 14, 0.5);
animation: none;
}

@keyframes pulseButton {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(212, 163, 56, 0.7); }
70% { transform: scale(1.03); box-shadow: 0 0 0 8px rgba(212, 163, 56, 0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(212, 163, 56, 0); }
}

.fm-button-pro.loading { opacity: 0.5; animation: none; }
.fm-button-pro.added { background: #2C1A0E; animation: none; }

Visualizzazione di 7 risultati