Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • November 9, 2015 at 3:45 pm #532665
    sigifinsrl

    Hello,
    we are working on a shop and, on smartphones, we need to display the sidebar above the content instead of below it.
    Do you have any suggestion on how to achieve it?

    Best
    Sigifin

    • This topic was modified 8 years, 5 months ago by sigifinsrl.
    November 9, 2015 at 5:27 pm #532773
    Elliott

    Hey sigifinsrl!

    I don’t see an easy way of going about that. You could try using the widget area element instead of an actual sidebar and if it’s displayed first on the left then it should display on top on smaller screens when the columns stack on top of each other.

    Cheers!
    Elliott

    November 10, 2015 at 6:18 pm #533535
    sigifinsrl

    Hi Elliot,

    I found a solution. It’s manual so when you add or remove a category you need to update the change, but it isn’t that difficult.

    I manually added the category list in this file: /wp-content/themes/enfold/config-woocommerce/config.php

    function avia_woocommerce_before_shop_loop()
{

	global $avia_config;
	if(isset($avia_config['dynamic_template'])) return;
    $markup = avia_markup_helper(array('context' => 'content','echo'=>false,'post_type'=>'products'));
	echo "<main class='template-shop content ".avia_layout_class( 'content' , false)." units' $markup><div class='entry-content-wrapper'>";
#
# DELETE the "#" symbols and put your code here
#
}

    This is the code I added and then I styled it via CSS and displayed it only on mobile:

    	echo "<div class='sh-mobile-categories'>SHOP BY CATEGORY</div></BR><div class='sh-mobile-categories-list'><a href=\"/product-category/swimwear/\">SWIMWEAR</a></BR><a href=\"/product-category/2-piece/\">2 PIECE</a></BR><a href=\"/product-category/tops/\">TOPS</a></BR><a href=\"/product-category/bottoms/\">BOTTOMS</a></BR><a href=\"/product-category/dresses/\">DRESSES</a></BR><a href=\"/product-category/outwear/\">OUTWEAR</a></BR><a href=\"/product-category/accessories/\">ACCESSORIES</a></div>";
    • This reply was modified 8 years, 5 months ago by sigifinsrl.
  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Shop page sidebar on mobile above content’ is closed to new replies.