<div class="row berocket_aapf_features">
    <div>
        <h4>Choose best layout for your filter</h4>

        <h5>Our WooCommerce AJAX Products Filter offers several layouts including slider, image and color</h5>

        <div class="demo-site">
            <a href="https://woocommerce-products-filter.berocket.com/shop/?utm_source=free_plugin&utm_medium=upgrade&utm_campaign=ajax_filters" target="_blank">[ demo site ]</a>
        </div>
        <img alt="Choose best layout for your filter" src="https://berocket.com/images/features/filters/filters-types.jpg" />
    </div>

    <div>
        <h4>Pagination and Order without page reloading</h4>

        <h5>Users will get next page loaded ordered by their preferences and without page reloading</h5>

        <div class="demo-site">
            <a href="https://woocommerce-products-filter.berocket.com/shop/?utm_source=free_plugin&utm_medium=upgrade&utm_campaign=ajax_filters" target="_blank">[ demo site ]</a>
        </div>

        <img alt="Pagination and Order without page reloading" src="https://berocket.com/images/features/filters/ajax_order_nav.jpg" />
    </div>

    <div>
        <h4>Show filters above products</h4>

        <h5>Need more space for the products? Say no to sidebars</h5>

        <div class="demo-site">
            <a href="https://woocommerce-products-filter.berocket.com/product-category/tshirts/?utm_source=free_plugin&utm_medium=upgrade&utm_campaign=ajax_filters" target="_blank">[ demo site ]</a>
        </div>
        <img alt="Show filters above products" src="https://berocket.com/images/features/filters/above_products.jpg" />
    </div>

    <div>
        <h4>SEO friendly urls</h4>

        <h5>Use Nice URLs with canonicalization and slugs instead of IDs</h5>

        <div class="demo-site">
            <a href="https://woocommerce-products-filter.berocket.com/product-category/tshirts/?utm_source=free_plugin&utm_medium=upgrade&utm_campaign=ajax_filters" target="_blank">[ demo site ]</a>
        </div>

        <div>&nbsp;</div>
        <img alt="SEO friendly urls" src="https://berocket.com/images/features/filters/urls.jpg" />
    </div>

    <div class="premium_buttons">
        <span>Read more about</span>
        <a class="get_premium_version" href="https://berocket.com/l/filters-upgrade/?utm_source=free_plugin&utm_medium=upgrade&utm_campaign=ajax_filters&utm_content=read_more&utm_term=first" target="_blank">PREMIUM VERSION</a>
        <span class="divider">OR</span>
        <a class="buy_premium_version" href="https://berocket.com/l/filters-upgrade/?utm_source=free_plugin&utm_medium=upgrade&utm_campaign=ajax_filters&utm_content=buy_now&utm_term=first#pricing" target="_blank">BUY NOW</a>
        <span>and get Up to <b>60% discount</b></span>
    </div>
    <div class="clear"></div>

    <div>
        <h4>Show results before filtering</h4>

        <h5>Show users what they will get before filters applied. Fast and efficient</h5>

        <div class="demo-site">
            <a href="https://woocommerce-products-filter.berocket.com/woocommerce-products-filter-demo-4/?utm_source=free_plugin&utm_medium=upgrade&utm_campaign=ajax_filters" target="_blank">[ demo site ]</a>
        </div>

        <div>&nbsp;</div>

        <img alt="Show results before filtering" src="https://berocket.com/images/features/filters/before_filter.jpg" />
    </div>

    <div>
        <h4>Include/Exclude values</h4>

        <h5>Show only needed values from the attribute or hide few</h5>

        <div class="demo-site">
            <a href="https://woocommerce-products-filter.berocket.com/woocommerce-products-filter-demo-4/?utm_source=free_plugin&utm_medium=upgrade&utm_campaign=ajax_filters" target="_blank">[ demo site ]</a>
        </div>
        <img alt="Include/Exclude values" src="https://berocket.com/images/features/filters/include_exclude.jpg" />
    </div>

    <div>
        <h4>Search Box on any page</h4>

        <h5>Users can pre-fill filters before visiting shop page</h5>

        <div class="demo-site">
            <a href="https://woocommerce-products-filter.berocket.com/?utm_source=free_plugin&utm_medium=upgrade&utm_campaign=ajax_filters" target="_blank">[ demo site ]</a>
        </div>
        <img alt="Search Box on any page" src="https://berocket.com/images/features/filters/searchbox.jpg" />
    </div>

    <div>
        <h4>Update filters with user needs</h4>

        <h5>Hate &quot;No Products!&quot; message? Hide values without products on the go</h5>

        <div class="demo-site">
            <a href="https://woocommerce-products-filter.berocket.com/shop/?utm_source=free_plugin&utm_medium=upgrade&utm_campaign=ajax_filters" target="_blank">[ demo site ]</a>
        </div>

        <div>&nbsp;</div>
        <img alt="Update filters with user needs" src="https://berocket.com/images/features/filters/reload.jpg" />
    </div>


    <div class="premium_buttons">
        <span>Read more about</span>
        <a class="get_premium_version" href="https://berocket.com/l/filters-upgrade/?utm_source=free_plugin&utm_medium=upgrade&utm_campaign=ajax_filters&utm_content=read_more&utm_term=second" target="_blank">PREMIUM VERSION</a>
    </div>
    <div class="clear"></div>


    <div>
        <h4>Brands<br />
        <small>(require our Brands plugin)</small></h4>

        <h5>Users love brands. Help them find favorite brands faster</h5>

        <div class="demo-site">
            <a href="https://woocommerce-products-filter.berocket.com/woocommerce-products-filter-demo-5/?utm_source=free_plugin&utm_medium=upgrade&utm_campaign=ajax_filters" target="_blank">[ demo site ]</a>
        </div>
        <img alt="Brands" src="https://berocket.com/images/features/filters/brands.jpg" />
    </div>

    <div>
        <h4>Price Ranges and Sliders for Attributes</h4>

        <h5>Love sliders? Use them now for the attributes too!</h5>

        <div class="demo-site">
            <a href="https://woocommerce-products-filter.berocket.com/woocommerce-products-filter-demo-2/?utm_source=free_plugin&utm_medium=upgrade&utm_campaign=ajax_filters" target="_blank">[ demo site ]</a>
        </div>
        <img alt="Price Ranges and Sliders for Attributes" src="https://berocket.com/images/features/filters/range_slider.jpg" />
    </div>


    <div class="center">
        <h4>WPML and Polylang compatibility</h4>

        <h5>EASILY TRANSLATE THE PLUGIN TO OTHER LANGUAGES WITH THE POWERFUL WPML AND POLYLANG TOOLS</h5>
        <img alt="WPML and Polylang compatibility" src="https://berocket.com/img/docs/wpml_polylang.png" />
    </div>


    <div class="premium_buttons">
        <a class="buy_premium_version" href="https://berocket.com/l/filters-upgrade/?utm_source=free_plugin&utm_medium=upgrade&utm_campaign=ajax_filters&utm_content=buy_now&utm_term=second#pricing" target="_blank">BUY NOW</a>
        <span>and get Up to <b>60% discount</b></span>
    </div>

    <div class="clear"></div>
</div>
<style>
.berocket_aapf_features {
    background-color: white;
}
.berocket_aapf_features > div {
    width: 50%;
    float: left;
    padding: 50px 10px 10px;
    box-sizing: border-box;
    background-color: white;
}
.berocket_aapf_features > div:nth-child(2n+1) {
    clear: left;
}
.berocket_aapf_features > div.center {
    margin: 0 auto;
    float: none;
    clear: both;
}
.berocket_aapf_features img {
    max-width: 100%;
    margin:auto;
    display: block;
}
.berocket_aapf_features h4,
.berocket_aapf_features h5,
.berocket_aapf_features .demo-site {
    text-align: center;
    line-height: 1.2em;
}
.berocket_aapf_features h5 {
    font-size: 17px;
    font-weight: 500;
}
.berocket_aapf_features h4 {
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
}
.berocket_aapf_features > div.clear {
    float: none;
    width: auto;
}


.berocket_aapf_features > div.premium_buttons {
    margin: 30px auto 20px;
    float: none;
    width: 600px;
    text-align: center;
    max-width: 100%;
    padding-top: 100px;
}

.berocket_aapf_features .buy_premium_version,
.berocket_aapf_features .get_premium_version{
    margin-top: 30px;
    margin-bottom: 20px;
    color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    text-shadow: none;
    border: 0 none;
    min-width: 120px;
    -moz-user-select: none;
    background: #ff5252 none repeat scroll 0 0;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    outline: 0 none;
    padding: 8px;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0s, background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
    white-space: nowrap;
    height: auto;
    vertical-align: top;
    line-height: 25px;
    border-radius: 3px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    font-weight: bold;
}

.berocket_aapf_features .get_premium_version,
.berocket_aapf_features .buy_premium_version {
    width: 90%;
}
.berocket_aapf_features .get_premium_version {
    margin: 5px 0;
    background: transparent;
    border: 2px solid #97b9cf;
    color: #7496ad;
}
.berocket_aapf_features .buy_premium_version {
    margin: 5px 0 15px;
    padding: 10px;
}
.berocket_aapf_features .premium_buttons span {
    display: block;
    color: #7496ad;
}
.berocket_aapf_features .premium_buttons span.divider {
    line-height: 2.4em;
    font-size: 20px;
    font-weight: bold;
    position: relative;
}
.berocket_aapf_features .premium_buttons span.divider:before,
.berocket_aapf_features .premium_buttons span.divider:after{
    position: absolute;
    top: 50%;
    left: 5%;
    right: 60%;
    height: 1px;
    background: #97b9cf;
    content: "";
}
.berocket_aapf_features .premium_buttons span.divider:after{
    left: 60%;
    right: 5%;
}
.berocket_aapf_features .premium_buttons span:last-child b{
    font-size: 16px;
}
.berocket_aapf_features .buy_premium_version:hover,
.berocket_aapf_features .buy_premium_version:focus,
.berocket_aapf_features .buy_premium_version:active {
    background: #ff6e68 none repeat scroll 0 0;
    color: white;
}
.berocket_aapf_features .get_premium_version:hover,
.berocket_aapf_features .get_premium_version:focus,
.berocket_aapf_features .get_premium_version:active{
    background: #97b9cf;
    color: white;
}

@media screen and (max-width: 767px){
    .berocket_aapf_features > div {
        width: 100%;
        float: none;
    }
}
</style>
