CODEWITHSUNDEEP
phpwordpresswoocommerce
kingcobra1986
kingcobra1986

Reputation: 971

How do I move the woocommerce sidebar to be above the shop items so that it is at the top at mobile?

I have a site that the Woocommerce shop page places the categories on the left. When you resized down to mobile, the categories would pop down to the bottom of the page. I wanted it to show up at the top. I wanted to do this with php, instead of making a bunch of javascript changes or css rules.

Upvotes: 0

Views: 1942

Answers (1)

kingcobra1986
kingcobra1986

Reputation: 971

Ok so the solution that I found was to go into the theme's folder, and then into config-woocommerce folder. In the config.php file, the function avia_woocommerce_after_main_content() there is the following code:

        //get the sidebar
        if(!is_singular())
        get_sidebar();

I removed that code from that function and moved it to the function avia_woocommerce_before_main_content right after the following code: 

$sidebar_setting = avia_layout_class( 'main' , false );
echo "<div class='container_wrap container_wrap_first main_color {$sidebar_setting} template-shop shop_columns_".$avia_config['shop_overview_column']."'>";

    echo "<div class='container'>";

So now the function looks like this:

function avia_woocommerce_before_main_content()

{ global $avia_config;

if(!isset($avia_config['shop_overview_column'])) $avia_config['shop_overview_column'] = "auto";

$id = get_option('woocommerce_shop_page_id');
$layout = get_post_meta($id, 'layout', true);

if(!empty($layout))
{
        $avia_config['layout']['current'] = $avia_config['layout'][$layout];
        $avia_config['layout']['current']['main'] = $layout;
}

    $avia_config['layout'] = apply_filters('avia_layout_filter', $avia_config['layout'], $id);

$title_args = array();

if(is_woocommerce())
{
    $t_link = "";

    if(is_shop()) $title  = get_option('woocommerce_shop_page_title');

    $shop_id = woocommerce_get_page_id('shop');
    if($shop_id && $shop_id != -1)
    {
        if(empty($title)) $title = get_the_title($shop_id);
        $t_link = get_permalink($shop_id);
    }

    if(empty($title)) $title  = __("Shop",'avia_framework');

    if(is_product_category() || is_product_tag())
    {
        global $wp_query;
        $tax = $wp_query->get_queried_object();
        $title = $tax->name;
        $t_link = '';
    }

    $title_args = array('title' => $title, 'link' => $t_link);
}

if( get_post_meta(get_the_ID(), 'header', true) != 'no') echo avia_title($title_args);


if(is_singular()) { 

    $result = 'sidebar_right';
    $avia_config['layout']['current'] = $avia_config['layout'][$result];
    $avia_config['layout']['current']['main'] = $result;

}
$sidebar_setting = avia_layout_class( 'main' , false );
echo "<div class='container_wrap container_wrap_first main_color {$sidebar_setting} template-shop shop_columns_".$avia_config['shop_overview_column']."'>";

    echo "<div class='container'>";

    //get the sidebar
    if(!is_singular())
        get_sidebar();

    if(!is_singular()) { $avia_config['overview'] = true; }

}

This worked with the enfold theme, I'm assuming that this will work with every theme. I do have to mess with the css in order to get it to get it so that the page looks right but this is the css portion of it.

Upvotes: 1

Related Questions