Display prouct description under image on prouct overview? « Support Forum | Kriesi.at

Support Forum » Flashlight

Display prouct description under image on prouct overview?

9 posts from 3 voices

Started 10 months ago by Rajkurt
Latest reply from Devin
This topic is not resolved

Tags:

Rajkurt
Member

Hello!

Great theme by the way! I have two questions;

1) Is it possible to show the product description (not the short product description) to display under the procuct image on the product overview pages?

2) Is it possible to get the main menu sub menus to display under a menu item when clicked like this;

ABOUT
SHOP
Product categorie 1 (11)
Product categorie 2 (6)
Product categorie 3 (9)
Product categorie 4 (4)
CONTACT
BLOG

instead of having a dropdwown menu which displays on hover? (And to show the amount of products in eac categorie next to it).

Cheers!

Posted 10 months ago #
Rajkurt
Member

Hmm... I dont get it. Ive started two threads here, but nobody answers me...

Anyway; regarding the menus issue mentioned above: here is part of the solution:

I edited the avia.js file like this;

// -------------------------------------------------------------------------------------------
// Avia Menu
// -------------------------------------------------------------------------------------------

(function($)
{
$.fn.avia_menu_helper = function(variables)
{
var defaults =
{
modify_position:true,
delay:300
};

var options = $.extend(defaults, variables);

return this.each(function()
{

var menu = $(this),
menuItems = menu.find(">li"),
dropdownItems = menuItems.find(">ul").parent(),
parentContainerWidth = menu.parent().width(),
delayCheck = {};

menuItems.each(function()
{
var item = $(this),
normalDropdown = item.find("li>ul").css({display:"none"});

//if we got a mega menu or dropdown menu add the arrow beside the menu item
if(normalDropdown.length)
{
normalDropdown.parent('li').addClass('submenu_available');
}
});

// bind events for dropdown menu
dropdownItems.find('li').andSelf().each(function()
{
var currentItem = $(this),
sublist = currentItem.find('ul:first'),
showList = false;

if(sublist.length)
{
sublist.css({display:'none', opacity:0, visibility:'hidden'});
var currentLink = currentItem.find('>a'),
timeout = "";

currentLink.bind('mousedown', function()
{
sublist.stop().css({visibility:'visible', display:'block'}).animate({opacity:1});
var other_lists = currentItem.siblings().find('ul');

other_lists.each(function()
{
var list = $(this);
if(list.css('opacity') > 0)
{
list.stop().animate({opacity:0},100, function()
{
list.css({visibility:'hidden'});
});
}
});
});

currentItem.bind('mouseenter', function()
{
clearTimeout(timeout);
});

currentItem.bind('mouseleave', function()
{
timeout = setTimeout(function()
{
sublist.stop().animate({opacity:0}, function()
{
sublist.css({visibility:'hidden', display:'none'});
});
},500);
});

}

});

});
};
})(jQuery);

And modified the css like this:

#top .main_menu .menu ul {
box-shadow: 0px;
cursor: pointer;
display: none;
left: 0px;
margin: 0;
padding: 2px 0;
position: relative;
top: -1px;
width: auto;
z-index: 200;
}

#top .main_menu .menu li ul a {
float: none;
font-size: 10px;
height: auto;
line-height: 18px;
max-width: none;
min-height: 24px;
padding: 2px 0;
text-align: left;
width: auto;
}

#top .main_menu .menu ul {
box-shadow: 0 0 0 0 transparent;
}

#top .main_menu .menu ul {
background: none repeat scroll 0 0 #FFFFFF;
border: 0 none;
}

To achive what I was looking for. Now the dropdown menu unfolds when I click on the parent menu item. But the problem is that when I do that, besides of unfolding the sub-menu, it takes me to the parent item page. I would like to add an arrow or something next to the parent menu item which indicates that this menu item can be unfolded. And when you click that arrow the sub-menu unfolds. It would be really nice if you pointed me in the right direction!

Cmon guys! Please answe me!

Posted 10 months ago #
Ismael
Moderator
Hello,

1.) To show the content after the images, open woocommerce-config.php > config.php and find this code

echo get_the_post_thumbnail( get_the_ID(), 'shop_catalog' );

Replace it with
```
echo get_the_post_thumbnail( get_the_ID(), 'shop_catalog' );
		the_content();
```
2.) I think you solved it already?

Regards,
Ismael
Posted 10 months ago #
Rajkurt
Member

1) Sorry, if i was unclear. But I would like to have the_content(); to be shown inbetween the <h3> tag and the price. Would that be possible? Im guessing its somewhere inside the 'shop_catalog' string?

2) No, I havent solved it yet. The above solution works only halfway. I would like to be able to click on the parent menu item which folds out the sub-menu without it takes me to the parent item page. Or to be able to have a fold/unfold arrow as described above.

I noticed that it works exactly how I want if you view it in you iPhone. Is there a way to use that solution for viewing it in you browser on the computer aswell?

Thansk for the answer though!

Posted 10 months ago #
Devin
Moderator
Hi Rajkurt,

For #1, just below the code above in the config.php you should see a function to "echo the excerpt". If you replace:
```
echo "<div class='product_excerpt'>";
		the_excerpt();
		echo "</div>";
```
with
```
echo "<div class='product_excerpt'>";
		the_content();
		echo "</div>";
```
and then choose to show the product description in the catalog view, you should now see the entire content instead of the product description.

For #2, I don't know of an easy way to achieve that without really digging into the menu code and doing quite a bit of modification. You could potentially use some javascript to strip the main menu item of its link so that you aren't taken to the parent page or you could try using the # symbol in your Menus manager in place of a URL link so that selecting that page link doesn't go anywhere.

Regards,

Devin
Posted 10 months ago #
Rajkurt
Member

Thanks for the reply!

1) Ive added the code above, but where do I "then choose to show the product description in the catalog view,", I cant find it in the woocoomerce settings...

2) Ive already tried the # ""hack"" but then the parent item wont get the "current" class attribute. You dont have any nice javascript lying around that would do the trick? :-D

Posted 10 months ago #
Ismael
Moderator

Hello,

When you add the snippet above, just try to put a description on your products and it will show by default.

For the menus, like Devin said, it is a bit complicated. :)

Regards,
Ismael

Posted 10 months ago #
Rajkurt
Member

Hello and thanks for the answer,

1) No it dosent, I have added text in the general description for each product and It does not show (not by default anyway).

2) When you say "it is a bit complicated. :)" you meen that its up to me to solve it?

Regards,
Richard

Posted 10 months ago #
Devin
Moderator
Hi Richard,

It appears that Flashlight doesn't have the excerpt function displayed in the admin area. You'll need to re-edit the config.php one more time to force the excerpt to display and not check for the avia function. So change:
```
if(!empty($avia_config['shop_overview_excerpt']))
	{
		echo "<div class='product_excerpt'>";
		the_content();
		echo "</div>";
	}
```
to
```
#if(!empty($avia_config['shop_overview_excerpt']))
	#{
		echo "<div class='product_excerpt'>";
		the_content();
		echo "</div>";
	#}
```
Then, search for:
add_action( 'woocommerce_after_shop_loop_item_title', 'avia_woocommerce_overview_excerpt', 10);
and change it to
add_action( 'woocommerce_after_shop_loop_item_title', 'avia_woocommerce_overview_excerpt', 8);

For #2, I'm not even quite sure a bit of javascript would accomplish that customization but no, we aren't able to get into that level of depth through support. I'd recommend looking into a freelance developer if you aren't comfortable with writing the code.

Regards,

Devin
Posted 10 months ago #