Välj en sida
Divi WordPress Theme

Kunder kommer ofta fram till din WooCommerce-butik med en fastställd budget i åtanke. De kommer att tänka, ”Jag kan bara spendera $X, så jag måste hitta den perfekta passformen.” Att tvinga användare att navigera genom sida efter sida med produkter tills de hittar en som uppfyller deras budget kan vara ansträngande. Det är där Filtrera produkter efter pris WooCommerce block kommer väl till pass.

Detta block ger kunderna möjlighet att välja en specifik prisklass. WooCommerce kommer sedan att uppdatera produktlistan för att bara visa de artiklar som passar in i den budgeten. Den här artikeln kommer att visa dig hur du placerar Filtrera produkter efter pris block och hur man konfigurerar det. Vi kommer också att diskutera bästa praxis för att använda detta element.

Låt oss komma till det!

Hur man lägger till filterprodukterna efter pris WooCommerce Block till ditt inlägg eller sida

Innan vi förklarar hur man använder Filtrera produkter efter pris block, är det viktigt att notera att det bara fungerar tillsammans med Alla produkter WooCommerce block. Om du placerar Filtrera produkter efter pris blockera på vilken sida som helst inte inkludera Alla produkter blockera, fungerar inte filtreringsfunktionen.

Tillsammans utgör dessa två block en perfekt kombination för din butiks huvudbutikssida. Med det i åtanke, öppna blockredigeraren och placera Alla produkter blockera först:

Lägga till ett All Products-block i WooCommerce

Detta block kommer att generera ett produktrutnät som inkluderar varje enskild artikel i din katalog. Du kan konfigurera hur många rader och kolumner som produktrutnätet innehåller och ändra ordningen i vilka artiklar visas:

Konfigurera WooCommerce-blocket Alla produkter

För närvarande kommer vi inte att mixtra med de inställningarna. Välj istället alternativet för att lägga till ett nytt block ovanför Alla produkter element. Leta efter Filtrera produkter efter pris blockera:

Lägga till blocket Filtrera produkter efter pris i WooCommerce

När du har placerat det här elementet kommer blockredigeraren att visa ett prisreglage som börjar på 0 $ och begränsar priset för din butiks dyraste artikel. I vårt fall är det en $90 dollar produkt, så skjutreglaget går från $0 till $90:

Blocket Filtrera efter pris i WooCommerce

Du kommer att märka att skjutreglaget inte fungerar på din redigeringsskärm. För att se blocket i aktion måste du förhandsgranska sidan (eller publicera den och komma åt den från användargränssnittet). Om det inte ser riktigt bra ut än, oroa dig inte – låt oss prata om hur man konfigurerar det.

Filtrera produkter efter pris WooCommerce Blockinställningar och alternativ

De Filtrera produkter efter pris block erbjuder inte ett brett utbud av inställningar. Du kan dock konfigurera några aspekter av hur blocket ser ut och fungerar.

För att komma åt dessa inställningar, välj elementet i Block Editor och klicka på kugghjulsikonen i det övre högra hörnet av skärmen. Det öppnar blockets inställningsmeny till höger. I den här menyn kan du aktivera eller inaktivera alternativet för redigerbara pristextfält:

Konfigurera prisfälten för blocket Filtrera produkter efter pris

Om du väljer Text alternativet kommer användare endast att kunna filtrera priser genom att använda reglaget. Standarden Redigerbar alternativet gör det också möjligt för dem att ändra prisfälten manuellt.

När du går vidare innehåller blockets inställningsmeny ett alternativ för att lägga till en bekräftelse- eller ”filter”-knapp. Om du aktiverar den här inställningen måste användarna klicka på en knapp för att bekräfta prisintervallet de anger. Slutligen kan du ändra rubriknivå för Filtrera produkter efter pris etiketttext:

Konfigurera blocket Filtrera produkter efter pris

Konfigurera Filtrera produkter efter pris blocket bör inte ta lång tid, eftersom elementet bara innehåller en handfull inställningar. Om du inte är säker på vilka alternativ du ska välja kommer vi att prata om våra rekommenderade inställningar i nästa avsnitt.

Tips och bästa tillvägagångssätt för att använda filterprodukterna efter pris WooCommerce Block effektivt

Det första du måste tänka på när du använder Filtrera produkter efter pris blocket är att det bara fungerar tillsammans med Alla produkter WooCommerce block. De Alla produkter block tillåter dig inte att filtrera produkter efter kategorier eller något annat attribut. Det betyder att det är vettigt att para ihop de två blocken om du bygger en WooCommerce-butikssida.

Som vi nämnde tidigare är det vettigt att placera Filtrera produkter efter pris block ovanför Alla produkter element. På så sätt kommer användare inte att missa filtreringsfunktionen när de surfar på butikssidan.

De Filtrera produkter efter pris blocket innehåller redan en identifierande rubrik som läser ”Filter efter pris”. Den rubriken är perfekt för de flesta butiker, liksom dess standard H3 nivå. Vi rekommenderar endast att använda lägre rubriknivåer om det finns andra H3-element på sidan som har företräde.

Blocket Filtrera produkter efter pris i aktion

För användarvänlighetens skull rekommenderar vi att du även behåller de förinställda redigerbara textfälten som följer med Filtrera produkter efter pris blockera. Att erbjuda användarna möjligheten att redigera priser manuellt eller använda reglaget gör blocket mer anpassningsbart.

När det gäller att lägga till en bekräftelseknapp lämnar vi det valet upp till dig. Att aktivera knappen innebär att ditt produktrutnät inte uppdateras automatiskt när du använder Filtrera produkter efter pris reglaget. Det kan dock vara en giltig kompromiss om din webbplats redan är det lider av prestationsproblem.

Vanliga frågor om Filtrera produkter efter pris WooCommerce Block

Om du har några frågor kvar om Filtrera produkter efter pris block, det här avsnittet syftar till att besvara dem. Låt oss börja med att prata om kraven för att detta block ska fungera.

Varför fungerar inte filtrering av produkter efter prisblock?

De Filtrera produkter efter pris blocket fungerar bara om du para det med Alla produkter WooCommerce block. Om du placerar Filtrera produkter efter pris block tillsammans med någon annan typ av produktrutnät fungerar det helt enkelt inte. Du kommer att kunna flytta reglaget, men produkterna uppdateras inte därefter.

Kan jag redigera minimi- och maximipriserna i Filtrera produkter efter prisblock?

De Filtrera produkter efter pris blocket ställer automatiskt in prisreglaget så att det börjar på 0 $ och att taket för priset på din butiks dyraste produkt. Du kan bara redigera skjutreglagets värde genom att ändra produktpriserna i din butik.

Slutsats

De Filtrera produkter efter pris element är ett WooCommerce-block som bara fungerar när du kopplar ihop det med ett annat element. Andra block som bara fungerar i par inkluderar Filtrera produkter efter attribut och Aktiva produktfilter.

Använda Filtrera produkter efter pris WooCommerce-blocket gör det möjligt för kunder att navigera i hela din butiks lager och bara se de artiklar som passar deras budgetar. Blocket fungerar bara vid sidan av Alla produkter element, så tänk på det när du placerar det på din webbplats.

Utvald bild av Bakhtiar Zein / shutterstock.com

Skaffa dig världens bästa hemsidesbyggare till Wordpress idag
Divi WordPress Theme