The Dynamic AJAX Product Filters plugin offers a variety of checkbox designs to enhance the appearance and functionality of your product filters. Here’s a detailed guide on how to customize the checkbox design, including an explanation of each suboption.
Step 1: Access Form Style Settings
- Navigate to Form Style:
- Go to Product Filters > Form Style in your WordPress dashboard.
- Select Attribute:
- From the Select Attribute dropdown, choose the attribute that you want to customize with checkboxes.
Step 2: Choose Checkbox Style Options
- Select Attribute Style Options:
- Choose Checkbox as the attribute style option. This will enable the various checkbox design options available for customization.
Step 3: Customize Checkbox Suboptions
After selecting Checkbox as the style, you will see several suboptions to choose from:
- Checkbox: Select with Check Mark
- This option displays traditional checkboxes that users can click to select or deselect options. When selected, a check mark appears inside the box. This is a straightforward design familiar to most users.
- Button Check: Select Options with Button Style Check
- This style transforms the checkboxes into button-like elements. Each option appears as a button, and users can click on these buttons to select or deselect. This design is visually appealing and encourages interaction, making it suitable for modern websites.
- Radio Check: Select with Radio Style Check
- This option uses a radio button design but features a check mark instead of the traditional filled circle. This can help differentiate between multiple selections while maintaining a familiar look for users.
- Radio: Select with Radio Style
- This is the standard radio button design, represented by a filled circle. This design is clean and minimalistic, making it suitable for a variety of interfaces.
- Square Check: Just Like Checkbox but Square Shape
- Similar to the traditional checkbox, but with a square shape instead of the typical rounded corners. This design provides a different aesthetic while retaining the basic functionality of checkboxes.
- Square: Square Shape with Radio Style Select Option
- This option features a square-shaped design for radio buttons. It offers a modern twist on the conventional radio input style, appealing to users who prefer squared designs.
- Checkbox Hide: On Checkbox Value Only
- This option hides the checkbox visually, displaying only the values without the checkbox itself. Users can still select the values, but the interface will look cleaner and less cluttered. This design is ideal for a minimalist aesthetic where space is a concern.
Step 4: Save Changes
After selecting and customizing your desired checkbox design options, be sure to click the Save button to apply your changes.
Once you have completed these steps and saved your settings, your product filter will display the selected checkbox design options. Users will have a visually appealing and interactive way to filter products based on the attributes you’ve set. Be sure to add images for each option to enhance understanding and improve user interaction.