Support » Plugin: Ajax Search for WooCommerce » How to replace the default search of OceanWP with Ajax Search for Woocommerce?

  • Resolved sampadmad

    (@sampadmad)


    How to replace the default search box of the theme OceanWP with Ajax Search for WooCommerce?

    Your prompt response will be highly appreciated.

    Thanks, & Regards,

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Damian Gora

    (@damian-gora)

    Hi,

    I have some code I prepared to help other users with the OceanWP theme. Maybe it will be helpful. Also, a plan to add dedicated support for the OceanWP theme similar and the users will be able to replace the search form directly from plugin settings. Currently, I realized a similar feature only for WooCommerce Storefront theme.

    You need to override/copy some files in your child theme.
    Style Overlay
    file to create in your child theme: partials/header/search-overlay.php

    
    <?php
    /**
     * Site header search overlay
     *
     * @package OceanWP WordPress theme
     */
    
    // Exit if accessed directly
    if ( ! defined( 'ABSPATH' ) ) {
    	exit;
    }
    
    // Post type
    $post_type = get_theme_mod( 'ocean_menu_search_source', 'any' ); ?>
    
    <style>
        #searchform-overlay a.search-overlay-close {
            top: 40px;
        }
        #searchform-overlay form {
            position: static;
            margin-top: 0;
        }
    
        #searchform-overlay .dgwt-wcas-search-wrapp {
            max-width: none;
            position: absolute;
            top: 92px;
            text-align: left;
            max-width: none;
        }
        .dgwt-wcas-details-wrapp {
            z-index: 9999!important;
        }
    </style>
    
    <div id="searchform-overlay" class="header-searchform-wrap clr">
    	<div class="container clr">
            <a href="#" class="search-overlay-close"><span></span></a>
            <?php echo do_shortcode('[wcas-search-form]'); ?>
    	</div>
    

    Style Classic
    file to create in your child theme: partials/header/search-replace.php

    
    <?php
    /**
     * Site header search header replace
     *
     * @package OceanWP WordPress theme
     */
    
    // Exit if accessed directly
    if ( ! defined( 'ABSPATH' ) ) {
    	exit;
    }
    ?>
    
    <style>
        #searchform-header-replace {
            max-width: 500px!important;
        }
        #searchform-header-replace input {
            font-size: inherit;
            padding: 10px 15px 10px 40px;
            border-bottom: 1px solid #ccc;
            margin: 0 20px 0 10px;
        }
        #searchform-header-replace input:focus {
            box-shadow: none;
        }
        #searchform-header-replace .dgwt-wcas-search-wrapp {
            width: 500px;
            position: absolute;
            right: 0;
            top: calc(50% - 20px);
        }
    </style>
    
    <div id="searchform-header-replace" class="header-searchform-wrap clr">
    <?php echo do_shortcode('[wcas-search-form]'); ?>
    </div><!-- #searchform-header-replace -->
    

    Best
    Damian Góra

    It is working very well on Desktop but not on Mobile. The search box on the mobile menu is still the same old. Can you tell me how to replace it on Mobile?

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.