Home » Tutorials » Opencart » Make Opencart product filters show as a dropdown instead of checkbox

Make Opencart product filters show as a dropdown instead of checkbox

opencart filters select

Common Opencart themes issue is that filters appear as a checkbox instead of the better looking dropdown select. If you were wondering how to fix this, here is a short tip.

This tutorial is part of the Ftutorials Opencart tutorials and will also help you understand the Opencart logic.

Open catalog/view/theme/your_template/template/module/filter.tpl – this is where the modules of your theme are located. Then find this section of code:

<ul class="box-filter">
      <?php foreach ($filter_groups as $filter_group) { ?>
      <li><span id="filter-group<?php echo $filter_group['filter_group_id']; ?>"><?php echo $filter_group['name']; ?></span>
<ul>
              <?php foreach ($filter_group['filter'] as $filter) { ?>
              <?php if (in_array($filter['filter_id'], $filter_category)) { ?>
              <li>
                <input type="checkbox" value="<?php echo $filter['filter_id']; ?>" id="filter<?php echo $filter['filter_id']; ?>" checked="checked" />
                <label for="filter<?php echo $filter['filter_id']; ?>"><?php echo $filter['name']; ?></label>
              </li>
              <?php } else { ?>
              <li>
                <input type="checkbox" value="<?php echo $filter['filter_id']; ?>" id="filter<?php echo $filter['filter_id']; ?>" />
                <label for="filter<?php echo $filter['filter_id']; ?>"><?php echo $filter['name']; ?></label>
              </li>
              <?php } ?>
              <?php } ?>
            </ul>

And replace it with:

<ul class="box-filter" style="padding:10px 0;">
      <?php foreach ($filter_groups as $filter_group) { ?>
            <select>
             <option><?php echo $filter_group['name']; ?></option>
              <?php foreach ($filter_group['filter'] as $filter) { ?>
              <?php if (in_array($filter['filter_id'], $filter_category)) { ?>
              <option value="<?php echo $filter['filter_id']; ?>" id="filter<?php echo $filter['filter_id']; ?>" selected>
             <?php echo $filter['name']; ?>
              </option>
              <?php } else { ?>
              <option value="<?php echo $filter['filter_id']; ?>" id="filter<?php echo $filter['filter_id']; ?>">
             <?php echo $filter['name']; ?>
              </option>
              <?php } ?>
              <?php } ?>
            </select> 

Note: The code that you search for might not be exactly the same in your template. It might have some minor differences.

Replace this code:

$('.box-filter input[type=\'checkbox\']:checked').each(function(element) {

With this:

$('.box-filter select option:selected').each(function(element) {

And finally, add this code to your stylesheet.css file:

.box-filter select {
width: 100%;
padding:10px 0;
}

Your stylesheet.css is usually located in catalog/view/theme/your_template/stylesheet/stylesheet.css

Common Opencart themes issue is that filters appear as a checkbox instead of the better looking dropdown select. If you were wondering how to fix this, here is a short tip. This tutorial is part of the Ftutorials Opencart tutorials and will also help you understand the Opencart logic. Open&hellip;

0%

User Rating: 4.65 ( 2 votes)
0

About Georgi Dyulgerov

Georgi Dyulgerov

Founder of fTutorials.com - the website aiming to keep you in touch with the latest technologies in the brand. Also a Freelance web developer.

3 comments

  1. Another good post. Thx.

  2. Hi, it’s great tutorial. But what about OC 2.2 for example? Is there a similar solution? Could you share it?

Leave a Reply

Your email address will not be published. Required fields are marked *


Loading Facebook Comments ...