π Getting Started with WooCommerce Alphabetical Search #
Welcome to the WooCommerce Alphabetical Search plugin! This powerful tool allows your customers to filter products on your shop page alphabetically β making product discovery faster and more intuitive.
π What This Plugin Does #
It displays an AβZ filter bar (and optional # for numeric titles) on your shop or product archive pages. Users can click on a letter to instantly view all products that start with that letter.
β Step 1: Plugin Activation #
Once the plugin is installed:
-
Navigate to WooCommerce β Settings β Alphabetical Search.
-
Check the “Automatic Placement” option to automatically show the alphabet bar on shop pages.
-
Or use the shortcode
[woo_alphabetical_search]on any page or widget.
-
βοΈ Step 2: Configure Main Options #
| Option | Description |
|---|---|
| Enable Numbers | Adds a “#” symbol to filter products with numeric titles. |
| Display Product Count | Shows the number of products per alphabet on hover. |
| Display Only Alphabets With Products | Hides unused alphabets to reduce clutter. |
| Opaque Letters With No Products | Displays inactive letters in faded/non-clickable form. |
| Enable Reset | Adds a “Reset” link to clear the filter. |
| Reset Text | Customize the text label for the reset button. |
| Text Above Alphabets | Customize the heading or instructional text above the filter. |
π¨ Step 3: Customize the Appearance #
Under the styling section, you can fully customize the look of your alphabetical filter bar:
-
Background & Text Colors for alphabets and counters.
-
Active/Hover Colors to match your theme.
-
Size Adjustments like:
-
Alphabet size and spacing
-
Counter size and font
-
Horizontal/vertical spacing
-
This gives you full control over how the filter integrates with your shopβs design.
π Step 4: Set Dimensions #
You can fine-tune visual layout with:
-
Alphabet height/width
-
Font size
-
Counter height/width/font
-
Space between letters
Adjust these settings to best fit your website layout and responsiveness.
πΎ Step 5: Save & Preview #
Click “Save Changes” at the bottom of the settings page. Then visit your shop page to preview the alphabetical filter in action.
π Optional: Using Shortcode #
If you donβt want automatic placement, you can add the filter manually:
Place it on any product archive, custom page, or widget area.
π§© Final Tip #
Combine this plugin with product sorting and filters for a more powerful shopping experience. Customers love easy navigation β and this plugin delivers exactly that!